首页 > 编程语言 >【Vue2.x源码系列06】计算属性computed原理

【Vue2.x源码系列06】计算属性computed原理

时间:2023-04-19 09:37:27浏览次数:45  
标签:06 computed 渲染 get vm watcher 源码 计算 属性

上一章 Vue2异步更新和nextTick原理,我们介绍了 JavaScript 执行机制是什么?nextTick源码是如何实现的?以及Vue是如何异步更新渲染的?

本章目标

  • 计算属性是如何实现的?
  • 计算属性缓存原理 - 带有dirty属性的watcher
  • 洋葱模型的应用

初始化

在 Vue初始化实例的过程中,如果用户 options选项中存在计算属性时,则初始化计算属性

// 初始化状态
export function initState(vm) {
  const opts = vm.$options // 获取所有的选项

  // 初始化数据
  if (opts.data) { initData(vm) }

  // 初始化计算属性
  if (opts.computed) { initComputed(vm) }
}

我们给每个计算属性都创建了一个 Watcher实例,标识为lazy:true, 在初始化watcher时不会立即执行 get方法(计算属性方法)

并将计算属性watcher 都保存到了 Vue实例上,让我们可以在后续的 getter方法中通过 vm获取到当前的计算属性watcher

然后使用Object.defineProperty去劫持计算属性

// 初始化计算属性
function initComputed(vm) {
  const computed = vm.$options.computed
  const watchers = (vm._computedWatchers = {}) // 将每个计算属性对应的watcher 都保存到 vm上
  for (let key in computed) {
    let userDef = computed[key]

    // 兼容不同写法 函数方式 和 对象getter/setter方式
    let fn = typeof userDef === 'function' ? userDef : userDef.get

    // 给每个计算属性都创建一个 watcher,并标识为 lazy,不会立即执行 get-fn
    watchers[key] = new Watcher(vm, fn, { lazy: true })

    // 劫持计算属性getter/setter
    defineComputed(vm, key, userDef)
  }
}

// 劫持计算属性
function defineComputed(target, key, userDef) {
  const setter = userDef.set || (() => {})

  Object.defineProperty(target, key, {
    get: createComputedGetter(key),
    set: setter,
  })
}

当我们劫持到计算属性被访问时,根据 dirty 值去决定是否更新 watcher缓存值

然后让自己依赖的属性(准确来说是订阅的所有dep)都去收集上层watcher,即 Dep.target(可能是计算属性watcher,也可能是渲染watcher)

