Vue3响应式机制源码分析

本篇内容介绍了“Vue3响应式机制源码分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联建站2013年至今，先为安州等服务建站，安州等地企业，进行企业商务咨询服务。为安州企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

什么是响应式

响应式一直都是 Vue 的特色功能之一；与之相比，JavaScript 里面的变量，是没有响应式这个概念的；你在学习 JavaScript 的时候首先被灌输的概念，就是代码是自上而下执行的；

我们看下面的代码，代码在执行后，打印输出的两次 double 的结果也都是 2；即使 我们修改了代码中 count 的值后，double 的值也不会有任何改变

let count = 1
let double = count * 2
count = 2

double 的值是根据 count 的值乘以二计算而得到的，如果现在我们想让 doube 能够跟着 count 的变化而变化，那么我们就需要在每次 count 的值修改后，重新计算 double

比如，在下面的代码，我们先把计算 doube 的逻辑封装成函数，然后在修改完 count 之 后，再执行一遍，你就会得到最新的 double 值

let count = 1
// 计算过程封装成函数
let getDouble = n=>n*2 //箭头函数
let double = getDouble(count)
count = 2
// 重新计算double ，这里我们不能自动执行对double的计算
double = getDouble(count)

实际开发中的计算逻辑会比计算 doube 复杂的多，但是都可以封装成一个函数去执行;下 一步，我们要考虑的是，如何让 double 的值得到自动计算

如果我们能让 getDouble 函数自动执行，也就是如下图所示，我们使用 JavaScript 的某种机制，把 count 包裹一层，每当对 count 进行修改时，就去同步更新 double 的值，那 么就有一种 double 自动跟着 count 的变化而变化的感觉，这就算是响应式的雏形了

响应式原理

响应式原理是什么呢？Vue 中用过三种响应式解决方案，分别是 defineProperty、Proxy 和 value setter我们首先来看 Vue 2 的 defineProperty API

这里我结合一个例子来说明，在下面的代码中，我们定义个一个对象 obj，使用 defineProperty 代理了 count 属性；这样我们就对 obj 对象的 value 属性实现了拦截，读取 count 属性的时候执行 get 函数，修改 count 属性的时候执行 set 函数，并在 set  函数内部重新计算了 double

let getDouble = n=>n*2
let obj = {}
let count = 1
let double = getDouble(count)
Object.defineProperty(obj,'count',{
    get(){
        return count
    },
    set(val){
        count = val
        double = getDouble(val)
    }
})
console.log(double) // 打印2
obj.count = 2
console.log(double) // 打印4 有种自动变化的感觉

这样我们就实现了简易的响应式功能，在课程的第四部分，我还会带着你写一个更完善的响应式系统

但 defineProperty API 作为 Vue 2 实现响应式的原理，它的语法中也有一些缺陷；比如在下面代码中，我们删除 obj.count 属性，set 函数就不会执行，double 还是之前的数值；这也是为什么在 Vue 2 中，我们需要 $delete 一个专门的函数去删除数据

delete obj.count
console.log(double) // doube还是4

Vue 3 的响应式机制是基于 Proxy 实现的；就 Proxy 这个名字来说，你也能看出来这是代理的意思，Proxy 的重要意义在于它解决了 Vue 2 响应式的缺陷

我们看下面的代码，在其中我们通过 new Proxy 代理了 obj 这个对象，然后通过 get、set 和 deleteProperty 函数代理了对象的读取、修改和删除操作，从而实现了响应式的功能

let proxy = new Proxy(obj,{
    get : function (target,prop) {
        return target[prop]
    },
    set : function (target,prop,value) {
        target[prop] = value;
        if(prop==='count'){
            double = getDouble(value)
    }
},
deleteProperty(target,prop){
    delete target[prop]
    if(prop==='count'){
        double = NaN
    }
   }
})
console.log(obj.count,double)
proxy.count = 2
console.log(obj.count,double)
delete proxy.count
// 删除属性后，我们打印log时，输出的结果就会是 undefined NaN
console.log(obj.count,double)

