自用前端面试题（Vue）1.VUE的基本原理当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.d

1.VUE的基本原理

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

2.双向数据绑定的原理

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：

需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

3.使用 Object.defineProperty() 来进行数据劫持有什么缺点?

在对一些属性进行操作时，使用这种方法无法拦截，比如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为 Object.defineProperty 不能拦截到这些操作。更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。

在 Vue3.0 中已经不使用这种方式了，而是通过使用 Proxy 对对象进行代理，从而实现数据劫持。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变，唯一的缺点是兼容性的问题，因为 Proxy 是 ES6 的语法。

4.MVVM、MVC、MVP的区别

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。在开发单页面应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，如果项目变得复杂，那么整个文件就会变得冗长、混乱，这样对项目开发和后期的项目维护是非常不利的。

MVCMVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据，以及对相应数据的操作。并且 View 和 Model 应用了观察者模式，当 Model 层发生改变的时候它会通知有关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，Controller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新。
MVVMMVVM 分为 Model、View、ViewModel
Model代表数据模型，数据和业务逻辑都在Model层中定义;
View代表UI视图，负责数据的展示;
ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作。
Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了 Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM。
MVPMVP 模式与 MVC 唯一不同的在于 Presenter 和 Controller。在 MVC 模式中使用观察者模式，来实现当 Model 层数据发生变化的时候，通知 View 层的更新。这样 View 层和 Model 层耦合在一起，当项目逻辑变得复杂的时候，可能会造成代码的混乱，并且可能会对代码的复用性造成一些问题。MVP 的模式通过使用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的Controller 只知道 Model 的接口，因此它没有办法控制 View 层的更新，MVP 模式中，View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起，以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦，Presenter 还包含了其他的响应逻辑。

5.Computed 和 Watch 的区别

详细版本：ustbhuangyi.github.io/vue-analysi…

对于Computed：

它支持缓存，只有依赖的数据发生了变化，才会重新计算
不支持异步，当Computed中有异步操作时，无法监听数据的变化
computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed
如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值；在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法。

对于Watch：

它不支持缓存，数据变化时，它就会触发相应的操作
支持异步监听
监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
当一个属性发生变化时，就需要执行相应的操作
监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数：
- immediate：组件加载立即触发回调函数
- deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。

当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。

总结：

computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

运用场景：

当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。
当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

6.Computed 和 Methods 的区别

相同点：
可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的。
不同点：

computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；
method 调用总会执行该函数

7.slot是什么？有什么作用？原理是什么？

slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。

默认插槽：又名匿名查抄，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。
作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

实现原理：当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.$slot中，默认插槽为vm.$slot.default，具名插槽为vm.$slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到slot标签，使用$slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。

8.过滤器的作用，如何实现一个过滤器？

根据过滤器的名称，过滤器是用来过滤数据的，在Vue中使用filters来过滤数据，filters不会修改数据，而是过滤数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示）。
使用场景：
需要格式化数据的情况，比如需要处理时间、价格等数据格式的输出 / 显示；比如后端返回一个 年月日的日期字符串，前端需要展示为 多少天前 的数据格式，此时就可以用fliters过滤器来处理数据。
过滤器是一个函数，它会把表达式中的值始终当作函数的第一个参数。过滤器用在插值表达式 {{ }} 和 v-bind 表达式 中，然后放在操作符“ | ”后面进行指示。

9.如何保存页面的当前的状态？

既然是要保持页面的状态（其实也就是组件的状态），那么会出现以下两种情况：

前组件会被卸载
前组件不会被卸载

那么可以按照这两种情况分别得到以下方法：
组件会被卸载：

（1）将状态存储在LocalStorage / SessionStorage

只需要在组件即将被销毁的生命周期 componentWillUnmount （react）中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。在这里面需要注意的是组件更新状态的时机。

比如从 B 组件跳转到 A 组件的时候，A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候，实际上是希望 B 组件重新渲染的，也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性，用来控制 A 组件是否读取 Storage 中的状态。

优点：

兼容性好，不需要额外库或工具。
简单快捷，基本可以满足大部分需求。

缺点：

状态通过 JSON 方法储存（相当于深拷贝），如果状态中有特殊情况（比如 Date 对象、Regexp 对象等）的时候会得到字符串而不是原来的值。（具体参考用 JSON 深拷贝的缺点）
如果 B 组件后退或者下一页跳转并不是前组件，那么 flag 判断会失效，导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage，会造成很奇怪的现象。

（2）路由传值

通过 react-router 的 Link 组件的 prop —— to 可以实现路由间传递参数的效果。

在这里需要用到 state 参数，在 B 组件中通过 history.location.state 就可以拿到 state 值，保存它。返回 A 组件时再次携带 state 达到路由状态保持的效果。

优点：

简单快捷，不会污染 LocalStorage / SessionStorage。
可以传递 Date、RegExp 等特殊对象（不用担心 JSON.stringify / parse 的不足）

缺点：

如果 A 组件可以跳转至多个组件，那么在每一个跳转组件内都要写相同的逻辑。

组件不会被卸载：

（1）单页面渲染

要切换的组件作为子组件全屏渲染，父组件中正常储存页面状态。

优点：

代码量少
不需要考虑状态传递过程中的错误

缺点：

增加 A 组件维护成本
需要传入额外的 prop 到 B 组件
无法利用路由定位页面

除此之外，在Vue中，还可以是用keep-alive来缓存页面，当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行被包裹在keep-alive中的组件的状态将会被保留：

<keep-alive>
	<router-view v-if="$route.meta.keepAlive"></router-view>
</kepp-alive>

router.js

{
  path: '/',
  name: 'xxx',
  component: ()=>import('../src/views/xxx.vue'),
  meta:{
    keepAlive: true // 需要被缓存
  }
},

10.常见的事件修饰符及其作用

.stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
.prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture ：与事件冒泡的方向相反，事件捕获由外到内；
.self ：只会触发自己范围内的事件，不包含子元素；
.once ：只会触发一次。
.passive：告诉浏览器你不想阻止事件的默认行为

11.v-if、v-show、v-html的原理

v-if会调用addIfCondition方法，生成vnode的时候，会忽略对应节点，render的时候就不会渲染；
v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；
v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。

12.v-if和v-show的区别

手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且DOM元素保留；
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

13.v-model 是如何实现的？语法糖实际是什么?

作用在表单元素上 动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message设置为目标值：

<input v-model="sth" />
//  等同于
<input 
    v-bind:value="message" 
    v-on:input="message=$event.target.value"
>
//$event 指代当前触发的事件对象;
//$event.target 指代当前触发的事件对象的dom;
//$event.target.value 就是当前dom的value值;
//在@input方法中，value => sth;
//在:value中,sth => value;

作用在组件上 在自定义组件中，v-model 默认会利用名为 value 的 prop和名为 input 的事件，本质是一个父子组件通信的语法糖，通过prop和$.emit实现。 因此父组件 v-model 语法糖本质上可以修改为：

<child :value="message"  @input="function(e){message = e}"></child>

在组件的实现中，可以通过 v-model属性来配置子组件接收的prop名称，以及派发的事件名称。例子：

// 父组件
<aa-input v-model="aa"></aa-input>
// 等价于
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value"></aa-input>

// 子组件：
<input v-bind:value="aa" v-on:input="onmessage"></aa-input>

props:{value:aa,}
methods:{
    onmessage(e){
        $emit('input',e.target.value)
    }
}

默认情况下，一个组件上的v-model 会把 value 用作 prop且把 input 用作 event。但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。js 监听input 输入框输入数据改变，用oninput，数据改变以后就会立刻触发这个事件。通过input事件把数据$emit出去，在父组件接收。父组件设置v-model的值为input $emit过来的值。

14.v-model 可以被用在自定义组件上吗？如果可以，如何使用?

可以。
v-model 实际上是一个语法糖，如:

<input v-model="searchText">

实际上相当于:

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

用在自定义组件上也是同理:

<custom-input v-model="searchText">

相当于:

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

显然，custom-input 与父组件的交互如下:

父组件将searchText变量传入custom-input 组件，使用的 prop 名为value；
custom-input 组件向父组件传出名为input的事件，父组件将接收到的值赋值给searchText。

所以，custom-input 组件的实现应该类似于这样：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

15.data为什么是一个函数而不是对象

JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。

而在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。

所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。

16.对keep-alive的理解，它是如何实现的，具体缓存的是什么？

如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。

（1）keep-alive

keep-alive有以下三个属性：

include 字符串或正则表达式，只有名称匹配的组件会被匹配；
exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存；
max 数字，最多可以缓存多少组件实例。

注意：keep-alive 包裹动态组件时，会缓存不活动的组件实例。

主要流程

判断组件 name ，不在 include 或者在 exclude 中，直接返回 vnode，说明该组件不被缓存。
获取组件实例 key ，如果有获取实例的 key，否则重新生成。
key生成规则，cid +"∶∶"+ tag ，仅靠cid是不够的，因为相同的构造函数可以注册为不同的本地组件。
如果缓存对象内存在，则直接从缓存对象中获取组件实例给 vnode ，不存在则添加到缓存对象中。 5.最大缓存数量，当缓存组件数量超过 max 值时，清除 keys 数组内第一个组件。

（2）keep-alive 的实现

const patternTypes: Array<Function> = [String, RegExp, Array] // 接收：字符串，正则，数组

