未加星标

computed的原理

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

这篇文章分享一下computed计算属性的实现原理。首先分享一个工作中遇到的code review问题!利用3分钟先看一个例子:

<template> <div> <p>valueText:{{ valueText }}</p> <p>xxx:{{ xxx }}</p> <button @click="changeValue">改变 abc 和 xxx 的值</button> </div> </template> <script> export default { data () { return { xxx: false } }, computed: { valueText () { return this.abc && this.xxx; } }, created () { this.abc = false; }, methods:{ changeValue () { this.abc = true; this.xxx = true; } } } </script> 复制代码

按钮点击前后分别输出什么?


computed的原理
computed的原理

上面的答案是不是如你所想呢?

又或者有为什么点击后 valueText 不是 true 的疑问?如果有,就继续往下通过源码分析computed的原理!

// new Vue之后就调用_init方法 Vue.prototype._init = function (options?: Object) { const vm: Component = this ...... vm._self = vm // 初始化生命周期 initLifecycle(vm) // 初始化事件中心 initEvents(vm) // 初始化渲染 initRender(vm) callHook(vm, 'beforeCreate') // 初始化注入 initInjections(vm) // resolve injections before data/props // 初始化状态 // 初始化 props、data、methods、watch、computed 等属性 initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') ...... } } 复制代码

在Vue实例初始化时,注意到有一个 initState 的方法。这个方法就是初始化 props、data、methods、watch、computed 等属性。进入函数体里面继续看:

export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) // 初始化props if (opts.methods) initMethods(vm, opts.methods) // 初始化事件 if (opts.data) { initData(vm) // 初始化data } else { observe(vm._data = {}, true /* asRootData */) } if (opts.computed) initComputed(vm, opts.computed) // 初始化computed if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) } } 复制代码

非常简单,就是对一些属性做初始化调用,本文重点是 computed !好,继续看 initComputed 的内容:

const computedWatcherOptions = { computed: true } // 定义computed属性 function initComputed (vm: Component, computed: Object) { // 先声明一个computedWatcher空对象 const watchers = vm._computedWatchers = Object.create(null) // 判断是不是服务端渲染 const isSSR = isServerRendering() // 遍历computed中的对象 for (const key in computed) { const userDef = computed[key] // 获取属性的getter方法,这里有两种情况:是函数就直接获取,是对象就获取get值 const getter = typeof userDef === 'function' ? userDef : userDef.get if (process.env.NODE_ENV !== 'production' && getter == null) { warn( `Getter is missing for computed property "${key}".`, vm ) } // 非服务端渲染,new一个computed watcher实例。 if (!isSSR) { watchers[key] = new Watcher( vm, getter || noop, noop, computedWatcherOptions ) } // 不存在Vue实例中,就去定义 if (!(key in vm)) { defineComputed(vm, key, userDef) } else if (process.env.NODE_ENV !== 'production') { // 开发环境下判断computed的key不能跟data或props同名 if (key in vm.$data) { warn(`The computed property "${key}" is already defined in data.`, vm) } else if (vm.$options.props && key in vm.$options.props) { warn(`The computed property "${key}" is already defined as a prop.`, vm) } } } } 复制代码

到这里,我们先不去深入 computed watcher 实例的声明,先看 defineComputed :

export function defineComputed ( target: any, key: string, userDef: Object | Function ) { // 不是服务端渲染shouldCache为true const shouldCache = !isServerRendering() // 如果是用户定义的函数 if (typeof userDef === 'function') { sharedPropertyDefinition.get = shouldCache ? createComputedGetter(key) : userDef sharedPropertyDefinition.set = noop // 不是函数,也就是对象,那么获取用户定义的getter和setter方法 } else { sharedPropertyDefinition.get = userDef.get ? shouldCache && userDef.cache !== false ? createComputedGetter(key) : userDef.get : noop sharedPropertyDefinition.set = userDef.set ? userDef.set : noop } if (process.env.NODE_ENV !== 'production' && sharedPropertyDefinition.set === noop) { sharedPropertyDefinition.set = function () { warn( `Computed property "${key}" was assigned to but it has no setter.`, this ) } } Object.defineProperty(target, key, sharedPropertyDefinition) } 复制代码

sharedPropertyDefinition 结构如下:

const sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop } 复制代码

sharedPropertyDefinition 的 get 函数也就是 createComputedGetter(key) 的结果:

// 创建计算属性的getter方法 function createComputedGetter (key) { return function computedGetter () { const watcher = this._computedWatchers && this._computedWatchers[key] if (watcher) { watcher.depend() // 收集依赖 return watcher.evaluate() // 计算属性的值 } } } 复制代码

当计算属性被调用时便会执行 get 访问函数,从而关联上观察者对象 watcher 然后执行 wather.depend() 收集依赖和 watcher.evaluate() 计算求值。

OK,下面我们回到 computed watcher 的实例化:

