Vue3.0探讨与交流

Vue3.0探讨与交流

---

前言

Vue3.0的产生，是一个越来越成熟的框架，是不断优化的过程，跟Vue2.x有一定差别。

---

一、Vue2.x与Vue3.0区别？

1、提升虚拟DOM效率

- 真实DOM

• DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 的接口。其实就是渲染在真实浏览器上的树结构。

• 真实DOM渲染的属性节点
  

- 虚拟DOM

• 虚拟 DOM 是轻量级的 JavaScript 对象，由渲染函数创建。它包含三个参数：元素，带有数据的对象，prop，attr 以及更多，和一个数组
  

- 虚拟DOM的diff算法

• diff算法就是用于比较新旧两个虚拟dom之间差异的一种算法。
  1、比较两个虚拟dom树，对根节点root进行执行patch(oldVnode，newVnode)函数，比较两个根节点是否是相同节点。如果不同，直接替换（新增新的，删除旧的）。
  2、如果相同，对两个节点执行patchVnode（oldVnode, newVnode）,比较属性,文本，已经子节点。此时，要么新增，要么删除。要么直接修改文本内容。只有当都存在子节点时，并且oldVnode === newVnode 为false时。会执行updateChildren函数，去进一步比较他们的子节点。

- Vue3.0的虚拟DOM渲染优化

• PatchFlag：增加标识，在会产生变化的虚拟DOM增加标识。
  Vue2需要遍历且更新所有虚拟DOM进行更改比较，在Vue3.0中，只有带PatchFlag的这些node会被真正的追踪，也就是说在后续更新的过程中，Vue会知道静态节点不用管，只需要追踪带有PatchFlag的节点。（PatchFlag值 1文本，2class，4style，8动态属性，16动态key，32有监听事件的节点）
  update性能提高1.32倍，SSR速度提高了2~3倍。

2、事件监听缓存：cacheHandlers

• 没有cacheHandlers状态
  
• 有cacheHandlers状态
  

二、Vue3.0的新特性有那些？

1. 组合API（Composition API）

• Composition API是为了解决原本Vue项目中代码逻辑分散而导致不易维护的问题，将代码更共享性和重用性，就是在setup中，可以将组件的公共功能提取出来，在这里运行，还可以return暴露出去直接使用。

setup

• setup是Composition API的入口，它的生命周期在beforeCreate前，在setup不能使用this。

ref（）、reactive（）

• 这两个都是用于创建一个响应式数据，当数据 发生改变时，Vue会自动更新UI，都是创建响应式数据的方法。

• 区别：
  ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）。
  reactive函数可以监听复杂类型的变化。
  

搜索获取用户数据功能实现

• 获取数据
  
• 搜索功能

• 组合输出方法
  

2、支持多个根节点与Teleport

• 支持多个根节点，在Vue3.0可以写多个根节点，Vue2.x只有一个根节点.
• Teleport标签提供了一种简单的方法，使我们可以控制要在DOM中哪个父对象下呈现HTML。

3、Tree shaking support（按需打包模块）

4、Better TypeScript support（更好的TS代码支持）

5、Custom Renderer API（自定义渲染API)

---

三、Vue3.0的响应式原理？

1、Vue2.x的响应式原理

• Vue2.x的响应式原理，其实就是发布-订阅者模式
• Vue2.x的底层实现， Object.defineProperty 拦截数据的 get/set 实现代码的获取和设置。
• 缺点：
  1、深度监听需要一次性递归
  2、无法监听新增属性和删除属性(Vue.$set Vue.delete)
  3、无法原生监听数组, 需要特殊处理(重写数组原型)
  

2、Vue3.0的响应式原理

• 使用proxy重写响应式原理
• 优点：
  深度监听. 性能更好
  可监听新增/删除 属性
  可监听数组变化

const dinner = {
    meal: '111'
}
const handler = {
    get(target, key,receiver) {
         return target[key]
    },
    set(target, key, value, receiver) {
        target[key] = value
        console.log('更新ui')
        return true
     }
}
const state = new Proxy(dinner, handler)
state.meal = '222'
console.log(state.meal)  // 222

---

四、Vue3.0如何使用？

1、安装使用

• npm下载安装

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

• vite 使用

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

2、Vite

• Vite 是由 Vue 作者尤雨溪开发的一套一种新的、更快地 web 开发工具，它具快速的冷启动、即时的模块热更新、真正的按需编译几个特点。