Vue2和Vue3的区别：从响应式开始

前言

如果在项目中使用过Vue，那么一定会享受到其响应式带来的好处。作为前端三大框架之一的Vue，已经迭代出Vue2和Vue3两个大版本，Vue3是兼容Vue2的，但是为了区分，我们暂且将其看作是两个独立的框架。Vue3对响应式做了比较大的调整，工作原理上与Vue2并不相同，但是效率上来说Vue3是更好的选择。

原理上的差别

Vue实现响应式的基础都是通过“数据劫持”的方式，但Vue2和Vue3的实现思路是不一样的。

Vue2的响应式

Vue2在创建Vue实例时，需要传入一个data数据对象。此时Vue将会遍历data对象中的所有属性，并通过Object.defineProperty()将每一个属性转换为对应的getter/setter。每一个组件实例都会对应一个watcher监听器实例，在组件渲染时，会将涉及的属性作为依赖项，如果依赖项的setter触发时，就会通知watcher，然后当前关联的组件重新渲染，这就是所谓的观察者模式。

可以查看vue的源码：

...
Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {},
    set: function reactiveSetter(newVal) {}
  })
...

结合图可能更容易理解：

这种处理响应式的方案存在一定的局限性：

• getter/setter只会在组件实例初始化的时候转换，已经创建的实例如果直接添加根级别的属性，那么该属性将不会是响应式的。

  let vm = new Vue({
      data: {
          hello: 'hello'
      }
  })
  vm.hello = 'world'; // 响应式
  vm.world = 'world'; // 添加根级别的属性，将不是响应式

  通过set()方法或者使用Object.assign()创建一个新的对象来解决此问题

• 直接通过索引修改数组项的值，以及直接修改数组的长度，都将失去响应式

  let vm = new Vue({
      data: {
          items: [1,2,3]
      }
  })
  vm.items[0] = 3; // item[0]将失去响应式
  vm.length = 5; // vm.length将失去响应式

  解决此问题，可以使用set()方法来修改数组项，或者使用splice()在原数组上面修改

Vue3的响应式

Vue3摒弃了Vue2实现响应式的方法，而是采用Proxy创建响应式对象。在源码中的体现：

// target 为组件的 data 返回的对象
new Proxy(target,{
  get(target, key){},
  set(target, key, value){}
})

Proxy的详细知识可移步阮一峰

Vue3的响应式基础

Vue3实现响应式需要自己根据需要声明，而Vue2需要放在data中，这也是Vue3函数式编程的体现之一。总的来说，可通过reactive()、ref()方法来声明一个响应式对象。

使用reactive

reactive()函数可创建一个响应式数组或对象，准确来说创建的是数组或对象的响应式代理Proxy：

// 实现原理伪代码
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      trigger(target, key)
      target[key] = value
    }
  })
}

使用时需要从vue中导入：

import {reactive} from 'vue'
let state = {
    count: 0
}
let stateProxy = reactive(state)
console.log(stateProxy === state); // false，代理对象和原始对象是不全等的
console.log(reactive(state) === stateProxy); // true, 在同一个对象上调用reactive()会返回相同的代理对象
console.log(reactive(stateProxy) === stateProxy); // true, 在代理对象上调用reactive()会返回代理对象自身

使用reactive()声明的响应式变量，可以完美解决Vue2中响应式的缺陷：

• 动态添加property，并且保持响应式

  <script setup>
  import {reactive} from 'vue'
  let state = reactive({
      count: 0
  })
  function handleClick() {
      if (state.num === undefined) {
          state.num = 0;
      }
      state.num++;
  }
  </script>
  <template>
      <div>{{state.num}}</div>
      <!-- Vue3的模板可以不止一个根节点 -->
      <button @click="handleClick">点击</button>
  </template>

  运行结果：

  点击按钮，num递增，并在页面上显示

  由此可见，新增加的属性是响应式的。

• 根据索引修改数组项，或者修改数组长度，并保持响应式

  <script setup>
  import { reactive } from 'vue';
  const state = reactive({
    arr: [1, 2],
  })
  function increment() {
    state.arr[0]++; // 修改数组第一个元素：
    state.arr.length++; // 数组长度递增：
  }
  </script>
  <template>
    <div>
      <button @click="increment">点击</button>
      <div>修改数组第一个元素：{{state.arr[0]}}</div>
      <div>数组长度递增：{{state.arr.length}}</div>
    </div>
  </template>

  运行结果：

  点击按钮，修改数组第一个元素值，并递增数组长度，页面上更新数组项的值和数组长度

​ 由此可见，直接修改数组项和数组长度也是响应式的。

局限性

使用reactive()有没有局限性呢，其实是有的。主要有这么几点：

• 仅适合对象类型的数据，例如对象、数组、Map、Set，不适用string、number、boolean等基础类型

• 响应式系统是根据响应式对象的引用追踪其property的，如果替换一个响应式对象，则会导致初始响应式对象失去响应式连接；同时，将响应式对象的值重新赋值或者结构赋值，该变量都将会失去响应式，其更改并不会影响原有的响应式对象。

  let state = reactive({count: 0})
  let num = state.count; // num不具有响应式，其修改不会影响state.count
  let {count} = state; // count也不具有响应式，其修改不会影响state.count

为了解决reactive()的局限性，Vue3引入了ref()

使用ref

ref()的出现主要是解决reactive()的局限性，ref()可以创建任意类型的响应式对象：

// 实现原理伪代码
function ref(value) {
  const refObject = {
    get value() {
      track(refObject, 'value')
      return value
    },
    set value(newValue) {
      trigger(refObject, 'value')
      value = newValue
    }
  }
  return refObject
}

ref()会将传入的任何类型的值包装为带有.value属性的响应式对象，与reactive()生成的响应式对象类似。使用时也需要从vue中导入：

import {ref} from 'vue'
let num = ref(0) // 等价于{value: 0}
let str = ref('') // 等价于{value: ''}
let bool = ref(false) // 等价于{value: false}

使用ref()的好处：

• 可以响应式的替换.value的值，并且替换后会保持响应式
• 可以接收任意类型的值
• 可以解构赋值，也可以直接使用.value的值作为函数的参数，这些都是保持响应式的

由于ref()会包装一个.value属性，因此在使用时可能会存在解包的情况：

• 在模板中解包：如果作为顶层属性被访问时，可以不加.value，否则需要添加
• 在响应式对象中解包：作为响应式对象的属性，.value会自动解包。需要注意，如果是数组、Map等集合类型的响应式对象中，访问元素时.value不会自动解包

总结

• Vue3使用Proxy实现响应式，无需像Vue2遍历原数据对象的每一个属性，可以更加高效的实现响应式。
• Vue3中需要自己根据需要声明响应式对象，一般使用reactive()和ref()
• reactive()多用于创建数组、对象等响应式对象，并且在之后的使用中不会发生替换、解构、属性值作为函数参数等情况
• ref()可适用于任意类型，相当于是重新封装了一个对象，在替换、解构、属性值作为参数时都能保持响应式。
• ref建议用于基础数据类型的响应式声明，如果是声明一个数组或对象，实际上会调用reactive将其转换为Proxy，并赋值给.value