export default {
  name: 'keep-alive',
  abstract: true, // 抽象组件，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

  props: {
    include: patternTypes, // 匹配的组件，缓存
    exclude: patternTypes, // 不去匹配的组件，不缓存
    max: [String, Number], // 缓存组件的最大实例数量, 由于缓存的是组件实例（vnode），数量过多的时候，会占用过多的内存，可以用max指定上限
  },

  created() {
    // 用于初始化缓存虚拟DOM数组和vnode的key
    this.cache = Object.create(null)
    this.keys = []
  },

  destroyed() {
    // 销毁缓存cache的组件实例
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  mounted() {
    // prune 削减精简[v.]
    // 去监控include和exclude的改变，根据最新的include和exclude的内容，来实时削减缓存的组件的内容
    this.$watch('include', (val) => {
      pruneCache(this, (name) => matches(val, name))
    })
    this.$watch('exclude', (val) => {
      pruneCache(this, (name) => !matches(val, name))
    })
  },
}

render函数

会在 keep-alive 组件内部去写自己的内容，所以可以去获取默认 slot 的内容，然后根据这个去获取组件
keep-alive 只对第一个组件有效，所以获取第一个子组件。
和 keep-alive 搭配使用的一般有：动态组件和router-view。

render () {
  //
  function getFirstComponentChild (children: ?Array<VNode>): ?VNode {
    if (Array.isArray(children)) {
  for (let i = 0; i < children.length; i++) {
    const c = children[i]
    if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {
      return c
    }
  }
  }
  }
  const slot = this.$slots.default // 获取默认插槽
  const vnode: VNode = getFirstComponentChild(slot)// 获取第一个子组件
  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions // 组件参数
  if (componentOptions) { // 是否有组件参数
    // check pattern
    const name: ?string = getComponentName(componentOptions) // 获取组件名
    const { include, exclude } = this
    if (
      // not included
      (include && (!name || !matches(include, name))) ||
      // excluded
      (exclude && name && matches(exclude, name))
    ) {
      // 如果不匹配当前组件的名字和include以及exclude
      // 那么直接返回组件的实例
      return vnode
    }

    const { cache, keys } = this

    // 获取这个组件的key
    const key: ?string = vnode.key == null
      // same constructor may get registered as different local components
      // so cid alone is not enough (#3269)
      ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
      : vnode.key

    if (cache[key]) {
      // LRU缓存策略执行
      vnode.componentInstance = cache[key].componentInstance // 组件初次渲染的时候componentInstance为undefined

      // make current key freshest
      remove(keys, key)
      keys.push(key)
      // 根据LRU缓存策略执行，将key从原来的位置移除，然后将这个key值放到最后面
    } else {
      // 在缓存列表里面没有的话，则加入，同时判断当前加入之后，是否超过了max所设定的范围，如果是，则去除
      // 使用时间间隔最长的一个
      cache[key] = vnode
      keys.push(key)
      // prune oldest entry
      if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
      }
    }
    // 将组件的keepAlive属性设置为true
    vnode.data.keepAlive = true // 作用：判断是否要执行组件的created、mounted生命周期函数
  }
  return vnode || (slot && slot[0])
}

keep-alive 具体是通过 cache 数组缓存所有组件的 vnode 实例。当 cache 内原有组件被使用时会将该组件 key 从 keys 数组中删除，然后 push 到 keys数组最后，以便清除最不常用组件。

实现步骤：

获取 keep-alive 下第一个子组件的实例对象，通过他去获取这个组件的组件名
通过当前组件名去匹配原来 include 和 exclude，判断当前组件是否需要缓存，不需要缓存，直接返回当前组件的实例vNode
需要缓存，判断他当前是否在缓存数组里面：

存在，则将他原来位置上的 key 给移除，同时将这个组件的 key 放到数组最后面（LRU）
不存在，将组件 key 放入数组，然后判断当前 key数组是否超过 max 所设置的范围，超过，那么削减未使用时间最长的一个组件的 key

最后将这个组件的 keepAlive 设置为 true

（3）keep-alive 本身的创建过程和 patch 过程

缓存渲染的时候，会根据 vnode.componentInstance（首次渲染 vnode.componentInstance 为 undefined）和 keepAlive 属性判断不会执行组件的 created、mounted 等钩子函数，而是对缓存的组件执行 patch 过程∶ 直接把缓存的 DOM 对象直接插入到目标元素中，完成了数据更新的情况下的渲染过程。

首次渲染

组件的首次渲染∶判断组件的 abstract 属性，才往父组件里面挂载 DOM;

// core/instance/lifecycle
function initLifecycle (vm: Component) {
  const options = vm.$options

  // locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) { // 判断组件的abstract属性，才往父组件里面挂载DOM
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

判断当前 keepAlive 和 componentInstance 是否存在来判断是否要执行组件 prepatch 还是执行创建 componentlnstance;

// core/vdom/create-component
init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
    if (
      vnode.componentInstance &&
      !vnode.componentInstance._isDestroyed &&
      vnode.data.keepAlive
    ) { // componentInstance在初次是undefined!!!
      // kept-alive components, treat as a patch
      const mountedNode: any = vnode // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode) // prepatch函数执行的是组件更新的过程
    } else {
      const child = vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      )
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  },

prepatch 操作就不会再执行组件的 mounted 和 created 生命周期函数，而是直接将 DOM 插入 （3）LRU（Last recently used）缓存策略 LRU 缓存策略∶ 从内存中找出最久未使用的数据并置换新的数据。 LRU（Least rencently used）算法根据数据的历史访问记录来进行淘汰数据，其核心思想是 "如果数据最近被访问过，那么将来被访问的几率也更高" 。最常见的实现是使用一个链表保存缓存数据，详细算法实现如下∶

新数据插入到链表头部
每当缓存命中（即缓存数据被访问），则将数据移到链表头部
链表满的时候，将链表尾部的数据丢弃。

17. $nextTick 原理及作用

Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。

nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。

nextTick 不仅是 Vue 内部的异步队列的调用方法，同时也允许开发者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时机的后续逻辑处理

nextTick 是典型的将底层 JavaScript 执行原理应用到具体案例中的示例，引入异步更新队列机制的原因∶

如果是同步更新，则多次对一个或多个属性赋值，会频繁触发 UI/DOM 的渲染，可以减少一些无用渲染
同时由于 VirtualDOM 的引入，每一次状态发生变化后，状态变化的信号会发送给组件，组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点，然后对 DOM 进行更新操作，每次更新状态后的渲染过程需要更多的计算，而这种无用功也将浪费更多的性能，所以异步渲染变得更加至关重要

Vue采用了数据驱动视图的思想，但是在一些情况下，仍然需要操作DOM。有时候，可能遇到这样的情况，DOM1的数据发生了变化，而DOM2需要从DOM1中获取数据，那这时就会发现DOM2的视图并没有更新，这时就需要用到了nextTick了。

由于Vue的DOM操作是异步的，所以，在上面的情况中，就要将DOM2获取数据的操作写在$nextTick中。

this.$nextTick(() => {    // 获取数据的操作...})

所以，在以下情况下，会用到nextTick：

在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，这个操作就需要方法在nextTick()的回调函数中。
在vue生命周期中，如果在created()钩子进行DOM操作，也一定要放在nextTick()的回调函数中。

因为在created()钩子函数中，页面的DOM还未渲染，这时候也没办法操作DOM，所以，此时如果想要操作DOM，必须将操作的代码放在nextTick()的回调函数中。

18.Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？

<template> 
   <div>
      <ul>
         <li v-for="value in obj" :key="value"> {{value}} </li> 
      </ul> 
      <button @click="addObjB">添加 obj.b</button> 
   </div>
</template>

<script>
    export default { 
       data () { 
          return { 
              obj: { 
                  a: 'obj.a' 
              } 
          } 
       },
       methods: { 
          addObjB () { 
              this.obj.b = 'obj.b' 
              console.log(this.obj) 
          } 
      }
   }
</script>

点击 button 会发现，obj.b 已经成功添加，但是视图并未刷新。这是因为在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局 api$set()：

addObjB () (
   this.$set(this.obj, 'b', 'obj.b')
   console.log(this.obj)
}

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了。

19.Vue中封装的数组方法有哪些？如何实现页面更新？

在Vue中，对响应式处理利用的是Object.defineProperty对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组的截取变化等，所以需要对这些操作进行hack，让Vue能监听到其中的变化。

Vue是如何实现让这些数组方法实现元素的实时更新的呢，下面是Vue中对这些方法的封装：

// 缓存数组原型
const arrayProto = Array.prototype;
// 实现 arrayMethods.__proto__ === Array.prototype
export const arrayMethods = Object.create(arrayProto);
// 需要进行功能拓展的方法
const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse"
];

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function(method) {
  // 缓存原生数组方法
  const original = arrayProto[method];
  def(arrayMethods, method, function mutator(...args) {
    // 执行并缓存原生数组功能
    const result = original.apply(this, args);
    // 响应式处理
    const ob = this.__ob__;
    let inserted;
    switch (method) {
    // push、unshift会新增索引，所以要手动observer
      case "push":
      case "unshift":
        inserted = args;
        break;
      // splice方法，如果传入了第三个参数，也会有索引加入，也要手动observer。
      case "splice":
        inserted = args.slice(2);
        break;
    }
    // 
    if (inserted) ob.observeArray(inserted);// 获取插入的值，并设置响应式监听
    // notify change
    ob.dep.notify();// 通知依赖更新
    // 返回原生数组方法的执行结果
    return result;
  });
});

简单来说就是，重写了数组中的那些原生方法，首先获取到这个数组的__ob__，也就是它的Observer对象，如果有新的值，就调用observeArray继续对新的值观察变化（也就是通过target__proto__ == arrayMethods来改变了数组实例的型），然后手动调用notify，通知渲染watcher，执行update。

21.Vue 单页应用与多页应用的区别？

概念：

SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。
MPA多页面应用（MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。
区别：

21.Vue template 到 render 的过程

vue的模版编译过程主要如下：template -> ast -> render函数
vue 在模版编译版本的码中会执行 compileToFunctions 将template转化为render函数：