我们从这里可以看出 Proxy 实现的功能和 Vue 2 的 definePropery 类似，它们都能够在用户修改数据的时候触发 set 函数，从而实现自动更新 double 的功能。而且 Proxy 还完善了几个 definePropery 的缺陷，比如说可以监听到属性的删除

Proxy 是针对对象来监听，而不是针对某个具体属性，所以不仅可以代理那些定义时不存在的属性，还可以代理更丰富的数据结构，比如 Map、Set 等，并且我们也能通过 deleteProperty 实现对删除操作的代理

当然，为了帮助你理解 Proxy，我们还可以把 double 相关的代码都写在 set 和 deleteProperty 函数里进行实现，在课程的后半程我会带你做好更完善的封装;比如下面代码中，Vue 3 的 reactive 函数可以把一个对象变成响应式数据，而 reactive 就是基于 Proxy 实现的;我们还可以通过 watchEffect，在 obj.count 修改之后，执行数据的打印

import {reactive,computed,watchEffect} from 'vue'
let obj = reactive({
    count:1
})
let double = computed(()=>obj.count*2)
obj.count = 2
watchEffect(()=>{
    console.log('数据被修改了',obj.count,double.value)
})

有了 Proxy 后，响应式机制就比较完备了；但是在 Vue 3 中还有另一个响应式实现的逻辑，就是利用对象的 get 和 set 函数来进行监听，这种响应式的实现方式，只能拦截某一个属性的修改，这也是 Vue 3 中 ref 这个 API 的实现

在下面的代码中，我们拦截了 count 的 value 属性，并且拦截了 set 操作，也能实现类似的功能

let getDouble = n => n * 2
let _value = 1

double = getDouble(_value)
let count = {
    get value() {
        return _value
    },
    set value(val) {
        _value = val
        double = getDouble(_value)
    }
}

console.log(count.value,double)
count.value = 2
console.log(count.value,double)

三种实现原理的对比表格如下，帮助你理解三种响应式的区别

定制响应式数据

简单入门响应式的原理后，接下来我们学习一下响应式数据在使用的时候的进阶方式；我们看下使用

Vueuse 工具包

我们自己封装的 useStorage，算是把 localStorage 简单地变成了响应式对象，实现数据的更新和localStorage 的同步；同理，我们还可以封装更多的类似 useStorage 函数的其他 use 类型的函数，把实际开发中你用到的任何数据或者浏览器属性，都封装成响应式数据，这样就可以极大地提高我们的开发效率

Vue 社区中其实已经有一个类似的工具集合，也就是 VueUse，它把开发中常见的属性都封装成为响应式函数

VueUse 趁着这一波 Vue 3 的更新，跟上了响应式 API 的潮流；VueUse 的官方的介绍说这是一个 Composition API 的工具集合，适用于 Vue 2.x 或者 Vue 3.x，用起来和 React Hooks 还挺像的

在项目目录下打开命令行里，我们输入如下命令，来进行 VueUse 插件的安装：

npm install @vueuse/core

然后，我们就先来使用一下 VueUse；在下面这段代码中，我们使用 useFullscreen 来返回全屏的状态和切换全屏的函数；这样，我们就不需要考虑浏览器全屏的 API，而是直接使用 VueUse 响应式数据和函数就可以很轻松地在项目中实现全屏功能

import { useFullscreen } from '@vueuse/core'
const { isFullscreen, enter, exit, toggle } = useFullscreen()

useFullscreen 的封装逻辑和 useStorage 类似，都是屏蔽了浏览器的操作，把所有我们需要用到的状态和数据都用响应式的方式统一管理，VueUse 中包含了很多我们常用的工具函数，我们可以把网络状态、异步请求的数据、动画和事件等功能，都看成是响应式的数据去管理。

“Vue3响应式机制源码分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！