1. Vue 组件中 data 为什么必须是函数
- 一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。
- 如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数，因为函数有自己的作用域。
2. computed 、watch、method的区别⭐⭐⭐⭐⭐
通俗来讲，既能用 computed 实现又可以用 watch 监听来实现的功能，推荐用 computed
- computed
- 计算属性，依赖其他属性，当其他属性改变的时候下一次获取computed值时也会改变，computed的值会有缓存
- watch
- 类似于数据改变后的回调
- 如果想深度监听的话，后面加一个
deep:true - 如果想监听完立马运行的话，后面加一个
immediate:true
- method
- 在使用 method 的时候，是这样使用的{{fn{xx}}}，渲染的时候如果没有发生变化，这个也是会被执行的。
- 而 computed 是有缓存的，如果没有变化就不用再去执行了
3. vue的$set是做什么的⭐⭐⭐
将新增的数据变成响应式
- vue 中 data的数据，如果是对象的话，会把它的属性转为Object.defineProperty的getter和setter，使之变为响应式的。但是新增的属性不是响应式的。
- 可以通过
this.$set()，将新增的数据变成响应式this.$set(对象,key,值)this.$set(数组,索引,值)
this.$forceUpdate()：强制更新页面
4. @click.sync、native、stop、prevent、self分别是做什么的⭐⭐⭐
| 语法 | 作用 |
|---|---|
| @click.sync | <comp :foo.sync="bar"></comp>相当于 <comp :foo="bar" @update:foo="val => bar = val"> |
| @click.native | 父组件的原生事件需要加上 native，否则不生效 |
| @click.stop | 是阻止冒泡 |
| @click.prevent | 是阻止默认行为 |
| @click.self | 点击自己的时候才能触发 |
5. v-model 的原理⭐⭐⭐⭐⭐
- v-model其实是—个语法糖，它的背后本质上是包含两个操作:
v-bind绑定一个value属性：:valuev-on指令给当前元素绑定input事件：@input
- 也就是说下面的两段代码是等同的
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
6. v-html 会导致什么问题⭐⭐⭐⭐⭐
- 可能会造成 xss 攻击
- v-html 会替换掉子标签
7. 为什么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生效。由于语法上存在歧义，建议避免在同一元素上同时使用两者。比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。
8. nextTick⭐⭐⭐⭐⭐
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
（1）应用
- 想要在Vue生命周期函数中的created()操作DOM可以使用Vue.nextTick()回调函数
- 在数据改变后要执行的操作，而这个操作需要等数据改变后而改变DOM结构的时候才进行操作，需要用到nextTick
（2）Vue中的nextTick是微任务还是宏任务⭐⭐⭐⭐
- 根据执行环境分别尝试采用Promise、MutationObserver、setImmediate，如果以上都不行则采用 setTimeout
- nextTick的内部实现如果支持 promise 那就使用 promise，
- 没有就用MutationObserver（微任务），
- 再没有就用 setImmediate（宏任务），
- 还没有就用 setTimeOut；
- 所以nextTick 有可能是宏任务，也有可能是微任务