// 将模板编译为render函数
const { render, staticRenderFns } = compileToFunctions(template,options//省略}, this)

CompileToFunctions中的主要逻辑如下∶
（1）调用parse方法将template转化为ast（抽象语法树）

constast = parse(template.trim(), options)

parse的目标：把tamplate转换为AST树，它是一种用 JavaScript对象的形式来描述整个模板。
解析过程：利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造AST树的目的。

AST元素节点总共三种类型：type为1表示普通元素、2为表达式、3为纯文本。
（2）对静态节点做优化

optimize(ast,options)

这个过程主要分析出哪些是静态节点，给其打一个标记，为后续更新渲染可以直接跳过静态节点做优化

深度遍历AST，查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点，他们生成的DOM永远不会改变，这对运行时模板更新起到了极大的优化作用。 （3）生成代码

const code = generate(ast, options)

generate将ast抽象语法树编译成 render字符串并将静态部分放到 staticRenderFns 中，最后通过 new Function(`` render``) 生成render函数。

22.Vue data中某一个属性的值发生改变后，视图会立即同步执行渲染么？

不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环tick中，Vue 刷新队列并执行实际（已去重的）工作。

23.简述 mixin、extends 的覆盖逻辑

（1）mixin 和 extends mixin 和 extends均是用于合并、拓展组件的，两者均通过 mergeOptions 方法实现合并。

mixins 接收一个混入对象的数组，其中混入对象可以像正常的实例对象一样包含实例选项，这些选项会被合并到最终的选项中。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。
extends 主要是为了便于扩展单文件组件，接收一个对象或构造函数。

（2）mergeOptions 的执行过程

规范化选项（normalizeProps、normalizelnject、normalizeDirectives)； 2 对未合并的选项，进行判断；

if(!child._base) {    
if(child.extends) {        
parent = mergeOptions(parent, child.extends, vm)    
}    
if(child.mixins) {        
for(let i = 0, l = child.mixins.length; i < l; i++){            
parent = mergeOptions(parent, child.mixins[i], vm)        
}    
}
}

合并处理。根据一个通用 Vue 实例所包含的选项进行分类逐一判断合并，如 props、data、 methods、watch、computed、生命周期等，将合并结果存储在新定义的 options 对象里。
返回合并结果 options。

24.描述下Vue自定义指令

全局定义：Vue.directive("focus",{})
局部定义：directives:{focus:{}}
钩子函数：指令定义对象提供钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inSerted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。

update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前调用。指令的值可能发生了改变，也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。

ComponentUpdate：指令所在组件的 VNode及其子VNode全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数
el：绑定元素

bing：指令核心对象，描述指令全部信息属性

name

value

oldValue

expression

arg

modifers

vnode 虚拟节点

oldVnode：上一个虚拟节点（更新钩子函数中才有用）

（2）使用场景

普通DOM元素进行底层操作的时候，可以使用自定义指令
自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。

（3）使用案例

初级应用：

鼠标聚焦
下拉菜单
相对时间转换
滚动动画

高级应用：

自定义指令实现图片懒加载
自定义指令集成第三方插件

25.子组件可以直接改变父组件的数据吗？

子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。如果这样做了，Vue 会在浏览器的控制台中发出警告。

Vue提倡单向数据流，即父级 props 的更新会流向子组件，但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解，导致数据流混乱。如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高。 只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

26.Vue是如何收集依赖的？

在初始化 Vue 的每个组件时，会对组件的 data 进行初始化，就会将由普通对象变成响应式对象，在这个过程中便会进行依赖收集的相关逻辑，如下所示：

function defieneReactive (obj, key, val){
  const dep = new Dep();
  ...
  Object.defineProperty(obj, key, {
    ...
    get: function reactiveGetter () {
      if(Dep.target){
        dep.depend();
        ...
      }
      return val
    }
    ...
  })
}

以上只保留了关键代码，主要就是 const dep = new Dep()实例化一个 Dep 的实例，然后在 get 函数中通过 dep.depend() 进行依赖收集。 （1）Dep Dep是整个依赖收集的核心，其关键代码如下：

class Dep {
  static target;
  subs;

  constructor () {
    ...
    this.subs = [];
  }
  addSub (sub) {
    this.subs.push(sub)
  }
  removeSub (sub) {
    remove(this.sub, sub)
  }
  depend () {
    if(Dep.target){
      Dep.target.addDep(this)
    }
  }
  notify () {
    const subs = this.subds.slice();
    for(let i = 0;i < subs.length; i++){
      subs[i].update()
    }
  }
}

Dep 是一个 class ，其中有一个关键的静态属性 static，它指向了一个全局唯一 Watcher，保证了同一时间全局只有一个 watcher 被计算，另一个属性 subs 则是一个 Watcher 的数组，所以 Dep 实际上就是对 Watcher 的管理，再看看 Watcher 的相关代码：
Watcher

class Watcher {
  getter;
  ...
  constructor (vm, expression){
    ...
    this.getter = expression;
    this.get();
  }
  get () {
    pushTarget(this);
    value = this.getter.call(vm, vm)
    ...
    return value
  }
  addDep (dep){
        ...
    dep.addSub(this)
  }
  ...
}
function pushTarget (_target) {
  Dep.target = _target
}

Watcher 是一个 class，它定义了一些方法，其中和依赖收集相关的主要有 get、addDep 等。
过程在实例化 Vue 时，依赖收集的相关过程如下∶ 初始化状态 initState ，这中间便会通过 defineReactive 将数据变成响应式对象，其中的 getter 部分便是用来依赖收集的。初始化最终会走 mount 过程，其中会实例化 Watcher ，进入 Watcher 中，便会执行 this.get() 方法。

updateComponent = () => {
  vm._update(vm._render())
}
new Watcher(vm, updateComponent)

get 方法中的 pushTarget 实际上就是把 Dep.target 赋值为当前的 watcher。

this.getter.call（vm，vm），这里的 getter 会执行 vm._render() 方法，在这个过程中便会触发数据对象的 getter。那么每个对象值的 getter 都持有一个 dep，在触发 getter 的时候会调用 dep.depend() 方法，也就会执行 Dep.target.addDep(this)。刚才 Dep.target 已经被赋值为 watcher，于是便会执行 addDep 方法，然后走到 dep.addSub() 方法，便将当前的 watcher 订阅到这个数据持有的 dep 的 subs 中，这个目的是为后续数据变化时候能通知到哪些 subs 做准备。所以在 vm._render() 过程中，会触发所有数据的 getter，这样便已经完成了一个依赖收集的过程。

27.对 React 和 Vue 的理解，它们的异同

相似之处

都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库；
都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板；
都使用了Virtual DOM（虚拟DOM）提高重绘性能；
都有props的概念，允许组件间的数据传递；
都鼓励组件化应用，将应用分拆成一个个功能明确的模块，提高复用性。

不同之处

数据流Vue默认支持数据双向绑定，而React一直提倡单向数据流;
虚拟DOMVue2.x开始引入"Virtual DOM"，消除了和React在这方面的差异，但是在具体的细节还是有各自的特点:
- Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树
- 对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过 PureComponent/shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化。
组件化React与Vue最大的不同是模板的编写。
- Vue鼓励写近似常规HTML的模板。写起来很接近标准 HTML元素，只是多了一些属性。
- React推荐你所有的模板通用JavaScript的语法扩展——JSX书写。具体来讲：React中render函数是支持闭包特性的，所以import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以 import 一个组件完了之后，还需要在 components 中再声明下。
监听数据变化的实现原理不同
- Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
- React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的vDOM的重新渲染。这是因为 Vue 使用的是可变数据，而React更强调数据的不可变。
高阶组件react可以通过高阶组件（HOC）来扩展，而Vue需要通过mixins来扩展。高阶组件就是高阶函数，而React的组件本身就是纯粹的函数，所以高阶函数对React来说易如反掌。相反Vue.js使用HTML模板创建视图组件，这时模板无法有效的编译，因此Vue不能采用HOC来实现。
构建工具两者都有自己的构建工具：
- React ==> Create React APP
- Vue ==> vue-cli
跨平台
- React ==> React Native
- Vue ==> Weex

28.Vue的优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；
双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性能而言， vue 存在很大的优势。

29.assets和static的区别

相同点： assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点

不相同点： assets 中存放的静态资源文件在项目打包时，也就是运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在 static 文件中跟着 index.html 一同上传至服务器。static 中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议： 将项目中 template需要的样式文件js文件等都可以放置在 assets 中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css 等文件可以放置在 static 中，因为这些引入的第三方文件已经经过处理，不再需要处理，直接上传。

30. delete和Vue.delete删除数组的区别

delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组改变了数组的键值。

31.vue如何监听对象或者数组某个属性的变化

当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，这个时候，你会发现页面并没有更新。这是因为Object.defineProperty()限制，监听不到变化。解决办法：

this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改变数组this.$set(this.obj, "c", "OBKoro1"); // 改变对象

2.调用以下几个数组的方法：

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

vue源码里缓存了array的原型链，然后重写了这几个方法，触发这几个方法的时候会observer数据，意思是使用这些方法不用再进行额外的操作，视图自动进行更新。推荐使用splice方法会比较好自定义,因为splice可以在数组的任何位置进行删除/添加操作。
vm.$set 的实现原理是：

如果目标是数组，直接使用数组的 splice 方法触发相应式；
如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

32.什么是 mixin?

Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。
如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、方法等，则可以将其编写为 mixin，并在组件中简单的引用它。
然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自己的 hook。

33.Vue模版编译原理

vue-js.com/learn-vue/c…
vue中的模板template无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的HTML语法，所有需要将template转化成一个JavaScript函数，这样浏览器就可以执行这一个函数并渲染出对应的HTML元素，就可以让视图跑起来了，这一个转化的过程，就成为模板编译。模板编译又分三个阶段，解析parse，优化optimize，生成generate，最终生成可执行函数render。

解析阶段：使用大量的正则表达式对template字符串进行解析，将标签、指令、属性等转化为抽象语法树AST。
优化阶段：遍历AST，找到其中的一些静态节点并进行标记，方便在页面重渲染的时候进行diff比较时，直接跳过这一些静态节点，优化runtime的性能。
生成阶段：将最终的AST转化为render函数字符串。

34.对SSR的理解

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
SSR的优势：

更好的SEO
首屏加载速度更快

SSR的缺点：

开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子；
当需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境；
更多的服务端负载。

