Vue常见问题

1、vue是如何缓存当前组件的？缓存后怎么实现更新
缓存组件使用keep-alive组件，这是一个非常常见的有用的优化手段
①开发中缓存组件使用keep-alive组件，keep-alive组件是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的实例，而不是销毁他们，这样在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive>
	<component :is="view"></component>
</keep-alive>

②结合include和exclude可以明确指定缓存哪些组件或者排除缓存指定组件。vue3中结合vue-router时变化较大，之前是keep-alive包裹router-view，现在需要反过来router-view包裹keep-alive：

<router-view v-slot="{Component}">
	<keep-alive>
		<component :is="Component"></Component>
	<keep-alive>
</router-view>

③缓存后如果要获取数据，解决方法可以有以下两种

• beforeRouteEnter：在vue-router的项目，每次进入路由的时候，都会执行beforeRouteEnter

beforeRouteEnter（to,from,next）{
	next(vm=>{
		console.log(vm)
		//每次进入路由执行
		vm.getData();//获取数据
	}
}

• actived:在keep-alive缓存的组件被激活的时候，都会执行actived钩子

actived(){
	this.getData()//获取数据
}

2、双向绑定使用和原理
①vue中双向绑定是一个指令v-model，可以绑定一个响应式数据到视图，同时视图中变化能改变该值。
②v-model是语法糖，默认情况下相当于:value和@input。使用v-model可以减少大量繁琐的时间处理代码，提高开发效率
③通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。
④通过的方式将XXX的值绑定到表单元素value上；对于checkbox，可以使用true-value和false-value指定特殊的值，对于radio可以使用value指定特殊的值；对于select可以通过options元素的value设置特殊的值；还可以结合.lazy,.number,.trim对v-model的行为做进一步限定；v-model用在自定义组件上时又会有很大不同，vue3中它类似于sync修饰符，最终展开的结果是modelValue属性和update:modelValue事件；vue3中它类似于sync修饰符，最终展开的结果是modelValue属性和update:modelValue事件vue3中我们甚至可以用参数形式指定多个不同的绑定，例如v-model:foo和v-model:bar
3、对vue响应式的理解
①所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制
②MVVM框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，试图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理
③以vue为例说明，通过数据响应式加上虚拟DOM和patch算法，开发人员只需要操作数据，关心业务，完全不用接触繁琐的DOM操作，从而大大提升开发效率，降低开发难度。
④vue2中的数据响应式会根据数据类型来做不同处理，如果是对象则采用Object.defineProperty()的方式定义数据拦截，当数据被访问或发生变化时，我们感知并做出响应；如果是数组则通过覆盖数组对象原型的7个变更方法，使这些方法可以额外的做更新通知，从而做出响应。这种机制很好的解决了数据响应化的问题，但在实际使用中也存在一些缺点：比如初始化的递归遍历会造成性能损失；新增或删除属性时需要用户使用Vue.set/delete这样特殊的api才能生效；对于es6中新产生的Map，Set这些数据结构不支持等问题
⑤、为了解决这些问题，vue3重新编写了这一部分的实现：利用ES6的Proxy代理要响应化的数据，它有很多好处，编程体验一致的，不需要使用特殊APi，初始化性能和内存消耗都得到了大幅度改善；另外由于响应化的实现代码抽取为独立的reactivity包，使得我们可以更灵活的使用它，第三方的扩展开发起来更加灵活了。
4、key的作用
①key的作用主要是为了更高的更新虚拟DOM
②vue在patch过程中判断两个节点是key是一个必要条件，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕他们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能。
③实际使用中在渲染一组列表时key必须设置，而且必须是唯一标识，应该避免使用数组索引作为key，这可能导致一些隐藏的bug；vue中使用相同标签元素过度切换时，也会使用key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过度效果。
④从源码中可以知道，vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key，他的值就是undifined，则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量DOM更新操作，明显是不可取的。
5、nextTick的使用方法和原理
①nextTick是等待下一次DOM更新刷新的工具方法。
②vue有个异步更新策略，意思是如果数据变化，Vue不会立即更新DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立即体现在DOM上，此时如果想获取更新后的DOM状态，就需要使用nextTick。。
③开发时，有两个场景我们会用到nextTick：

• created中想要获取DOM时；
• 响应式数据变化后获取DOM更新后的状态，比如希望获取列表更新后的高度
  ④nextTick签名如下：function nextTick（callBack？：（）=>void）:Promise
  所以我们只需要在传入的回调函数中访问最新DOM状态即可，或者我们可以await nextTick()方法返回的Promise之后做这件事。
  ⑤在vue内部，nextTick之所以能够让我们看到DOM更新后的结果，是因为我们传入的callBack会被添加到队列刷新函数的后面，这样等队列内部的更新函数都执行完毕，所有DOM操作也就结束了，callBack自然能够获取到最新的DOM值。
  注：https://juejin.cn/post/7097067108663558151#heading-3