vue2/vue3知识点

1.vue常用修饰符?

.stop:阻止事件冒泡。
.prevent:阻止默认事件
.capture:添加事件侦听器时使用事件捕获模式
.self:只当事件在该元素本身(而不是子元素)触发时触发回调。
.once:事件只触发一次。
.passive:滚动事件的默认行为(即滚动)会立即触发，而不是等待执行完事件处理函数才触发。
.native:监听组件根元素的原生事件。
.sync:双向绑定，子组件可以修改父组件的数据，
.lazy:只有在“change"事件触发时才更新。
.number:输入值自动转为数字类型
.trim:输入值自动去除首尾空格。

2.vue虚拟dom？

1.1.概念:
Vue 的虚拟 DOM(virtual DOM)是一种用 JavaScript 对象来描述真实 DOM 结构的技术。可以提高 DOM 操作的效率，从而提高应用的性能

1.2.相关虚拟dom库:目前虚拟dom的库很多，常见的有snabbdom 和 virtual-dom，vue以前用的是virtual-dom,E从2.x以后用的都是snabbdom。
1.3.vue2虚拟dom实现关键(了解):
2.1.1VNode 类型定义
vue 2.x中定义了一个 Vode 类型，用于描述虚拟 DOM 的节点信息。VNode 类型是一个JavaScript 对象，它包含了节点的 tag、data、children、text、elm 等属性。其中，tag 表示节点的标签名，data 表示节点的属性信息，children 表示节点的子节点数组text 表示节点的文本内容，elm 表示节点对应的真实 DOM 元素。除此之外，VNode类型还支持设置key和ref 属性。key 属性用于优化列表渲染，ref 属性用于访问组件实例。
2.2createElement数
Vue 2.x中提供了一个 createElement 函数，用于创建 VNode 对象。createElement 函数接收三个参数:tag、data 和 children，其中 tag 表示节点的标签名，data 表示节点的属性信息，children 表示节点的子节点数组。createElement 函数会返回一个 VNode 对象，该对象用于描述虚拟 DOM 的节点信息。
2.3patch 函数Vue 2.x中提供了一个 patch 函数，用于将新的 VNode 对象渲染为真实 DOM，并将其与之前的VNode 对象进行比较，从而找出需要更新的部分，并将其更新到真实DOM中。patch 函数接收两个参数:oldVnode 和 vnode，其中 oldVnode 表示旧的 VNode 对象,vnode表示新的 VNode对象。patch 函数会比较 oldVnode 和 vnode 的差异，并将差异更新到真实 DOM中。

2.4diff 算法vue 2.x中的 diff 算法是基于 Snabbdom 实现的。它采用了一种双指针的比较方式，通过比较新旧 VNode 对象的 key 和 tag 等属性，从而找出需要更新的部分，并将其更新到真实 DOM中。
dif 算法的核心思想是尽可能复用已有的 DOM 节点，从而减少 DOM 操作。具体来说，diff 算法会先比较新旧节点的 key，如果 key 相同，则认为这是同一个节点，可以直接复用旧节点的 VNode和真实 DOM 节点;

如果 key 不同，则认为这是不同的节点，需要创建新的 VNode 和真实 DOM节点。总的来说，Vue2.x的虚拟 DOM 实现主要包含了 VNode 类型定义、createElement 函数patch 函数和 diff 算法。这些技术的结合，可以实现高效的虚拟 DOM 渲染和更新，从而提高应用的性能

3.vue-diff算法？

1.虚拟dom概念:
vue.js 中的 diff 算法是一种优化算法，用于比较新旧两个虚拟 DOM 树的差异，并最小化更新页面节点的操作。
diff 算法就是对虚拟 dom 进行对比，并返回一个 patch 对象，这个对象的作用是存储两个节点不同的地方，最后用 patch 里记录的信息去局部更新真实的 dom
2.虚拟dom对比原则:
优先对比同层级的节点
采用深对比先的遍历策略
尽量复用旧节点
3.虚拟dom对比过程:
Vue.js 中的 diff 过程可以分为两个阶段:创建虚拟 DOM 和更新虚拟 DOM。
3.1创建虚拟 DOM在 vue.js 中，我们使用模板或者 render 函数来创建组件的虚拟 DOM 树。在创建虚拟 DOM 树的过程中，vue.js 会为每个节点添加一些额外的属性，例如节点的标签名、属性列表、事件监听器等等。

3.2更新虚拟 DOM
当组件的状态发生变化时，Vue.js 会重新渲染组件的虚拟 DOM 树，并通过 diff 算法找出新旧两个虚拟 DOM 树之间的差异。这个过程可以分为以下几个步骤(步骤大概记下即可不用太详细):
首先比较两个根节点，如果它们不同，则直接替换整个DOM树。
如果两个节点的标签名不同，则直接替换该节点及其子树。
如果两个节点的标签名相同，但是属性不同，则更新该节点的属性。
如果两个节点的标签名和属性都相同，但是子节点不同，则递归比较它们的子节点。
如果两个节点的标签名、属性和子节点都相同，则不需要更新。
在比较子节点时，Vue.js 中的 diff 算法采用了一种双指针的策略，即使用两个指针分别指向新旧两个虚拟 DOM 树的子节点，然后逐个比较它们之间的差异。具体来说，vue.js 中的 diff 算法采用了以下几个步骤:
首先比较两个节点列表的头部节点，如果它们相同，则直接跳过它们，继续比较下一个节点。如果新节点列表的头部节点在旧节点列表中不存在，则说明它是一个新节点，直接插入到旧节点列表的头部。
如果旧节点列表的头部节点在新节点列表中不存在，则说明它是一个旧节点，直接从旧节点列表中删除。
如果新节点列表的头部节点和旧节点列表的头部节点不同，则采用一种启发式的策略，从新节点列表和旧节点列表中找出最长的公共子序列，并将其保留。然后将新节点列表和旧节点列表中剩余的节点分别
插入和删除。
通过这种方式，Vue.js 中的 diff 算法可以快速地比较新旧两个虚拟 DOM 树的差异，并最小化更新的操作，从而提高应用的性能。