35.Vue的性能优化有哪些？

（1）编码阶段

尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if和v-for不能连用
如果需要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件
在更多的情况下，使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载

（2）SEO优化

预渲染
服务端渲染SSR

（3）打包优化

压缩代码
Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化

（4）用户体验

骨架屏
PWA
还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

36.对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

37.template和jsx的有什么分别？

对于 runtime 来说，只需要保证组件存在 render 函数即可，而有了预编译之后，只需要保证构建过程中生成 render 函数就可以。在 webpack 中，使用vue-loader编译.vue文件，内部依赖的vue-template-compiler模块，在 webpack 构建过程中，将template预编译成 render 函数。与 react 类似，在添加了jsx的语法糖解析器babel-plugin-transform-vue-jsx之后，就可以直接手写render函数。

所以，template和jsx的都是render的一种表现形式，不同的是：JSX相对于template而言，具有更高的灵活性，在复杂的组件中，更具有优势，而 template 虽然显得有些呆滞。但是 template 在代码结构上更符合视图与逻辑分离的习惯，更简单、更直观、更好维护。

38.如何解决vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是还是有必要让解决这个问题的。首先在css里加上以下代码：

[v-cloak] {    display: none;}

如果没有彻底解决问题，则在根元素加上:

style="display: none;" :style="{display: 'block'}"

39.extend 有什么作用?

作用是扩展组件生成一个构造器，通常会与 $mount 一起使用:

// 创建组件构造器let 
Component = Vue.extend({  template: '<div>test</div>'})
// 挂载到 #app 上
new Component().$mount('#app')
// 除了上面的方式，还可以用来扩展已有的组件
let SuperComponent = Vue.extend(Component)new SuperComponent({    
    created() {        
    console.log(1)    
}})
new SuperComponent().$mount('#app')

40.MVVM的优缺点?

优点:

分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑
提⾼可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码
⾃动更新dom: 利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动dom中解放

缺点:

Bug很难被调试: 因为使⽤双向绑定的模式，当你看到界⾯异常了，有可能是你View的代码有Bug，也可能是Model的代码有问题。数据绑定使得⼀个位置的Bug被快速传递到别的位置，要定位原始出问题的地⽅就变得不那么容易了。另外，数据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的
⼀个⼤的模块中model也会很⼤，虽然使⽤⽅便了也很容易保证了数据的⼀致性，当时⻓期持有，不释放内存就造成了花费更多的内存
对于⼤型的图形应⽤程序，视图状态较多，ViewModel的构建和维护的成本都会⽐较⾼。

41.说一下Vue的生命周期

vue-js.com/learn-vue/l…
Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程，称这是Vue的⽣命周期。

create阶段：vue实例被创建
beforeCreate（创建前） ：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。
created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性。
mount阶段： vue实例被挂载到真实DOM节点
beforeMount（挂载前） ：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
mounted（挂载后） ：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。
update阶段：当vue实例里面的data数据变化时，触发组件的重新渲染
beforeUpdate（更新前） ：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。
updated（更新后） ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
destroy阶段：vue实例被销毁
beforeDestroy（销毁前） ：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例。
destroyed（销毁后） ：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数。

说一下vue组件的生命周期

生命周期（父子组件）父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件 mounted --> 父组件mounted -->父组件beforeUpdate -->子组件beforeDestroy--> 子组件destroyed --> 父组件updated

加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

挂载阶段 父created->子created->子mounted->父mounted

父组件更新阶段 父beforeUpdate->父updated

子组件更新阶段 父beforeUpdate->子beforeUpdate->子updated->父updated

销毁阶段 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

42.Vue 子组件和父组件执行顺序

加载渲染过程：

父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted
父组件 mounted

更新过程：

父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated

销毁过程：

父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destoryed

43.created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

44.一般在哪个生命周期请求异步数据？

我们可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。

推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

能更快获取到服务端数据，减少页面加载时间，用户体验更好；
SSR不支持 beforeMount 、mounted 钩子函数，放在 created 中有助于一致性。

45.keep-alive 中的生命周期哪些？

keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、activated。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。

当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期；当组件被切回来时，再去缓存里找这个组件、触发 activated钩子函数。

46.组件通信的方式

详细版本：vue 组件通信看这篇就够了

props / $emit

父组件通过props向子组件传递数据，子组件通过$emit和父组件通信

1. 父组件向子组件传值

props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。
props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。
props属性名规则：若在props中使用驼峰形式，模板中需要使用短横线的形式。

// 父组件
<template>
    <div id="father">
        <son :msg="msgData" :fn="myFunction"></son>
    </div>
</template>

<script>
import son from "./son.vue";
export default {
    name: father,
    data() {
        msgData: "父组件数据";
    },
    methods: {
        myFunction() {
            console.log("vue");
        }
    },
    components: {
        son
    }
};
</script>

// 子组件
<template>
    <div id="son">
        <p>{{msg}}</p>
        <button @click="fn">按钮</button>
    </div>
</template>
<script>
export default {
    name: "son",
    props: ["msg", "fn"]
};
</script>

2. 子组件向父组件传值

$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。

// 父组件
<template>
  <div class="section">
    <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
    <p>{{currentIndex}}</p>
  </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
  name: 'comArticle',
  components: { comArticle },
  data() {
    return {
      currentIndex: -1,
      articleList: ['红楼梦', '西游记', '三国演义']
    }
  },
  methods: {
    onEmitIndex(idx) {
      this.currentIndex = idx
    }
  }
}
</script>

//子组件
<template>
  <div>
    <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
  </div>
</template>

<script>
export default {
  props: ['articles'],
  methods: {
    emitIndex(index) {
      this.$emit('onEmitIndex', index) // 触发父组件的方法，并传递参数index
    }
  }
}
</script>

eventBus事件总线（`$emit / $on`）

eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下：

1.创建事件中心管理组件之间的通信

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

2.发送事件

假设有两个兄弟组件firstCom和secondCom：

<template>
  <div>
    <first-com></first-com>
    <second-com></second-com>
  </div>
</template>

<script>
import firstCom from './firstCom.vue'
import secondCom from './secondCom.vue'
export default {
  components: { firstCom, secondCom }
}
</script>

在firstCom组件中发送事件：

<template>
  <div>
    <button @click="add">加法</button>    
  </div>
</template>

<script>
import {EventBus} from './event-bus.js' // 引入事件中心

export default {
  data(){
    return{
      num:0
    }
  },
  methods:{
    add(){
      EventBus.$emit('addition', {
        num:this.num++
      })
    }
  }
}
</script>

3.接收事件

在secondCom组件中发送事件：

<template>
  <div>求和: {{count}}</div>
</template>

<script>
import { EventBus } from './event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num;
    })
  }
}
</script>

在上述代码中，这就相当于将num值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。

虽然看起来比较简单，但是这种方法也有不便之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。

依赖注入（provide / inject）

这种方式就是Vue中的依赖注入，该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方法来进行传值。就不用一层一层的传递了。

provide / inject是Vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。

provide 钩子用来发送数据或方法
inject钩子用来接收数据或方法

在父组件中：

provide() { 
    return {     
        num: this.num  
    };
}

在子组件中：

inject: ['num']

还可以这样写，这样写就可以访问父组件中的所有属性：

provide() {
 return {
    app: this
  };
}
data() {
 return {
    num: 1
  };
}

inject: ['app']
console.log(this.app.num)

注意：依赖注入所提供的属性是非响应式的

`ref / $refs`

这种方式也是实现父子组件之间的通信。

ref：这个属性用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。

在子组件中：

export default {
  data () {
    return {
      name: 'JavaScript'
    }
  },
  methods: {
    sayHello () {
      console.log('hello')
    }
  }
}

在父组件中：

<template>
  <child ref="child"></component-a>
</template>
<script>
  import child from './child.vue'
  export default {
    components: { child },
    mounted () {
      console.log(this.$refs.child.name);  // JavaScript
      this.$refs.child.sayHello();  // hello
    }
  }
</script>

`$parent / $children`

使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）
使用$children可以让组件访问子组件的实例，但是，$children并不能保证顺序，并且访问的数据也不是响应式的。

在子组件中：

<template>
  <div>
    <span>{{message}}</span>
    <p>获取父组件的值为:  {{parentVal}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue'
    }
  },
  computed:{
    parentVal(){
      return this.$parent.msg;
    }
  }
}
</script>

在父组件中：

// 父组件中
<template>
  <div class="hello_world">
    <div>{{msg}}</div>
    <child></child>
    <button @click="change">点击改变子组件值</button>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  components: { child },
  data() {
    return {
      msg: 'Welcome'
    }
  },
  methods: {
    change() {
      // 获取到子组件
      this.$children[0].message = 'JavaScript'
    }
  }
}
</script>

上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。

需要注意：

通过$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例
在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
在根组件#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组
$children 的值是数组，而$parent是个对象

`$attrs / $listeners`

考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要组件A给组件C传递数据，这种隔代的数据，该使用哪种方式呢？

如果是用props/$emit来一级一级的传递，确实可以完成，但是比较复杂；如果使用事件总线，在多人开发或者项目较大的时候，维护起来很麻烦；如果使用Vuex，的确也可以，但是如果仅仅是传递数据，那可能就有点浪费了。

针对上述情况，Vue引入了$attrs / $listeners，实现组件之间的跨代通信。

先来看一下inheritAttrs，它的默认值true，继承所有的父组件属性除props之外的所有属性；inheritAttrs：false 只继承class属性。

$attrs：继承所有的父组件属性（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上
$listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

A组件（APP.vue）：

<template>
    <div id="app">
        //此处监听了两个事件，可以在B组件或者C组件中直接触发 
        <child1 :p-child1="child1" :p-child2="child2" @test1="onTest1" @test2="onTest2"></child1>
    </div>
</template>
<script>
import Child1 from './Child1.vue';
export default {
    components: { Child1 },
    methods: {
        onTest1() {
            console.log('test1 running');
        },
        onTest2() {
            console.log('test2 running');
        }
    }
};
</script>

