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

简介: 如果在项目中使用过Vue,那么一定会享受到其响应式带来的好处。作为前端三大框架之一的Vue,已经迭代出Vue2和Vue3两个大版本,Vue3是兼容Vue2的,但是为了区分,我们暂且将其看作是两个独立的框架。Vue3对响应式做了比较大的调整,工作原理上与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) {}
  })
...

结合图可能更容易理解:

data.png

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

  • 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
相关文章
|
4天前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
81 59
|
4天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
5天前
|
缓存 JavaScript 前端开发
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
该文章全面覆盖了Vue.js从基础知识到进阶原理的48个核心知识点,包括Vue CLI项目结构、组件生命周期、响应式原理、Composition API的使用等内容,并针对Vue 2与Vue 3的不同特性进行了详细对比与讲解。
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
|
4天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
12 1
|
4天前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
9 0
|
6天前
|
JavaScript API
再不学vue3就没有人要你了!速来围观vue3
这篇技术文章介绍了作者从最初对学习 Vue3 抵触到最终决定投入学习的心路历程,展示了 Vue3 相较于 Vue2 的诸多改进和新特性,如更优的性能、更小的代码体积及更佳的 TypeScript 支持。文章重点阐述了 Vue3 中 createApp 的使用变化、emits 机制、多事件处理、Fragment 的引入等重要功能升级。此外,还深入探讨了 Composition API 和 Options API 的区别,强调 Composition API 在代码组织和逻辑复用方面的优势,并给出了在不同项目规模中选择合适 API 的建议。
16 0
|
6天前
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
该文章详细介绍了如何使用Vue3结合TypeScript来开发全局Header组件和列表数据渲染组件ColumnList,并提供了从设计到实现的完整步骤指导。
|
6天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
4天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
1天前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项,在组件创建前调用,作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数,内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性,`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子,并提供类似 `data`、`computed` 和 `methods` 的功能,支持逻辑复用和 TypeScript 类型定义。
19 11
下一篇
无影云桌面