前端 vue 2020最新面试题_前端面试题2020vue

前端 vue 2020最新面试题

简述Vue的响应式原理

• 当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
  

Vue的双向数据绑定原理是什么？( vue data是怎么实现的)

• 答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

• 具体步骤：

  • 第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

  • 第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函 数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

  • 第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

    • 1、在自身实例化时往属性订阅器(dep)里面添加自己
    • 2、自身必须有一个update()方法
    • 3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

  • 第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

生命周期

• BeforeCreate 数据观测初始化事件还未开始 el 和 data 并未初始化进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定，无el选项
• Created 完成数据观测，属性和方法的运算，初始化事件，el属性还没有显示出来判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm. el属性还没有显示出来判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.el属性还没有显示出来判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.mount(el)
• BeforeMount 在挂载开始之前被调用，相关的render函数首次被调用。完成了 el 和 data 初始化
  创建vm.el并用其替换“el”Mounted在el被新创建的vm. el 并用其替换“el”Mounted 在el 被新创建的 vm.el并用其替换“el”Mounted在el被新创建的vm.el 替换，并挂载到实例上去之后调用。挂在完毕如果调用vm.$destory()
• BeforeUpdate 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前虚拟DOM 重新渲染并应用更新
• Updated 由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用
• BeforeDestroy 在实例销毁之前调用。实例仍然完全可用。
  解除绑定，销毁子组件以及事件监听器
• Destroyed 在实例销毁之后调用。所有的事件监听器会被移除，所有的子实例也会被销毁从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁

请详细说下你对vue生命周期的理解？

• 答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
  • 创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
  • 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节 点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
  • 更新前/后：当data变化时，会触发beforeUpdate和updated方法。
  • 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

V-指令

• v-model
• v-bind
• v-show
• v-if
• v-for
• v-on
• v-once
• v-html

V-model原理

• v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

• <input v-bind: value=”something” v-on:input=”something = $event.target.value”>
  接受一个value属性 在有新的value属性时触发input事件

• v-model 是动态的双向数据绑定（只能用在input, textarea, select上）
  .lazy .trim .number

mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 答：一个model+view+viewModel框架，数据模型model，viewModel连接两个
  • 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
  • 场景：数据操作比较多的场景，更加便捷

MVVM

• Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
• View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
• ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
• 在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
• MVC有厚重的View Controller，无处安放的网络逻辑，较差的可测试性

请说出vue.cli项目中src目录每个文件夹和文件的用法？

• 答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

• 第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {
• 第二步：在需要用的页面（组件）中导入：import smithButton from
• 第三步：’/components/smithButton.vue’
• 第三步：注入到vue的子组件的components属性上面,components:{smithButton}
• 第四步：在template视图view中使用，
• 问题有：smithButton命名，使用的时候则smith-button。

怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

• 答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id

vue-router有哪几种导航钩子？

• 答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

组件参数传递

• 父组件传给子组件：子组件通过props方法接受数据;

• 子组件传给父组件：$emit方法传递参数

• Vuex多组件共享状态(数据的管理) 组件间的关系也没有限制 功能比pubsub强大, 更适用于vue项目
  Slot通信是带数据的标签

• Pubsub第三方库(消息订阅与发布)适合于任何关系的组件间通信

• hash模式 history模式

• hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取

• history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）- 可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

vue-loader是什么？使用它的用途有哪些？

• 答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。
• 用途：js可以写es6、style样式可以scss或less、template可以加jade等

请说下封装 vue 组件的过程？

• 答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
  然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

vuex

• State：存放数据状态，不可直接修改里面数据
• Mutations：定义的方法动态修改Vuex的store中的状态或数据
• Getters：类似vue的计算属性，主要用来过滤一些数据。
• Action：可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
• Modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

• 答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
• 钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
• 钩子函数参数：el、binding

keep-alive

• Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

vue.js的两个核心

• 数据驱动
• 组件系统

vue修饰符

• .prevent: 提交事件不再重载页面；
• .stop: 阻止单击事件冒泡；
• .self: 当事件发生在该元素本身而不是子元素的时候会触发；
• .capture: 事件侦听，事件发生的时候会调用

vue的key值

用于管理可复用的元素。因Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使Vue变得非常快，为了高效的更新虚拟DOM

route & router & routes

• router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。(管理所有路由)
• route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等 (一条路由)
• routes 一组路由 (一组路由)

computed & watch

• computed是一个计算属性，类似于过滤器，对于绑定到view的数据进行处理，具有缓存性，简化了计算和处理过程 有get和set
• watch是一个观察动作，监听props，$emit等异步操作，无缓存性
• computed的话是通过几个数据的变化，来影响一个数据，而watch，则是可以一个数据的变化，去影响多个数据
  当一个属性受多个属性影响的时候就需要用到computed
  当一条数据影响多条数据的时候就需要用watch

Vue-router 和location.href

• 使用location.href=’/url’来跳转，简单方便，但是刷新了页面；
• 使用history.pushState(’/url’)，无刷新页面，静态跳转；

聊聊你对Vue.js的template编译的理解？

• 答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
  详情步骤：
• 首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
• 然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

传参

• 路由传参：

  • router.js 后边跟:id配置参数
  • query 方法传参
  • name 方法传参
  • vue自带标签标签传参

• 组件传参：

  • 父传子 props
  • 子传父 this.$emit()
  • 子传父 this.emit非父子组件eventHub中转站this. emit非父子组件 eventHub 中转站 this.emit非父子组件eventHub中转站this.on
  • vuex state 存的变量，mutations改变的状态 actions 触发的行为（方法）

组件的引入

导入组件import Vheader from ‘./components/Vheader.vue’
挂载组件在export default 中 定义一个key为components，值为一个对象，这个对象中放着导入键值对；键为变量名，值为组件名，在es6中，键值相同时，可以缩写为一个单一的值。比如：components：{ Vheader }
在template模板中使用组件：

<Vheader>  </Vheader>
1

如何优化SPA应用的首屏加载速度慢的问题？

• 将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；
• 在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；
• 加一个首屏loading图，提升用户体验；

scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

• 答：css的预编译。
• 使用步骤：
  • 第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）
  • 第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
  • 第三步：还是在同一个文件，配置一个module属性
  • 第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
• 有哪几大特性:
  • 可以用变量，例如（$变量名称=值）；
  • 可以用混合器，例如（）
  • 可以嵌套

前端如何优化网站性能？

• 减少 HTTP 请求数量

  • 在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

• CSS Sprites

  • 国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

  • 合并 CSS 和 JS 文件

  • 现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

• 采用 lazyLoad

  • 俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

• 控制资源文件加载优先级

  • 浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

• 一般情况下都是CSS在头部，JS在底部。

• 利用浏览器缓存

  • 浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

• 减少重排（Reflow）

  • 基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。

• 减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。

• 减少 DOM 操作

• 图标使用 IconFont 替换

• 网页从输入网址到渲染完成经历了哪些过程？ 大致可以分为如下7步：

  • 输入网址；
  • 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
  • 与web服务器建立TCP连接；
  • 浏览器向web服务器发送http请求；
  • web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
  • 浏览器下载web服务器返回的数据及解析html源文件；
  • 生成DOM树，解析css和js，渲染页面，直至显示完成；