// 劫持计算属性的访问
function createComputedGetter(key) {
  return function () {
    const watcher = this._computedWatchers[key] // this就是 defineProperty 劫持的targer。获取到计算属性对应的watcher

    // 如果是脏的,就去执行用户传入的函数
    if (watcher.dirty) {
      watcher.evaluate() // 重新求值后 dirty变为false,下次就不求值了,走缓存值
    }

    // 当前计算属性watcher 出栈后,还有渲染watcher 或者其他计算属性watcher,我们应该让当前计算属性watcher 订阅的 dep,也去收集上一层的watcher 即Dep.target(可能是计算属性watcher,也可能是渲染watcher)
    if (Dep.target) {
      watcher.depend()
    }

    // 返回watcher上的值
    return watcher.value
  }

Dep

  • Dep.target:当前渲染的 watcher,静态变量
  • stack:存放 watcher 的栈。 利用 pushTarget、popTarget 这两个方法做入栈出栈操作
// 当前渲染的 watcher
Dep.target = null

// 存放 watcher 的栈
let stack = []
// 当前 watcher 入栈, Dep.target 指向 当前 watcher
export function pushTarget(watcher) {
  stack.push(watcher)
  Dep.target = watcher
}
// 栈中最后一个 watcher 出栈,Dep.target指向栈中 最后一个 watcher,若栈为空,则为 undefined
export function popTarget() {
  stack.pop()
  Dep.target = stack[stack.length - 1]
}

计算属性Watcher

在初始化Vue实例时,我们会给每个计算属性都创建一个对应watcher(我们称之为计算属性watcher,除此之外还有 渲染watcher侦听器watcher ),他有一个 value 属性用于缓存计算属性方法的返回值。

默认标识 lazy: true,懒的,代表计算属性watcher,创建时不会立即执行 get方法

默认标识 dirty: true,脏的,当我们劫持到计算属性访问时,如果是脏的,我们会通过watcher.evaluate重新计算 watcher 的 value值 并将其标识为干净的;如果是干净的,则直接取 watcher 缓存值

depend 方法,会让计算属性watcher 订阅的dep去收集上层watcher,可能是渲染watcher,也可能是计算属性watcher(计算属性嵌套的情况),实现洋葱模型的核心方法

update 方法,当计算属性依赖的对象发生变化时,会触发dep.notify派发更新 并 调用 update 方法,只需更新 dirty 为 true即可。我们会在后续的渲染watcher 更新时,劫持到计算属性的访问操作,并通过 watcher.evaluate重新计算其 value值

class Watcher {
  constructor(vm, fn, options) {
    // 计算属性watcher 用到的属性
    this.vm = vm
    this.lazy = options.lazy // 懒的,不会立即执行get方法
    this.dirty = this.lazy // 脏的,决定重新读取get返回值 还是 读取缓存值

    this.value = this.lazy ? undefined : this.get() // 存储 get返回值
  }

  // 重新渲染
  update() {
    console.log('watcher-update')
    if (this.lazy) {
      // 计算属性依赖的值发生改变,触发 setter 通知 watcher 更新,将计算属性watcher 标识为脏值即可
      // 后面还会触发渲染watcher,会走 evaluate 重新读取返回值
      this.dirty = true
    } else {
      queueWatcher(this) // 把当前的watcher 暂存起来,异步队列渲染
      // this.get(); // 重新渲染
    }
  }

  // 计算属性watcher为脏时,执行 evaluate,并将其标识为干净的
  evaluate() {
    this.value = this.get() // 重新获取到用户函数的返回值
    this.dirty = false
  }
  
  // 用于洋葱模型中计算属性watcher 订阅的dep去 depend收集上层watcher 即Dep.target(可能是计算属性watcher,也可能是渲染watcher)
  depend() {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }
}

缓存原理

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。 缓存原理如下:

在初始化计算属性时,我们使用Object.defineProperty劫持了计算属性,并做了一些 getter/setter操作

计算属性watcher 有一个 dirty脏值属性,默认为 true

当我们劫持到计算属性被访问时,如果 dirty 为 true,则执行 evaluate 更新 watcher 的 value值 并 将 dirty 标识为 false;如果为 false,则直接取 watcher 的缓存值

当计算属性依赖的属性变化时,会通知 watcher 调用 update方法,此时我们将 dirty 标识为 true。这样再次取值时会重新进行计算

洋葱模型

在初始化Vue实例时,我们会给每个计算属性都创建一个对应的懒的watcher,不会立即调用计算属性方法

当我们访问计算属性时,会通过watcher.evaluate()让其直接依赖的属性去收集当前的计算属性watcher,并且还会通过watcher.depend()让其订阅的所有 dep都去收集上层watcher,可能是渲染watcher,也可能是计算属性watcher(如果存在计算属性嵌套计算属性的话)。这样依赖的属性发生变化也可以让视图进行更新

让我们一起来分析下计算属性嵌套的例子

<p>{{fullName}}</p>

computed: {
  fullAge() {
    return '今年' + this.age
  },
  fullName() {
    console.log('run')
    return this.firstName + ' ' + this.lastName  + ' ' + this.fullAge
  },
}
  1. 初始化组件时,渲染watcher 入栈
    • stack:[渲染watcher]
  2. 当执行 render方法并初次访问 fullName时,执行computed watcher1.evaluate()watcher1入栈
    • stack:[渲染watcher, watcher1]
  3. 当执行watcher1的 get方法时,其直接依赖的 firstName 和 lastName 会去收集当前的 watcher1;然后又访问 fullAge 并执行computed watcher2.evaluate()watcher2入栈
    • watcher1:[firstName, lastName]
    • stack:[渲染watcher, watcher1, watcher2]
  4. 执行watcher2的 get方法时,其直接依赖的 age 会去收集当前的 watcher2
    • watcher2:[age]
  5. watcher2出栈,并执行watcher2.depend(),让watcher2订阅的 dep再去收集当前watcher1
    • stack:[渲染watcher, watcher1]
    • watcher1:[firstName, lastName, age]
  6. watcher1出栈,执行watcher1.depend(),让watcher1订阅的 dep再去收集当前的渲染watcher
    • stack:[渲染watcher]
    • 渲染watcher:[firstName, lastName, age]

标签:06,computed,渲染,get,vm,watcher,源码,计算,属性
From: https://www.cnblogs.com/burc/p/17330998.html

相关文章

  • java学习日记20230414-HashSet源码
    HashSetHashSet底层是HashMap添加一个元素时,先得到Hash值,会转化成索引值;找到存储数据表table,看这个索引位置是否存放元素;如果没有直接加入如果有,调用equals比较,如果相同放弃添加,如果不同,则添加到最后在java8中,如果一条链表的元素个数到达TREEIFY_THRESHOLD(默认是8)(table表......
  • 【uniapp】【外包杯】学习笔记day06 | 微信小程序导航栏的制作并推送的到码云【黑】
    先创建分支 格式化快捷键shift+alt+f ......
  • leetcode-206反转链表
    反转链表方法一:迭代法/***Definitionforsingly-linkedlist.*structListNode{*intval;*ListNode*next;*ListNode():val(0),next(nullptr){}*ListNode(intx):val(x),next(nullptr){}*ListNode(intx,ListNode*next)......
  • 源码共读|yocto-queue 队列 链表
    前言Yocto-queue是一种允许高效存储和检索数据的数据结构。它是一种队列类型,是一个元素集合,其中的项被添加到一端并从另一端移除。它被设计用来操作数据量很大的数组,在你需要使用大量的Array.push、Array.shift操作时,Yocto-queue有更好的性能表现。仓库地址:sindresorhus/yo......
  • UVA11806 Cheerleaders
    你有一个n×m的网格图,现在你要将K个人放在网格中,满足一下条件:网格图的四个边都至少有一个人。每个格子上不能有两个人。每个人必须都有位置。注意:四个角的人可以同时算作在两个边上  容斥原理   J=0时就是allAnswer#include<iostream>#include<cstri......
  • 【Python毕业设计】基于Python+Flask+MySQL的学生信息管理系统(附完整源码)
    1、项目说明基于python+Flask+mysql的学生信息管理系统项目实战项目需要安装pycharm专业版,mysql数据库以及项目所需的所有模块创建数据库名称db_online_notes,然后执行sql文件生成数据表和数据项目需要安装flask,pymysql以及其他的一些模块安装命令如下:pipinstall-ihttps://......
  • vue2源码-八、依赖收集的过程
    依赖收集的过程前言使用真实节点替换原始节点,主要涉及以下步骤:1.新老节点的更新方案。2.虚拟节点与真实节点映射。3.实现新老节点的替换。依赖收集已经完成了Vue的两大核心部分:响应式数据和数据渲染,即完成了整个Vue的初始化流程:当newVue()时,执行_init初始化,通过moun......
  • OpenHarmony源码解析之系统服务管理子系统
    1预备知识Linux中主要的IPC机制有:管道(pipe)、信号(signal)、信号量(semophore)、消息队列(Message)、共享内存(ShareMemory)、套接字(Socket)等。OpenHarmony基于binder驱动封装了一套ipc机制(foundation\communication\ipc)用于实现设备内的跨进程通信。Binder机制通常采用客户端-服务器(Cli......
  • pandas读取Excel核心源码剖析,面向过程仿openpyxl源码实现Excel数据加载
    今天我们将研究pandas如何使用openpyxl引擎读取xlsx格式的Excel的数据,并考虑以面向过程的形式简单的自己实现一下。截止目前本人所使用的pandas和openpyxl版本为:pandas:1.5.2openpyxl:3.0.10今天所有的测试全部基于以下文件:pandas的read_excel核心代码这里我使用pycharm工具对以下代......
  • 客服系统vue源码聊天界面,ajax上传图片功能实现
    在线客服系统的聊天界面上,有上传图片按钮功能,使用js实现ajax上传图片功能html部分,有一个点击事件<divclass="iconExtendBtn"@click="uploadImg"><divclass="elIconel-icon-picture"></div>......