vue2和vue3到底有什么区别

最新推荐文章于 2024-09-12 23:01:35 发布

rubylLc

最新推荐文章于 2024-09-12 23:01:35 发布

阅读量1.7k

点赞数 29

文章标签： vue.js 前端 vue

本文链接：https://blog.csdn.net/rubylLc/article/details/139328691

版权

一、设计理念

Vue2：以简单易学、灵活和高效的API为目标，提供响应式和可复用的组件化构建方式。
Vue3：更注重模块上的拆分，对所有的API进行了重写，并采用函数式编程，支持更好的Tree Shaking，精确地实现了按需引入，减少了打包体积。

二、性能提升

Vue3 在内部实现上进行了大量的优化，使得渲染速度更快，性能更好，内存占用更少。
- 响应式系统升级：使用Proxy替代Object.defineProperty实现响应式，并且使用了静态提升技术来提高渲染性能。
  - proxy
    Proxy 对象用于定义基本操作的自定义行为，如属性查找、赋值、枚举、函数调用等。这使得 Proxy 对象可以用作某些内置对象的钩子，比如数组、函数、对象等。
    
    在 Vue 3 中，Proxy 被用来替代 Object.defineProperty()，实现更完整和高效的响应式系统。Proxy 可以监听属性的添加、删除和修改，并且可以轻松地监听数组的变化。这使得 Vue 3 的响应式系统更加健壮和高效。
  - Object.defineProperty
    Object.defineProperty() 方法直接在对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。这个方法允许你精确地添加或修改对象的属性，包括属性的值、可枚举性、可写性、可配置性等。
    
    在 Vue 2 的响应式系统中，Object.defineProperty() 被用来劫持对象属性的 getter 和 setter，从而在数据发生变化时触发视图的更新。然而，Object.defineProperty() 有一些限制，比如它不能检测属性的添加或删除，也不能监听数组的变化（尽管 Vue 2 通过一些特殊的方法对数组进行了处理）。
- Diff算法重写：新增了最长递归子序列的算法，来计算出最小的修改偏移量。
  - 生成新的VNode：当组件状态发生变化时，Vue会生成一个新的虚拟DOM树（VNode）。
  - 比较新旧VNode：通过diff算法对比新的VNode与上一次渲染结果中的旧VNode。
  - 执行优化策略：
    - 当遇到类型相同的两个节点，且它们的属性没有变化时，只需更新可能改变的文本内容等信息，无需替换整个节点。
    - 如果节点类型不同，则直接移除旧节点，插入新节点。
  - 生成patch对象：diff算法执行完毕后，会产生一系列的更新指令（patch），这些指令包含了如何修改真实DOM的具体操作。
  - 应用patch对象：Vue会根据patch对象将这些差异应用到真实的DOM树上，完成视图的更新。
- 编译器优化：编译器分析模板并生成带有优化提示的代码，运行时尽可能获取提示并采用快速路径，减少不必要的计算和DOM操作。

三、编码方式

Vue2：使用传统的Options API，包括data、methods、computed等选项。
Vue3：引入了Composition API，允许开发者更好地组织和复用逻辑代码，提高代码的可维护性。同时，对TypeScript的支持更加友好，提供了完整的类型定义。
- setup 函数：Composition API 的入口点，用于组织和复用组件逻辑。在 setup 函数中，你可以定义响应式数据、计算属性、方法等，并返回它们供模板使用。
- reactive 和 ref：这两个函数用于创建响应式数据。
  - reactive：返回一个响应式代理对象，该对象在被访问或修改时会触发相应的依赖更新。
```
import { reactive } from 'vue';  
  
const state = reactive({  
  count: 0,  
  nested: {  
    value: 'Hello'  
  }  
});  
  
// 修改响应式对象的属性  
state.count++;  
state.nested.value = 'World';
```
  - ref：返回一个响应式引用对象，其内部值可以通过 .value 属性访问或修改。
```
import { ref } from 'vue';  
  
const count = ref(0);  
const message = ref('Hello');  
  
// 修改 ref 的值  
count.value++;  
message.value = 'World';
```
- computed：用于创建计算属性。计算属性是基于响应式数据派生出的新数据，当依赖的数据变化时，计算属性会自动更新。
- watch 和 watchEffect：用于侦听响应式数据的变化，并在数据变化时执行相应的回调函数。
  - watch：需要显式指定侦听的数据源和回调函数，支持立即执行、深度侦听等选项。
  - watchEffect：自动侦听其执行过程中依赖的数据源，并在数据源变化时重新执行该函数。