文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3响应式机制源码分析

2023-07-06 10:53

关注

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

什么是响应式

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

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

let count = 1let double = count * 2count = 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 的变化而变化的感觉,这就算是响应式的雏形了

Vue3响应式机制源码分析


响应式原理

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

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

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

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

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

delete obj.countconsole.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 = 2console.log(obj.count,double)delete proxy.count// 删除属性后,我们打印log时,输出的结果就会是 undefined NaNconsole.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 = 2watchEffect(()=>{    console.log('数据被修改了',obj.count,double.value)})

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

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

let getDouble = n => n * 2let _value = 1double = getDouble(_value)let count = {    get value() {        return _value    },    set value(val) {        _value = val        double = getDouble(_value)    }}console.log(count.value,double)count.value = 2console.log(count.value,double)

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

实现原理definePropertyProxyvalue setter
实际场景Vue 2 响应式Vue 3 reactiveVue 3 ref
优势兼容性基于proxy实现真正的拦截实现简单
劣势数组和属性删除等拦截不了兼容不了 IE11只拦截了 value 属性
实际应用Vue 2Vue 3 复杂数据结构Vue 3 简单数据结构

定制响应式数据

简单入门响应式的原理后,接下来我们学习一下响应式数据在使用的时候的进阶方式;我们看下使用 <script setup> 重构之后的 todolist 的代码;这段代码使用 watchEffect,数据变化之后会把数据同步到 localStorage 之上,这样我们就实现了 todolist 和本地存储的同步

import { ref, watchEffect, computed } from "vue";let title = ref("");let todos = ref(JSON.parse(localStorage.getItem('todos')||'[]'));watchEffect(()=>{    localStorage.setItem('todos',JSON.stringify(todos.value))})function addTodo() {    todos.value.push({        title: title.value,        done: false,    });    title.value = "";}

更进一步,我们可以直接抽离一个 useStorage 函数,在响应式的基础之上,把任意数据响应式的变化同步到本地存储;我们先看下面的这段代码,ref 从本地存储中获取数据,封装成响应式并且返回,watchEffect 中做本地存储的同步,useStorage 这个函数可以抽离成一个文件,放在工具函数文件夹中

function useStorage(name, value=[]){    let data = ref(JSON.parse(localStorage.getItem(name)||'[]'))    watchEffect(()=>{        localStorage.setItem(name,JSON.stringify(data.value))    })    return data}

在项目中我们使用下面代码的写法,把 ref 变成 useStorage,这也是 Composition API 最大的优点,也就是可以任意拆分出独立的功能

let todos = useStorage('todos',[])function addTodo() {    ...code}

现在,你应该已经学会了在 Vue 内部进阶地使用响应式机制,去封装独立的函数;在后续的实战应用中,我们也会经常对通用功能进行封装;如下图所示,我们可以把日常开发中用到的数据,无论是浏览器的本地存储,还是网络数据,都封装成响应式数据,统一使用响应式数据开发的模式;这样,我们开发项目的时候,只需要修改对应的数据就可以了

Vue3响应式机制源码分析

基于响应式的开发模式,我们还可以按照类似的原理,把我们需要修改的数据,都变成响应式;比如,我们可以在 loading 状态下,去修改浏览器的小图标 favicon;和本地存储类似,修改 favicon 时,我们需要找到 head 中有 icon 属性的标签

在下面的代码中,我们把对图标的对应修改的操作封装成了 useFavicon 函数,并且通过 ref 和 watch 的包裹,我们还把小图标变成了响应式数据

import {ref,watch} from 'vue'export default function useFavicon( newIcon ) {    const favicon = ref(newIcon)    const updateIcon = (icon) => {        document.head        .querySelectorAll(`link[rel*="icon"]`)        .forEach(el => el.href = `${icon}`)    }watch( favicon,    (i) => {        updateIcon(i)    })    return {favicon,reset}}

这样在组件中,我们就可以通过响应式的方式去修改和使用小图标,通过对 faivcon.value 的修改就可以随时更换网站小图标;下面的代码,就实现了在点击按钮之后,修改了网页的图标为 geek.png 的操作

<script setup>    import useFavicon from './utils/favicon'    let {favicon} = useFavicon()    function loading(){        favicon.value = '/geek.png'    }</script><template>    <button @click="loading">123</button></template>

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 响应式数据和函数就可以很轻松地在项目中实现全屏功能

<template>    <h3 @click="toggle">click</h3></template><script setup>import { useFullscreen } from '@vueuse/core'const { isFullscreen, enter, exit, toggle } = useFullscreen()</script>

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

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