B组件（Child1.vue）：

<template>
    <div class="child-1">
        <p>props: {{pChild1}}</p>
        <p>$attrs: {{$attrs}}</p>
        <child2 v-bind="$attrs" v-on="$listeners"></child2>
    </div>
</template>
<script>
import Child2 from './Child2.vue';
export default {
    props: ['pChild1'],
    components: { Child2 },
    inheritAttrs: false,
    mounted() {
        this.$emit('test1'); // 触发APP.vue中的test1方法
    }
};
</script>

C 组件 (Child2.vue)：

<template>
    <div class="child-2">
        <p>props: {{pChild2}}</p>
        <p>$attrs: {{$attrs}}</p>
    </div>
</template>
<script>
export default {
    props: ['pChild2'],
    inheritAttrs: false,
    mounted() {
        this.$emit('test2');// 触发APP.vue中的test2方法
    }
};
</script>

在上述代码中：

C组件中能直接触发test的原因在于 B组件调用C组件时使用 v-on 绑定了$listeners 属性
在B组件中通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）

总结

（1）父子组件间通信

子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。
使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。

（2）兄弟组件间通信

使用 eventBus 的方法，它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。
通过 $parent/$refs 来获取到兄弟组件，也可以进行通信。

（3）任意组件之间

使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。

47.Vue底层实现原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调
Vue是一个典型的MVVM框架，模型（Model）只是普通的javascript对象，修改它则试图（View）会自动更新。这种设计让状态管理变得非常简单而直观

Observer（数据监听器） : Observer的核心是通过Object.defineProprtty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者，订阅者就是Watcher

Watcher（订阅者） : Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：

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

Compile（指令解析器） : Compile主要做的事情是解析模板指令，将模板中变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新视图。

47.为什么v-for和v-if不建议用在一起?

当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费（Vue2.x）
这种场景建议使用 computed，先对数据进行过滤。

注意：3.x 版本中 v-if 总是优先于 v-for 生效。由于语法上存在歧义，建议避免在同一元素上同时使用两者。比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。

48.React/Vue 项目中 key 的作用

key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度，更高效的更新虚拟DOM;
vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。
为了在数据变化时强制更新组件，以避免“就地复用”带来的副作用。
当 Vue.js 用 v-for 更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。重复的key会造成渲染错误。

49.子组件为什么不可以修改父组件传递的Prop？

Vue提倡单向数据流,即父级 props 的更新会流向子组件,但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解。如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高。

50.Vuex和单纯的全局对象有什么区别？

Vuex和全局对象主要有两大区别：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新；
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

51.为什么 Vuex 的 mutation 中不能做异步操作？

Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。参考尤大大回答： www.zhihu.com/question/48…

52.Vue 的父组件和子组件生命周期钩子执行顺序是什么？

渲染过程：
父组件挂载完成一定是等子组件都挂载完成后，才算是父组件挂载完，所以父组件的mounted在子组件mouted之后
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

子组件更新过程：

影响到父组件：父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
不影响父组件：子beforeUpdate -> 子updated

父组件更新过程：

影响到子组件：父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
不影响子组件：父beforeUpdate -> 父updated

销毁过程：
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

53.v-show 和 v-if 有哪些区别？

v-if 会在切换过程中对条件块的事件监听器和子组件进行销毁和重建，如果初始条件是false，则什么都不做，直到条件第一次为true时才开始渲染模块。
v-show 只是基于css进行切换，不管初始条件是什么，都会渲染。
所以，v-if 切换的开销更大，而 v-show 初始化渲染开销更大，在需要频繁切换，或者切换的部分dom很复杂时，使用 v-show 更合适。渲染后很少切换的则使用 v-if 更合适。

54.computed vs methods

计算属性是基于他们的响应式依赖进行缓存的，只有在依赖发生变化时，才会计算求值，而使用 methods，每次都会执行相应的方法。

55.Vue中v-html会导致什么问题？

在网站上动态渲染任意 HTML，很容易导致 XSS 攻击。所以只能在可信内容上使用 v-html，且永远不能用于用户提交的内容上。

56.Vue的响应式原理

Vue 的响应式是通过 Object.defineProperty 对数据进行劫持，并结合观察者模式实现。 Vue 利用 Object.defineProperty 创建一个 observe 来劫持监听所有的属性，把这些属性全部转为 getter 和 setter。Vue 中每个组件实例都会对应一个 watcher 实例，它会在组件渲染的过程中把使用过的数据属性通过 getter 收集为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

57.Object.defineProperty有哪些缺点？/为什么vue3.0使用proxy实现响应式？

详细版本：mp.weixin.qq.com/s/O8iL4o8oP…

其实是对Object.defineProperty 和 proxy实现响应式的对比。

Object.defineProperty 只能劫持对象的属性，而 Proxy 是直接代理对象
由于 Object.defineProperty 只能对属性进行劫持，需要遍历对象的每个属性。而 Proxy 可以直接代理对象。
Object.defineProperty 对新增属性需要手动进行 Observe，由于 Object.defineProperty 劫持的是对象的属性，所以新增属性时，需要重新遍历对象，对其新增属性再使用 Object.defineProperty 进行劫持。也正是因为这个原因，使用 Vue 给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。
Proxy 支持13种拦截操作，这是 defineProperty 所不具有的。
新标准性能红利
Proxy 作为新标准，长远来看，JS引擎会继续优化 Proxy ，但 getter 和 setter 基本不会再有针对性优化。
Proxy 兼容性差目前并没有一个完整支持 Proxy 所有拦截方法的Polyfill方案

更详细的对比，可以查看我的文章为什么Vue3.0不再使用defineProperty实现数据监听？

58.讲一下Vue的diff原理

my.oschina.net/u/3060934/b…

59.v-for 中 key 的作用是什么？

key 是给每个 vnode 指定的唯一 id，在同级的 vnode diff 过程中，可以根据 key 快速的对比，来判断是否为相同节点，并且利用 key 的唯一性可以生成 map 来更快的获取相应的节点。
另外指定 key 后，就不再采用“就地复用”策略了，可以保证渲染的准确性。

60.Vue-router导航守卫有哪些？

全局前置/钩子：beforeEach、beforeResolve、afterEach

路由独享的守卫：beforeEnter

组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

完整的导航解析流程如下：

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

61.vue-router hash模式和history模式有什么区别？

url展示上，hash模式有“#”，history模式没有
刷新页面是，hash模式可以正常加载到hash值对应的页面，而history没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由
兼容性。hash模式可以支持低版本浏览器和IE。

62.vue-router hash 模式和 history 模式是如何实现的？

hash 模式：
#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面。同时通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。

history 模式：
history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作。

前端路由简介以及vue-router实现原理

juejin.cn/post/684490…

63.vue常用的修饰符？

.stop等同于JavaScript中的event.stopPropagation()，防止事件冒泡；

.prevent等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；

.capture与事件冒泡的方向相反，事件捕获由外到内；

.self只会触发自己范围内的事件，不包含子元素；

.once只会触发一次

64.如何让CSS只在当前组件中起作用？

在组件中的style前面加上scoped

65.如何获取dom？

ref="domName" 用法：this.$refs.domName

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

zhuanlan.zhihu.com/p/380815009

67.请说出vue.cli项目中src目录每个文件夹和文件的用法？（最好拿截图去问，很多外包同学英语不好，主要考察点是了解不了解常见业务约定）

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

67.v-on可以监听多个方法吗？

可以，例子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

68.最小化的 MVVM 的实现

juejin.cn/post/684490…

69.MVVM原理

juejin.cn/post/684490…

70.基于Vue实现一个简易MVVM

juejin.cn/post/684490…

71.实现双向绑定Proxy比defineproperty优劣如何？

juejin.cn/post/684490…

72.使用原生JS构建状态管理系统

juejin.cn/post/684490…

73.讲一下对虚拟DOM原理的理解

mp.weixin.qq.com/s/oAlVmZ4Hb…

74.讲一下Vue的diff算法

juejin.cn/post/684490…

75.Vue 解决了什么问题？()

虚拟DOMdom 操作时非常耗性能的，不再使用原生的 dom 操作节点，极大的解放 dom 操作，但具体操作的还是 dom，不过是换了一种方式； 2.视图、数据、结构分离使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 3.组件化把一个单页应用中的各种模块拆分到一个一个单独的组件中，便于开发，以及后期的维护

76.讲一下Vue的特点

简洁:页面由HTML模板+Json数据+Vue实例组成
数据驱动:自动计算属性和追踪依赖的模板表达式
组件化:用可复用、解耦的组件来构造页面
轻量:代码量小，不依赖其他库
快速:精确有效批量 DOM 更新
模板友好:可通过 npm，bower 等多种方式安装，很容易融入

77.为什么使用路由懒加载？原理是什么？

为什么
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。随着代码的增多，页面需要加载的文件的体积也会越来越大。文件中包含了所有的用户组件的js以及css代码，但用户可能根本不会浏览器到某些页面，也就是说根本不需要渲染某些组件，所以vue-router 提供了一种路由懒加载机制，就是当某个路由规则匹配时，才会去加载下载并加载某个组件，此时可以提升首页的渲染速度。

实现和原理
router.vuejs.org/zh/guide/ad…

78.说一下Vue的指令

(1)v-bind:给元素绑定属性
(2)v-on:给元素绑定事件
(3)v-html:给元素绑定数据，且该指令可以解析 html 标签 (4)v-text:给元素绑定数据，不解析标签
(5)v-model:数据双向绑定
(6)v-for:遍历数组
(7)v-if:条件渲染指令，动态在 DOM 内添加或删除 DOM 元素 (8)v-else:条件渲染指令，必须跟 v-if 成对使用 (9)v-else-if:判断多层条件，必须跟 v-if 成对使用
(10)v-cloak:解决插值闪烁问题
(11)v-once:只渲染元素或组件一次
(12)v-pre:跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度
(13)v-show:条件渲染指令，将不符合条件的数据隐藏(display:none)

