1.v-if和v-show区别

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建； v-if也是惰性的，如果初识渲染时条件为假，则什么都不需要做，直到条件第一次变为真时才开始渲染条件块； v-if有更高的切换开销，v-show有更高的初始渲染开销，如果需要频繁切换，v-show更好，运行条件不太可能改变时，则用v-if。 v-if不符合条件时，在vue内部调用的是一个_e的方法，创建一个空节点；但v-show无论是符合还是不符合，没有进行节点的创建，只是改变了display的值。 https://www.jianshu.com/p/7af8554d8f08

2.如何让css只在当前组件生效？

<style scoped>

3.scss stylus样式穿透怎么做？

scss：父元素 /deep/ 子元素 stylus：同上或父元素 >>> 子元素

4.v-model的使用；vue中的标签如何绑定事件？

v-model可以实现双向绑定，一般在input或者select或者文本域配合value使用。

5.NextTick是做什么？

说明： $nextTick是在下次DOM更新循环之后执行延迟回调，在修改数据之后使用$ nextTick，则可以在回调中获取更新后的DOM。场景：需要在视图更新之后，基于新的视图进行操作。

<template>
    <div @click="btn" ref="btns">{{msg}}</div>
<template>
export default {
  name: 'app',
  data() {
    return {
      dialog: false,
      msg: '旧数据'
    }
  },

  methods: {
    btn() {
      this.msg = '新洗心心心';
      // 直接打印出现的是旧数据，在nextTick里出现的是新数据
      console.log(this.$refs.btns.innerHTML);
      this.$nextTick(() => {
        console.log(this.$refs.btns.innerHTML);
      })
    }
  },
 }

6.为什么vue的data必须是个函数？

同一个组件被复用多次，会创建多个实例。这些实例用的是同一个构造函数，如果 data 是一个对象的话。那么所有组件都共享了同一个对象。为了保证组件的数据独立性要求每个组件必须通过 data 函数返回一个对象作为组件的状态。

7.说说对keep-alive的理解

keep-alive用于控制组件是否需要缓存，可以通过keep-alive元素配置也可以通过route里的meta对象配置。keep-alive为true的组件，只有第一次进入时会拥有created生命周期，之后都是直接进入activated周期里，当页面回退到该组件时，组件的数据保持不变，否则会重新走一遍生命周期。动态配置，可利用beforeRouterLeave函数。

8.vue数据响应式原理

9.vue如何检测数组变化

https://blog.csdn.net/XuM222222/article/details/99950241

10.为什么vue采用异步渲染

vue是组件级的更新，那么组件涉及的数据可能非常多，如果一改就立刻更新，会非常损耗性能，尤其是在vue2.0以后，vue还会计算通知依赖于更改数据的其他组件，这中间损耗的性能就更为严重了。所以vue采用异步渲染，在本轮数据更新后去更新视图。 https://www.sohu.com/a/227583981_500651

11.vue通信的几种方式

https://segmentfault.com/a/1190000019208626

12.computed、watch和method的区别

method：函数调用，每使用一处，就会执行一次，开销比较大。
computed：属性调用，计算属性是具备缓存的，只有当依赖的data数据发生变化时才会重新计算。computed的由来还有一个重要原因，就是防止文本插值中逻辑过重，导致不易维护
watch：监听属性的变化，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods

13.如何实现深度监听？

vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听，但是直接深度监听某个对象并不合适，因为每个属性变化都会引起watch定义的操作，如果只是监听对象中的某个属性，可以用字符串的形式。

14.provide/inject实现响应式数据更新的方法

https://www.jb51.net/article/172018.htm

15.不同的生命周期过程中，分别可以干点什么？

beforeCreate：data，watcher，methods都不存在这个阶段。但是有一个对象存在，那就是$route，因此此阶段就可以根据路由信息进行重定向等操作。
created:实例已经创建完成，可以进行数据、资源请求；
mounted：实例挂载到了dom上，可以进行一些dom操作；
beforeUpdate：可以在钩子中进一步的更新状态，这时的更新不会触发附加的重渲染过程；
updated：更新已完成，这时最好不要再进行状态更新，不然可能导致死循环
beforeDestroyed：实例销毁前的钩子函数，可以做一些优化操作，比如清理定时器、解除绑定事件、解除监听

16.ajax请求放在哪个生命周期？

放在created之后的都可以，一般放在created和mounted，前者的时机更早，如果在页面挂载完之前请求完成的话就不会看到闪屏，但无法操作dom，且异步请求很有可能在挂载完成后数据还没拿到；后者可以操作dom，所以有必须依赖dom的情况的话，可以放在mounted的$nextTick里。

17.beforeDestroy什么时候使用？

当前页面中使用了$on时，需要在组件销毁前解绑；清除自己定义的定时器；解除事件绑定，比如mousemove、scroll之类的

18.vue中的模版编译原理

模板解析阶段：将一堆模板字符串用正则等方式解析成抽象语法树AST；优化阶段：遍历AST，找出其中的静态节点，并打上标记；代码生成阶段：将AST转换成渲染函数；

19.v-if和v-for为什么不能同时使用？

因为同时使用时，vue的内在逻辑是会先处理循环，然后对循环的每一项做条件判断。如果循环的项非常多，那就会造成非常大的性能消耗。

20.简述vue中diff算法原理

https://www.cnblogs.com/wind-lanyan/p/9061684.html

21.v-for中为什么要使用key？

diff算法主要是做同级比较，它会同时比较标签名和key，如果设置了key，当子节点位置发生变化时，vue也能很迅速的定位到该节点，无需重新去创建、销毁。一般也不建议使用索引作为key值，比如删除第一项，第二项的索引会变为0，vue做比对时会复用旧的节点。

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

渲染组件时，会通过 Vue.extend方法构建子组件的构造函数，并进行实例化。最终手动调用$mount() 进行挂载。更新组件时会进行 patchVnode 流程.核心就是diff算法。

23.vue中事件绑定的原理

原生事件是通过addEventListener实现的；自定义事件是通过$on方法。

24.v-model的实现原理以及如何自定义v-model？

可以看成是value和input的语法糖

25.v-html会导致什么问题？

会导致xss注入攻击，

26. v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？