watchers[key] = new Watcher( vm, getter || noop, noop, computedWatcherOptions ) 复制代码

这里的参数意义都比较清晰。 vm 指的 Vue 实例, getter 指的是计算属性的 getter 方法, computedWatcherOptions 即表明这是一个 computed watcher 。

export default class Watcher { constructor ( vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, isRenderWatcher?: boolean ) { this.vm = vm if (isRenderWatcher) { vm._watcher = this } vm._watchers.push(this) // options if (options) { this.deep = !!options.deep this.user = !!options.user this.computed = !!options.computed this.sync = !!options.sync this.before = options.before } else { this.deep = this.user = this.computed = this.sync = false } this.cb = cb this.id = ++uid // uid for batching this.active = true this.dirty = this.computed // for computed watchers this.deps = [] this.newDeps = [] this.depIds = new Set() this.newDepIds = new Set() this.expression = process.env.NODE_ENV !== 'production' ? expOrFn.toString() : '' // 对于computed watcher这里是一个getter函数,赋值给getter if (typeof expOrFn === 'function') { this.getter = expOrFn } else { this.getter = parsePath(expOrFn) if (!this.getter) { this.getter = function () {} process.env.NODE_ENV !== 'production' && warn( `Failed watching path: "${expOrFn}" ` + 'Watcher only accepts simple dot-delimited paths. ' + 'For full control, use a function instead.', vm ) } } // 计算属性执行到这里为true if (this.computed) { // 和其他watcher的区别,计算属性这里并不会立刻返回求值 this.value = undefined // 创建了该属性的消息订阅器 this.dep = new Dep() } else { this.value = this.get() } } 复制代码 export default class Dep { static target: ?Watcher; id: number; subs: Array<Watcher>; constructor () { this.id = uid++ this.subs = [] } addSub (sub: Watcher) { this.subs.push(sub) } removeSub (sub: Watcher) { remove(this.subs, sub) } depend () { if (Dep.target) { Dep.target.addDep(this) } } notify () { // stabilize the subscriber list first const subs = this.subs.slice() for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } } } 复制代码

这里Watcher和Dep的关系就是:

watcher 中实例化了 dep 并向 dep.subs 中添加了订阅者,dep 通过 notify 遍历了 dep.subs 通知每个 watcher 更新。

当获取到计算属性的值时,就会执行getter函数,即

if (watcher) { watcher.depend() return watcher.evaluate() } 复制代码

再看到watcher对象中的depend和evaluate方法:

depend () { // Dep.target代表的是渲染watcher // 在获取计算属性值时,触发其他响应式数据的getter,此时Dep.target代表的是computed watcher if (this.dep && Dep.target) { // 渲染watcher订阅computed watcher的变化 this.dep.depend() } } 复制代码 evaluate () { if (this.dirty) { // 这里的get就是computed上的getter函数 this.value = this.get() this.dirty = false } // 返回getter的值 return this.value } 复制代码

以上就是计算属性getter的整个过程,这里稍微总结一下:

new Vue 或 Vue.extend 实例化一个组件时,data 或 computed 会各自建立响应式系统,Observer 遍历 data 中每个属性设置 get/set 数据拦截。对于 computed 属性,会调用 initComputed 函数 实例化一个computed watcher,其中会注册依赖对象dep 调用计算属性的 watcher 执行 depend() 方法向自身的消息订阅器 dep 的 subs 中添加其他属性的 watcher 调用 watcher 的 evaluate 方法(进而调用 watcher 的 get 方法)让自身成为其他 watcher 的消息订阅器的订阅者,首先将 watcher 赋给 Dep.target,然后执行 getter 求值函数,当访问求值函数里面的属性(比如来自 data、props 或其他 computed)时,会同样触发它们的 get 访问器函数从而将该计算属性的 watcher 添加到求值函数中属性的 watcher 的消息订阅器 dep 中,当这些操作完成,最后关闭 Dep.target 赋为 null 并返回求值函数结果。

计算属性的setter的流程比较简单:

调用 set 拦截函数,然后调用自身消息订阅器 dep 的 notify 方法,遍历当前 dep 中保存着所有订阅者 wathcer 的 subs 数组,并逐个调用 watcher 的 update 方法,完成响应更新。

现在再回头去看第一个问题的答案就一清二楚了。计算属性 valueText 因为 this.abc 为 undefined 并没有收集到 this.abc 的变化。所以点击之后是 valueText 并不会改变。如果将两个属性调换位置,那么就如我们所愿了:

computed: { valueText () { return this.xxx && this.abc; } } 复制代码

这里可以得出结论:

computed属性getter中,保证第一次调用时能执行到你所希望的监听的绑定数据。

觉得有帮助的可以关注下我的 博客 !!!给个star支持一下吧!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:computed的原理
本站链接:https://www.codesec.net/view/610749.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(39)