79.Vue 怎么重置 data？

使用 Object.assign()，vm. $data 可以获取当前状态下的 data，vm.$ options.data 可以获取到组件初始化状态下的 data。

Object.assign(this.$data, this.$options.data())

80.组件中写 name 选项有什么作用？

项目使用 keep-alive 时，可搭配组件的 name 进行缓存过滤
DOM 做递归组件时需要调用自身 name
vue-devtools 调试工具里显示的组件名称是由 vue 中组件 name 决定的

81.vue-router 路由钩子函数是什么执行顺序是什么

路由钩子的执行流程, 钩子函数种类有:全局守卫、路由守卫、组件守卫完整的导航解析流程:

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的afterEach钩子。
触发DOM更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入

82.什么是Vuex？有哪些特点？并简述其运行机制

详解：blog.csdn.net/hannah2233/…
定义
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

特点
当你在 state 中定义了一个数据之后，可以在所在项目中的任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。

机制
Vuex主要包括以下几个模块:

State:定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Mutation:是唯一更改 store 中状态的方法，且必须是同步函数。
Action:用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中

Vuex 提供数据(state)来驱动试图(vue components)，通过 dispath 派发 actions，在其中可以做一些异步的操作，然后通过 commit 来提交 mutations，最后 mutations 来更改 state.

83.Vuex页面刷新数据丢失怎么解决？

丢失原因

vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失
因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值

解决办法

直接在Vuex修改数据方法中将数据存储到浏览器缓存中（sessionStorage、localStorage、cookie），页面加载时从缓存中取出赋值给Vuex；
利用第三方库进行持久化存储；

83.Vuex为什么要分模块并添加命名空间

分模块
由于使用单一状态树。应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时，store对象就有可能变得相当臃肿。为了解决以上问题，vuex允许我们将store分割成模块（model）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块。

命名空间
默认情况下，模块内部的action、mutition和getter是注册在全局命名空间的——这样使得多个模块能够对同一mutation或action作出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加namespaced：true的方式使其成为带命名空间的模块。当模块被注册后，他的所有getter、action及mutation都会自动根据模块注册的路径调整命名。

84.Vue中使用了哪些设计模式？并简单举例

工厂模式虚拟 DOM 根据参数的不同返回基础标签的vnode 和组件vnode;
单例模式vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回
发布-订阅模式vue 事件机制
观察者模式 响应式数据原理
装饰模式@装饰器的使用
策略模式策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案,比如vue选项的合并策略

85.简述vue从初始化页面–>修改数据–>刷新页面 UI 过程

当 Vue 进入初始化阶段时，一方面 Vue 会遍历 data 中的属性，并用 Object.defineProperty 将它转化成 getter/setterd 的形式，实现数据劫持;另一方面，Vue 的指令编译器 Compiler 对元素节点的各个指令进行解析，初始化视图，并订阅 Watcher 来更新视图，此时 Watcher 会将自己添加到消息订阅器Dep 中，此时初始化完毕。
当数据发生变化时，触发 Observer 中 setter 方法，立即调用 Dep.notify()，Dep 这个数组开始遍历所有的订阅者，并调用其 update 方法，Vue 内部再通过 diff 算法，patch 相应的更新完成对订阅者视图的改变。

86.scoped的原理及穿透方法

何为scoped
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

scoped实现原理 vue 中的 scoped 通过在 DOM 结构以及 css 样式上加唯一不重复的标记:data-v-hash 的方式，以保证唯一(通过 PostCSS 转译)，达到样式私有模块化的目的。

为什么需要穿透scoped
引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。
举例比如你使用element-ui的样式，在demo.vue中使用table组件，并且style上加scoped，在修改table组件里边的样式是不生效的，因为data-v-009只加在子组件的第一层，子组件中其他dom是没有data-v-009这个属性的，而你写在scoped中的样式都会被postcss 添加[data-v-009],样式只作用于有data-v-009这个属性的dom
无论你权值多高，甚至添加!important，都无法修改子组件中样式。

穿透方法

如果项目使用的是CSS样式，可以直接使用>>>穿透修改
项目中如果用到了预处理器scss、sass、less操作符，那>>>可能会报错，可以使用/deep/
使用::v-deep

87.Vue.extend 作用和原理

Vue.extend 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。其实就是一个子类构造器是 Vue 组件的核心 api 实现思路就是使用原型继承的方法返回了 Vue 的子类，并且利用 mergeOptions 把传入组件的 options 和父类的 options 进行了合并。

88.写过自定义指令吗？原理是什么？

在生成 ast 语法树时，遇到指令会给当前元素添加 directives 属性；
通过 genDirectives 生成指令代码；
在 patch 前将指令的钩子提取到 cbs 中,在 patch 过程中调用对应的钩子；
当执行指令对应钩子函数时，调用对应指令定义的方法

89.函数式组件与普通组件区别

函数式组件需要在声明组件是指定 functional:true
不需要实例化，所以没有 this,this 通过 render 函数的第二个参数 context 来代替
没有生命周期钩子函数，不能使用计算属性和watch
不能通过$emit 对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
因为函数式组件是没有实例化的，所以在外部通过 ref 去引用组件时，实际引用的是 HTMLElement
函数式组件的 props 可以不用显示声明，所以没有在 props 里面声明的属性都会被自动隐式解析为 prop,而普通组件所有未声明的属性都解析到$attrs 里面，并自动挂载到组件根元素上面(可以通过 inheritAttrs 属性禁止)

90.如果子组件改变 props 里的数据会发生什么？

改变的props数据是基本类型，会报错
改变的props 数据是引用类型：

props: {
    item: {
      default: () => ({}),
    }
} created() {

// 不报错，并且父级数据会跟着变 
this.item.name = 'sanxin';
// 会报错，跟基础类型报错一样
this.item = 'sss'
  }

91.props怎么自定义验证？

props: {
    num: {
default: 1,  
validator: function (value) {
// 返回值为 false 则验证不通过，报错
return [1,2,3,4,5].indexOf(value) !== -1
}
}
}

92.watch 的 immediate 属性有什么用？

使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

93.watch 监听一个对象时，如何排除某些属性的监听？

data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

但是如果我只想要a，b改变时重新请求，c，d改变时不重新请求呢？

mounted() {
    Object.keys(this.params)
      .filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听
      .forEach((_) => {
        this.$watch((vm) => vm.params[_], handler, {
          deep: true,
        });
      });
  },
data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

94.实现简单的双向数据绑定

blog.csdn.net/SH744/artic…

95.依赖收集追踪原理

(实际就是响应式原理内容，此处依赖就是指发布者订阅者的关系) blog.csdn.net/sumisu666/a…

96.实现vue的lazyImage组件

blog.csdn.net/weixin_4232…

97.computed是如何实现的

www.cnblogs.com/xujiazheng/…

98.vue3在编译阶段做了哪些优化？

zhuanlan.zhihu.com/p/150732926

99.实现一个Vuex

www.nhooo.com/note/qa38cd…

100.Vite为什么快？

blog.csdn.net/weixin_4476…

101.React和Vue数据流向有何不同？

vue是响应式设计，并且实现了双向绑定，而react是单向数据流，没有双向绑定。

102.Vue3比Vue2有什么优势？

juejin.cn/post/704173…

103.说一下Vue3中使用proxy实现响应式的原理

详解：zhuanlan.zhihu.com/p/380063252

104.created和mounted时期请求API的区别是什么？

在created时期请求接口拿到页面数据，DOM 还没有渲染，最后数据和DOM会同步渲染在页面中；
在mounted时期请求接口拿到页面数据，DOM 已经渲染# created和mounted时期请求API的区别到页面中，拿到数据后再渲染数据，即重新触发一次渲染。

105.SPA首屏加载速度慢怎么解决？

减小入口文件体积
静态资源本地缓存
第三方插件按需加载或者使用CDN引用
图片资源压缩
抽离公共组件避免重复打包
开启GZip压缩
使用SSR

106.vue中组件和插件的区别是什么？

注册不同
组件注册通过“Vue.component”或“components”属性插件通过“Vue.use()”；

用途不同
组件是用来构成App的业务模块，它的目标是“App.vue”，而插件是用来增强技术栈的功能模块，它的目标是Vue本身。

编写不同
编写一个组件，最常见的就是vue单文件的这种格式，每一个.vue文件都可以看成是一个组件，还可以通过template属性来编写一个组件。
vue插件的实现应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

107.动态给Vue的data添加一个新的属性会有什么问题？为什么？如何解决？

问题
vue2不会触发视图更新,vue3会触发视图更新

原因
vue2使用Object.defineProperty实现数据劫持从而实现响应式，Object.defineProperty依赖属性的的setter和getter，直接给data添加新属性，不能被vue2感知到。
vue3使用Proxy&Reflect实现数据劫持，对整个data对象实现了代理，给data新增属性也会被感知，从而触发响应式更新

解决
vue2中可以使用以下几种方式来替代直接赋值

Vue.set()
Object.assign()
$forcecUpdated()

108.Vue实例挂载的过程是什么？

详解：zhuanlan.zhihu.com/p/572182728…

确定挂载的DOM元素,这个DOM需要保证不能为html，body这类跟节点。
我们知道渲染有两种方式，一种是通过template模板字符串，另一种是手写render函数，前面提到template模板需要运行时进行编译，而后一个可以直接用render选项作为渲染函数。因此挂载阶段会有两条分支，template模板会先经过模板的解析，最终编译成render渲染函数参与实例挂载，而手写render函数可以绕过编译阶段，直接调用挂载的$mount方法。
针对template而言，它会利用Vue内部的编译器进行模板的编译，字符串模板会转换为抽象的语法树，即AST树，并最终转化为一个类似function(){with(){}}的渲染函数，这是我们后面讨论的重点。
无论是template模板还是手写render函数，最终都将进入mountComponent过程,这个阶段会实例化一个渲染watcher,具体watcher的内容，另外放章节讨论。我们先知道一个结论，渲染watcher的回调函数有两个执行时机，一个是在初始化时执行，另一个是当vm实例检测到数据发生变化时会再次执行回调函数。
回调函数是执行updateComponent的过程，这个方法有两个阶段，一个是vm._render,另一个是vm._update。 vm._render会执行前面生成的render渲染函数，并生成一个Virtual Dom tree,而vm._update会将这个Virtual Dom tree转化为真实的DOM节点。

