Vue面试题
1. Vue中的双向绑定
双向绑定是模板中数据和实例中数据的双向绑定，当数据发生变化时，模板会自动更新，当模板发生变化时，数据也会自动更新。
模板中使用双向绑定的语法是 v-model，实际是语法糖，等价于 :value 和 @input 事件的组合。当模板数据更新时，会触发 @input 事件，更新实例数据。
实例数据也就是响应式数据，当实例数据发生变化时，会触发视图的响应式更新。
2. vue中key的作用
什么是key
在vue中，key是虚拟DOM节点（VNode）的唯一标识。
当Vue更新视图时，会进行虚拟DOM diff算法。它会拿旧的VNode树与新的VNode树进行对比，找出哪些节点可以复用，哪些节点需要被创建或删除。
如果两个节点的key 和 节点的类型 都相同，那么Vue会认为这两个节点是相同的节点，直接复用；否则，Vue会认为这两个节点是不同的节点，销毁旧节点，创建新节点。
不设置key
默认是不设置key的，Vue会尽可能地复用相同类型的节点。这样是高效的，但只适用于列表输出的结果不依赖子组件状态或临时DOM状态（例如表单输入值）。
否则可能会导致错误的节点被复用，如： 在列表中插入或删除元素时，Vue 可能错误地复用相邻节点的 DOM，导致状态错乱（如输入框内容错位）。
设置key
根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。
同一个父元素下的子元素，key 必须是唯一的，不然会导致渲染异常。
官方推荐在列表渲染时，使用唯一的 key 来标识每个节点，这可以帮助 Vue 更准确地进行 DOM diff 操作，提高渲染效率。
3. 什么时候用ref，什么时候用reactive？
ref 用于定义基本类型的响应式数据，如字符串、数字、布尔值等。 reactive 用于定义引用类型的响应式数据，如对象、数组等。
reactive不能直接赋值，只能修改对象的属性。而ref可以直接赋值。
建议：使用ref，但当只需要响应式数据对象时，不修改，可以使用reactive。