理解VUE响应式原理[通俗易懂]

理解VUE响应式原理[通俗易懂]1、响应式原理基础响应式原理基础是基于Object.defineProperty(obj,prop,descriptor),descriptor里面可以定义get和set方法,可以在获取属性值事触发get方法(可以收集依赖),设置属性值时触发set方法(更新依赖)。扩展:上面是vue2.0的基础原理,vue3.0的基础原理是:2、核心对象:Dep与WatcherDep:vue在data里申明的每一个属性都会生成一个Dep的实例对象,De…

大家好,又见面了,我是你们的朋友全栈君。

1、响应式原理基础

        响应式基本原理是基于Object.defineProperty(obj, prop, descriptor), descriptor里面可以定义get和set方法,可以在获取属性值事触发get方法(可以收集依赖),设置属性值时触发set方法(更新依赖)。

        扩展:上面是vue2.0的响应式基本原理,vue3.0的基本原理是Proxy,可以监听属性的get和set方法,监听属性的添加和删除等等,比Object.defineProperty能力更强,但是不兼容IE11。

2、核心对象:Dep与Watcher

        Dep: vue在data里申明的每一个属性都会生成一个Dep的实例对象,Dep.subs存储着当该属性变化时需要去更新的Watcher;

        Watcher: 有3种情况会生成Watcher的实例对象,分别为:

  1.  定义在computed里的计算属性;
  2. 在watch里写的监听函数;
  3. 组件的渲染Watcher;

3、收集依赖与更新依赖

3.1 收集依赖

        将Watcher的实例对象w分发到它所依赖的属性的Dep中,过程如下:

  1. 将Dep.target = 当前的Watcer 的实例对象w;
  2. w执行定义的函数(即在computed/watch写的函数);
  3. 执行函数的过程如果使用data里定义的属性,则会触发属性的get方法,get方法中Dep实例对象dep会将Dep.target中存储的w放入到dep.subs数组中,完成依赖收集。

    说明:Dep.target为当前Watcer的实例对象

3.2 更新依赖

        当修改我们申明的某个属性时,会触发属性的set方法,set方法会将dep.subs数组中收集的Watcher实例对象进行更新,即触发我们定义在computed和watch里面的函数。

4、源码调试

4.1 测试的页面代码

<template>
  <div>
    <div>a:<input v-model="a" /></div>
    <div>c:{
  
  { c }}</div>
    <div>b:<input v-model="b" /></div>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      a: '',
      b: ''
    }
  },
  computed: {
    c() {
      return 'source from ' + this.a;
    }
  },
  watch: {
    b() {
      console.log('b changed');
    }
  }
};
</script>

上面的代码vue初始化后会生成如下几个对象:

1、对象说明

属性a和b对应的Dep实例对象(收集a、b改变需要更新的Watcher):depA、depB;

页面渲染函数生成对应的Watcher实例对象updateWatcher;

computed属性c生成对应的Watcher实例对象:watcherC;

watch监听属性b生成对应的Watcher实例对象:watcherB;

2、Dep与Watcher的关系

a、b变化页面需要重新渲染,所以updateWatcher存在于depA和depB的subs中;

计算属性c依赖属性a的变化更更新,所以watcherC存在于depA的subs中;

b的变化会触发定义watch 里b的监听函数,所以watcherB存在于depB的subs中;

3、最终的关系结果

最终属性a收集的依赖 depA.subs = [ updateWatcher,  watcherC];

最终属性b收集的依赖 depB.subs = [ updateWatcher,  watcherB];

4.2  源码调试

        找到源码文件:node_modules\vue\dist\vue.runtime.esm.js;

        4.2.1 主要涉及如下几个函数:

        1、收集依赖的入口函数:initState(页面初始化时执行);

        初始化顺序是先data–>computed–>watch:原因是computed依赖data, watch监听data和computed里的属性,被依赖的需要先初始化。

理解VUE响应式原理[通俗易懂]

        2、初始化computed和watch时,生成Watcher实例化对象

              先执行Watcher.get函数,将Dep.target = 当前Watcher实例化对象

理解VUE响应式原理[通俗易懂]

理解VUE响应式原理[通俗易懂]

        触发收集依赖