109.Vue.observable你有了解过吗？说说看

www.jianshu.com/p/f0d501355…

110.vue什么时候触发更新dom操作？

Vue在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环 “tick" 中，Vue 刷新队列并执行实际（已去重的）更新dom工作。

111.vue transition的生命周期有哪些？

详解：www.jianshu.com/p/8b5e8b110…
transiton的生命周期如下：

 @before-enter="beforeEnter" //对应enter-from
 @enter="enter"//对应enter-active
 @after-enter="afterEnter"//对应enter-to
 @enter-cancelled="enterCancelled"//显示过渡打断
 @before-leave="beforeLeave"//对应leave-from
 @leave="leave"//对应enter-active
 @after-leave="afterLeave"//对应leave-to
 @leave-cancelled="leaveCancelled"//离开过渡打断

112.vuex和redux的区别有哪些？

监听听数据变化的实现原理不同
Vue通过Object.defineProperty的getter和setter监听数据变化
React是通过比较引用的方式进行的。
设计理念的区别：vue可变数据；react更强调数据的不可变。

数据流
vue：DOM与组件之间可以用v-model双向绑定
react：提倡单向数据流，onChange/setState模式

组合不同功能的方式
mixin和Hoc

组件通信
Vue:子组件通过props向子组件传递数据或者回调；通过事件的机制来处理子组件向父组件的通信； $parent 和$ children 等比较dirty的方式；provide/inject跨层级通讯 React:父组件通过props可以向子组件传递数据或者回调；context跨层级通讯，子组件使用回调函数向父组件传递消息

模板渲染
Vue：扩展的HTML语法；通过指令来实现v-if, v-for；
React：JSX，通过js来实现模板中的常见语法（插值，条件，循环）

113.怎么理解vue的单项数据流？

v2.cn.vuejs.org/v2/guide/co…
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

114.在什么阶段才能访问操作DOM？

blog.csdn.net/huang3513/a…
在 mounted 中可以访问操作 DOM。

vue-loader是什么？有什么作用？

vue-loader 是一个 webpack 的 loader，解析和转换.vue文件。提取出其中的逻辑代码 script, 样式代码style, 以及HTML 模板template，再分别把他们交给对应的loader去处理。

默认支持 ES2015；js可以写es6,style样式可以写scss或less、template可以加jade，对每个组件模拟出 CSS 作用域
把 <style> 和 <template> 中的静态资源当作模块来对待，并使用 webpack loader 进行处理

116.mixin和mixins的区别有哪些？

mixin用于全局注册一个混入，如果有公共的组件使用频率很高的话，可以使用mixin很方便的引入公共的部分;
mixins选项接受一个混入对象的数组，mixins在引入组件之后，则是将组件内部的内容如data属性，methods方法与父组件的内容相对应进行合并，可以对父组件的属性进行扩充，mixins混入的钩子函数会优先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并。

117.Vue2和Vue3的diff算法有什么区别？

segmentfault.com/a/119000004…

118.描述组件渲染和更新的过程

初次渲染
- 解析模板为render函数
- 触发响应式，监听data属性的getter、setter
- 执行render函数，生成vnode,patch(elem,vnode)
更新过程
- 修改data,触发setter
- 重新执行render函数，生成newVnode
- 调用patch(vnode,newVnode)函数
异步渲染
- 汇总data修改，一次性更新视图
- 减少dom操作次数，提高性能

119.为什么vuex的mutation中不能做异步操作？

Vuex中状态更新的途径是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

120.v-for给每项绑定事件时，需要使用事件代理么？

blog.csdn.net/web20220509…

121.谈一谈你对vue组件化的理解

www.jianshu.com/p/e7d4d3a8c…

122.Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

Options Api
包含一个描述组件选项（data、methods、props等）的对象options；
API开发复杂组件，同一个功能逻辑的代码被拆分到不同选项；
使用mixin重用公用代码，也有问题：命名冲突，数据来源不清晰；

composition Api
vue3 新增的一组 api，它是基于函数的 api，可以更灵活的组织组件的逻辑，解决options api在大型项目中，options api不好拆分和重用的问题。

123.说一下对vue3中新增的teleport的理解

blog.csdn.net/ZYS10000/ar…

124.Props初始化和更新流程

events.jianshu.io/p/356c600c1…

125.Vue 3.0 在编译方面有哪些优化？

新引入Fragments（片段）特性
Vue 3.x 模板中不需要再创建一个唯一的根节点，模板里可以直接放文本内容或者很多同级的标签, Vue2.x 需要唯一的节点；

静态提升
静态节点都会被提升到render 的外部，只有初始化时会被创建，再次调用render时不会再次创建，可以直接重用这些静态节点对应的vnode；

Patch flag
在Vue3.0中，在这个模版编译时，编译器会在动态标签末尾加上 /* Text*/ PatchFlag。只能带patchFlag 的 Node 才被认为是动态的元素，会被追踪属性的修改。并且 PatchFlag 会标识动态的属性类型有哪些。

cacheHandler 缓存事件处理函数减少了不必要的更新操作
编辑器会为你动态创建一个内联函数，内联函数里面再去饮用当前组件上最新的handler。之后编辑器会将内联函数缓存。每次重新渲染时如果事件处理器没有变，就会使用缓存中的事件处理而不会重新获取事件处理器。这个节点就可以被看作是一个静态的节点。这种优化更大的作用在于当其作用域组件时，之前每次重新渲染都会导致组件的重新渲染，在通过handler缓存之后，不会导致组件的重新渲染了

126.讲一下watch的实现原理

www.jianshu.com/p/af31b37d5…

127.Vue中有封装过axios么？主要是封装哪方面的？

有（一般回答有才有后续），封装的范式可以参照这篇文章：www.jianshu.com/p/eb325d709… 主要涉及方面有：

环境切换
通用请求头设置
请求拦截（统一的参数校验，登录验证等处理）
响应拦截（成功、失败结果处理，业务数据解析处理等）
get post方法封装

128.Vue开发过程中你是怎么做接口管理的？

网上的接口管理示例：www.bbsmax.com/A/A2dm3BnWJ…

129.说一下你的vue项目的目录结构，如果是大型项目你该怎么换分结构和划分组件？

按照实际项目说目录结构，或者参照示例：blog.csdn.net/wkp1992/art…

大型项目怎么换分结构和划分组件，参考示例：zhuanlan.zhihu.com/p/524683792

130.Vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

blog.csdn.net/web22050702…

131.Vue项目中你是如何解决跨域的呢？

www.jianshu.com/p/c3f92a904…

132.Vue在本地开发完成后部署到服务器后报404是什么原因呢？

刷新当前页面时候，所需要访问的资源在服务器上找不到，即在VueJs开发应用的过程中，设置路由的路径不是真实存在的路径，并且使用了history模式。
参考：
blog.csdn.net/weixin_4547…
www.jianshu.com/p/ea514aec2…
zhuanlan.zhihu.com/p/46949969

133.你是怎么处理vue项目中的错误的？

blog.csdn.net/weixin_4835…

134.Vue3有了解过么？能说说跟vue2的区别么？

juejin.cn/post/709793…

135.为什么虚拟dom会提高性能？

简单回答：虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。
详见 73.讲一下对虚拟DOM原理的理解

136.用框架和不用框架的区别

使用框架可以更专注于业务功能开发，而不是疲于封装底层能力，从而极大提高开发效率，同时大大提升了开发体验；

不用框架则需要开发人员耗费更多人力去封装底层能力，拖累开发效率，降低了开发体验。

137.unicode、utf-8、ASCII有什么不同？

ASCII

ASCII码实现的是大小写英文字母，阿拉伯数字，及常用的标点符、运算符、控制字符(换行、删除等)和通信字符(文头、确认等)与计算机编码之间的对应。ASCII编码采用单字节(8 Bit)存储，实际数据存储空间是7 Bit，最高位的1 Bit是奇偶校验位。
ASCII 编码对于英语国家足够用了，但是却无法表达非英语国家字符到计算机编码之间的映射，如中文汉字、法语字母等。

Unicode

unicode编码解决了ASCII码只支持英文数字等字符的单一问题
unicode编码目前普遍采用USC-2格式，该格式采用两个字节来编码一个字符，所以两个字节最多可以表示2^16=65536个字符（一个字节为8位）
字符编码一般用十六进制来表示
unicode编码表也继承了ASCII码表中的字符，只是以十六进制的形式来表示而已

UTF-8

它是一种可变长度的编码规则，根据不同情况可以占用1~4个字节不等
当字符编码只占一个字节时，第一个二进制都是0，0xxx xxxx，表示这个字符占一个字节，考虑一下，余下7位（2^7=128）恰好能表示ASCII码中的128个字符的序号，因此编码方式等同于标准ASCII码。
当字符编码占两个字节时，第一个字节的前两位是11，第三位是0，第二个字节的前两位是10，110x xxxx 10xx xxxx，表示这个字符总共需要占两个字节。

138.订阅发布模式和观察者模式有什么区别？

结构不同

观察者模式里，只有两个角色：观察者、被观察者；
而发布订阅模式里，却不仅仅只有发布者和订阅者两个角色，还有一个经常被我们忽略的 —— 经纪人Broker，在发布订阅模式里，发布者，并不会直接通知订阅者，而是通过第三者Broker来通知。

耦合关系

观察者和被观察者，是松耦合的关系；
发布者和订阅者，则完全不存在耦合。

应用场景

观察者模式，多用于单个应用内部；
发布订阅模式，则更多的是一种跨应用的模式(cross-application pattern)，比如我们常用的消息中间件，或者同一app中受工程结构影响完全解耦的两个组件之间

139.双向绑定和vuex是否冲突？

在严格模式中使用Vuex，当用户输入时，v-model会试图直接修改属性值，但这个修改不是在mutation中修改的，所以会抛出一个错误。

当需要在组件中使用vuex中的state时，有2种解决方案：

在input中绑定value(vuex中的state)，然后监听input的change或者input事件，在事件回调中调用mutation修改state的值
使用带有setter的双向绑定计算属性

<input v-model=“message”>  
computed: {
    message: {
        get() {
            return this.$store.state.obj.message
        }, 
        set(value) {
            this.$store.commit(‘updateMessage’, value)
        }
    }
}

140 使用JavaScript Proxy实现简单的数据绑定

<body>
  hello,world
  <input type="text" id="model">
  <p id="word"></p>
</body>
<script>
  const model = document.getElementById("model")
  const word = document.getElementById("word")
  var obj= {};

  const newObj = new Proxy(obj, {
      get: function(target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
      },
      set: function(target, key, value, receiver) {
        console.log('setting',target, key, value, receiver);
        if (key === "text") {
          model.value = value;
          word.innerHTML = value;
        }
        return Reflect.set(target, key, value, receiver);
      }
    });

  model.addEventListener("keyup",function(e){
    newObj.text = e.target.value
  })
</script>

141.讲一下对Proxy和reflect的理解

Proxy

Proxy即代理，会在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

reflect

Reflect 是一个内置的 JS 对象，它提供了一系列方法，可以让开发者通过调用这些方法，访问一些 JS 底层功能，使用 Reflect 可以实现诸如：属性的赋值与取值、调用普通函数、调用构造函数、判断属性是否存在与对象中等等功能。

在 ES5 就被提出：减少魔法、让代码更加纯粹（语言的方法使用 API 实现，而不使用特殊语法实现），这种理念很大程度上是受到函数式编程的影响。 ES6 进一步贯彻了这种理念，它认为，对属性内存的控制、原型链的修改、函数的调用等等，这些都属于底层实现，属于一种魔法，因此，需要将它们提取出来，形成一个正常的 API，并高度聚合到某个对象中，于是就造就了 Reflect 对象。

142.JQuery的on、delegate是在哪个阶段处理事件的？

在冒泡阶段处理事件

145.什么时候用到beforeDestory？

在vue的组件的mounted钩子中，为window添加事件的话，记得在销毁组件时要移除事件，否则该组件不在了，但事件会一直存在。
同理：在mounted钩子中添加计时器，当组件销毁后（例如使用路由切换到另一个组件了），该计时器还会在继续工作，所以在该组件销毁前要清除计时器。
解绑event bus的事件

146.对MVC的理解和使用

www.jianshu.com/p/207011544…

147.微信客户端和iphone打不开vue.cli的项目，首⻚白屏

swiper依赖导致，在node_modules\swiper\dist\js\swiper.esm.bundle.js里引入了Dom7。
解决办法:
把swiper.js的内容复制进swiper.esm.bundle.js里面即可。

148.Vue 双向绑定原理（简述版）

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

实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
mvvm 入口函数，整合以上三者

149.### 描述下 vue 从初始化页面--修改数据--刷新页面 UI 的过程(简述版)

当 Vue 进入初始化阶段时，一方面 Vue 会遍历 data 中的属性，并用 Object.defineProperty 将它转化成 getter/setter 的形式，实现数据劫持(暂不谈 Vue3.0 的 Proxy)；另一方面，Vue 的指令编译器 Compiler 对元素节点的各个指令进行解析，初始化视图，并订阅 Watcher 来更新试图，此时 Watcher 会将自己添加到消息订阅器 Dep 中，此时初始化完毕。

当数据发生变化时，触发 Observer 中 setter 方法，立即调用 Dep.notify(), Dep 这个数组开始遍历所有的订阅者，并调用其 update 方法，Vue 内部再通过 diff 算法，patch 相应的更新完成对订阅者视图的改变。

150.如何理Vue解响应式系统(简述版)

任何一个 Vue Component 都有一个与之对应的 Watcher 实例
Vue 的 data 上的属性会被添加 getter 和 setter 属性
当 Vue Component render 函数被执行的时候, data 上会被触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。( 这一过程被称为依赖收集)
data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用,此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新

151.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异？

现代前端框架有两种方式侦测变化，一种是pull，一种是push

pull: 其代表为React，我们可以回忆一下React是如何侦测到变化的,我们通常会用setStateAPI显式更新，然后React会进行一层层的Virtual Dom Diff操作找出差异，然后Patch到DOM上， React从一开始就不知道到底是哪发生了变化，只是知道「有变化了」，然后再进行比较暴力的Diff操作查找「哪发生变化了」，另外一个代表就是Angular的脏检查操作。

push: Vue的响应式系统则是push的代表，当Vue程序初始化的时候就会对数据data进行依赖的收集，一但数据发生变化,响应式系统就会立刻得知。因此Vue是一开始就知道是「在哪发生变化了」，但是这又会产生一个问题，如果你熟悉Vue的响应式系统就知道，通常一个绑定一个数据就需要一个Watcher，一但我们的绑定细粒度过高就会产生大量的Watcher，这会带来内存以及依赖追踪的开销，而细粒度过低会无法精准侦测变化,因此Vue的设计是选择中等细粒度的方案,在组件级别进行push侦测的方式, 也就是那套响应式系统,通常我们会第一时间侦测到发生变化的组件, 然后在组件内部进行Virtual Dom Diff获取更加具体的差异，而Virtual Dom Diff则是pull操作， Vue是push+pull结合的方式进行变化侦测的。

152.组件中写 name 选项有什么作用？

项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
DOM 做递归组件时需要调用自身 name
vue-devtools 调试工具里显示的组见名称是由vue中组件name决定的

153.Vue中父组件如何能监听到子组件的生命周期

参照 46.组件通信的方式，思路就是在子组件生命周期钩子中给父组件发送通知

网上答案参考：blog.csdn.net/yalywq/arti…

154.class 与 style 如何动态绑定

blog.csdn.net/qq_57404393…

155.Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？

受现代 JavaScript 的限制，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性。

vm.$set 的实现原理是：

如果目标是数组，直接使用数组的 splice 方法触发相应式；
如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

156.虚拟 DOM 的优缺点？

优点：

保证性能下限：框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
无需手动操作 DOM：我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
跨平台：虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点:

无法进行极致优化：虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

自用前端面试题（Vue）

1.VUE的基本原理

2.双向数据绑定的原理

3.使用 Object.defineProperty() 来进行数据劫持有什么缺点?

4.MVVM、MVC、MVP的区别

5.Computed 和 Watch 的区别

6.Computed 和 Methods 的区别

7.slot是什么？有什么作用？原理是什么？

8.过滤器的作用，如何实现一个过滤器？

9.如何保存页面的当前的状态？

10.常见的事件修饰符及其作用

11.v-if、v-show、v-html的原理

12.v-if和v-show的区别

13.v-model 是如何实现的？语法糖实际是什么?

14.v-model 可以被用在自定义组件上吗？如果可以，如何使用?

15.data为什么是一个函数而不是对象

16.对keep-alive的理解，它是如何实现的，具体缓存的是什么？

17. $nextTick 原理及作用

18.Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？

19.Vue中封装的数组方法有哪些？如何实现页面更新？

21.Vue 单页应用与多页应用的区别？

21.Vue template 到 render 的过程

22.Vue data中某一个属性的值发生改变后，视图会立即同步执行渲染么？

23.简述 mixin、extends 的覆盖逻辑

24.描述下Vue自定义指令

25.子组件可以直接改变父组件的数据吗？

26.Vue是如何收集依赖的？

27.对 React 和 Vue 的理解，它们的异同

28.Vue的优点

29.assets和static的区别

30. delete和Vue.delete删除数组的区别

31.vue如何监听对象或者数组某个属性的变化

32.什么是 mixin?

33.Vue模版编译原理

34.对SSR的理解

35.Vue的性能优化有哪些？

36.对 SPA 单页面的理解，它的优缺点分别是什么？

37.template和jsx的有什么分别？

38.如何解决vue初始化页面闪动问题

39.extend 有什么作用?

40.MVVM的优缺点?

41.说一下Vue的生命周期

说一下vue组件的生命周期

42.Vue 子组件和父组件执行顺序

43.created和mounted的区别

44.一般在哪个生命周期请求异步数据？

45.keep-alive 中的生命周期哪些？

46.组件通信的方式

props / $emit

1. 父组件向子组件传值

2. 子组件向父组件传值

eventBus事件总线（$emit / $on）

1.创建事件中心管理组件之间的通信

2.发送事件

3.接收事件

依赖注入（provide / inject）

ref / $refs

$parent / $children

$attrs / $listeners

总结

47.Vue底层实现原理

47.为什么v-for和v-if不建议用在一起?

48.React/Vue 项目中 key 的作用

49.子组件为什么不可以修改父组件传递的Prop？

50.Vuex和单纯的全局对象有什么区别？

51.为什么 Vuex 的 mutation 中不能做异步操作？

52.Vue 的父组件和子组件生命周期钩子执行顺序是什么？

53.v-show 和 v-if 有哪些区别？

54.computed vs methods

55.Vue中v-html会导致什么问题？

56.Vue的响应式原理

57.Object.defineProperty有哪些缺点？/为什么vue3.0使用proxy实现响应式？

58.讲一下Vue的diff原理

59.v-for 中 key 的作用是什么？

60.Vue-router导航守卫有哪些？

61.vue-router hash模式和history模式有什么区别？

62.vue-router hash 模式和 history 模式是如何实现的？

前端路由简介以及vue-router实现原理

63.vue常用的修饰符？

64.如何让CSS只在当前组件中起作用？

eventBus事件总线（`$emit / $on`）

`ref / $refs`

`$parent / $children`

`$attrs / $listeners`

81.vue-router 路由钩子函数是什么执行顺序是什么