理解VUE响应式原理[通俗易懂]

执行计算属性里面的函数,如果访问到data中的某个属性时,会触发data属性的get方法,触发依赖收集:

 理解VUE响应式原理[通俗易懂]

 当修改这个属性时会触发set方法,会触发更新dep.subs里面watcher对象

理解VUE响应式原理[通俗易懂]

最终触发Watcher的更新函数,将待更新的watcher放入队列中:

理解VUE响应式原理[通俗易懂]

4.2.2 computed属性特别说明

        computed属性在初始化initComputed之前还有一次更早的初始化,在调用createComponent函数生成vnode组件时,调用了Vue.extend –》defineComputed方法,并在组件的原型Prototype上添加computed里的计算属性,并声明为响应式属性,为何这样设计,原因不知,如有小伙伴知道,还请告知,谢谢

理解VUE响应式原理[通俗易懂]

理解VUE响应式原理[通俗易懂]

理解VUE响应式原理[通俗易懂]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132033.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • dsp McBSP模块「建议收藏」

    dsp McBSP模块「建议收藏」McBSP,是多通道缓冲串行接口。在DSP嵌入式系统中,常常用来连接音频编码解码芯片,串行AD/DA器件等。具有如下特性:全双工;两个数据缓冲寄存器;独立的发送和接收帧和时钟;多达129通道的发送和接收等等。McBSP结构图如下:首先对引脚进行介绍:CLKR:接收时钟CLKX:发送时钟CLKS:外部时钟源DR“:串行数据接收DX:串行数据发送

  • 【Unity开发小技巧】打包IOS版本须知流程(移动)

    【Unity开发小技巧】打包IOS版本须知流程(移动)Unity是个开放性的平台,打包时也可以选择多种打包类型,几乎包含了所有的平台,目前主流Android,iOS平台,Android平台可以直接使用Unity自行打包,但iOS平台需要借助Mac电脑进行打包,本博客就iOS打包进行一个简单的说明,从开发到上线AppStore的所有流程。准备Mac电脑一台,苹果开发者账号一个一:unity打包Ios,Xcode工程打开Mac上的Unity,假设现在已经是开发完毕的状态,直接进行打包打开之后直接点File-BuildSettings然后将你的当..

  • Android浏览器多窗口webview界面截屏心得「建议收藏」

    Android浏览器多窗口webview界面截屏心得「建议收藏」做Android浏览器多窗口的时候,需要使用到浏览器的webview快照,当前有三种方法,都尝试过,对第二种方法做了一点改进,整理说一下他们各自的优势:

  • Android 六大布局之 GridLayout(网格布局)「建议收藏」

    Android 六大布局之 GridLayout(网格布局)「建议收藏」目录GridLayout(网格布局)简述计算器布局的实现GridLayout(网格布局)简述GridLayout布局是Android4.0以后引入的新布局,和TableLayout(表格布局)有点类似,不过它功能更多,也更加好用可以自己设置布局中组件的排列方式 可以自定义网格布局有多少行,多少列 可以直接设置组件位于某行某列 可以设置组件横跨几行或者几列…

  • 项目管理复习题

    项目管理复习题蓝字位注释,红字为错误原因,紫字为重点本复习题链接:https://pan.baidu.com/s/1ZJ4l6mKxAt9dqhw0Qa58xA提取码:j4jz第一章一、填空题1.敏捷模型包括(4)个核心价值,对应(12)个敏捷原则。2.项目管理包括(启动过程组)、(计划过程组)、(执行过程组)、(控制过程组)、(收尾过程组)5个过程组。二、判断题1、搬家属于项目。(√)2、项目是为了创造一个唯一的产品或提供一个唯一的服务而进行的永久性的努力。(×)3、过程管理就是.

  • pycharm突然很卡_pycharm启动慢

    pycharm突然很卡_pycharm启动慢使用pycharm时常出现 theIDEisrunninglowonmemory的问题,表示pycharm这款IDE使用内存不足,需要在系统内存充足的情况下扩充IDEmemory。首先,打开File—&gt;Appearance—&gt;WindowsOptions—&gt;选中showmemmoryindicator—&gt;OK右下角会出现 …

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号