vue中的computed 和 vm.$data 原理解析_vue.js_

var vm = new Vue({   el: '#example',   data: {     message: 'Hello'   },   computed: {     // 计算属性的 getter     reversedMessage: function () {       // `this` 指向 vm 实例       return this.message.split('').reverse().join()     }   } })

// src/core/instance/state.js // 初始化组件的state export function initState (vm: Component) {   vm._watchers = []   const opts = vm.$options   if (opts.props) initProps(vm, opts.props)   if (opts.methods) initMethods(vm, opts.methods)   // 当组件存在data属性   if (opts.data) {     initData(vm)   } else {     observe(vm._data = {}, true /* asRootData */)   }   // 当组件存在 computed属性   if (opts.computed) initComputed(vm, opts.computed)   if (opts.watch && opts.watch !== nativeWatch) {     initWatch(vm, opts.watch)   } }

// src/core/instance/state.js function initData (vm: Component) {   let data = vm.$options.data   data = vm._data = typeof data === 'function'     ? getData(data, vm)     : data || {}   // .....省略无关代码      // 将vue的data传入observe方法   observe(data, true /* asRootData */) } // src/core/observer/index.js export function observe (value: any, asRootData: ?boolean): Observer | void {   if (!isObject(value)) {     return   }   let ob: Observer | void   // ...省略无关代码   ob = new Observer(value)   if (asRootData && ob) {     ob.vmCount++   }   return ob }

// src/core/observer/index.js export class Observer {   value: any;   dep: Dep;   vmCount: number; // number of vms that has this object as root $data   constructor (value: any) {     this.value = value     // 关键代码 new Dep对象     this.dep = new Dep()     this.vmCount = 0     def(value, '__ob__', this)     // ...省略无关代码     this.walk(value)   }   walk (obj: Object) {     const keys = Object.keys(obj)     for (let i = 0; i < keys.length; i++) {       // 给data的所有属性调用defineReactive       defineReactive(obj, keys[i], obj[keys[i]])     }   } }

// src/core/observer/index.js export function defineReactive (   obj: Object,   key: string,   val: any,   customSetter?: ?Function,   shallow?: boolean ) {   // 重点，在给具体属性调用该方法时，都会为该属性生成唯一的dep对象   const dep = new Dep()   // 获取该属性的描述对象   // 该方法会返回对象中某个属性的具体描述   // api地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor   const property = Object.getOwnPropertyDescriptor(obj, key)   // 如果该描述不能被更改，直接返回，因为不能更改，那么就无法代理set和get方法，无法做到响应式   if (property && property.configurable === false) {     return   }   // cater for pre-defined getter/setters   const getter = property && property.get   const setter = property && property.set   let childOb = !shallow && observe(val)   // 重新定义data当中的属性，对get和set进行代理。   Object.defineProperty(obj, key, {     enumerable: true,     configurable: true,     get: function reactiveGetter () {       const value = getter ? getter.call(obj) : val       // 收集依赖， reversedMessage为什么会跟着message变化的原因       if (Dep.target) {         dep.depend()         if (childOb) {           childOb.dep.depend()         }         if (Array.isArray(value)) {           dependArray(value)         }       }       return value     },     set: function reactiveSetter (newVal) {       const value = getter ? getter.call(obj) : val       /* eslint-disable no-self-compare */       if (newVal === value || (newVal !== newVal && value !== value)) {         return       }       if (setter) {         setter.call(obj, newVal)       } else {         val = newVal       }       childOb = !shallow && observe(newVal)       // 通知依赖进行更新       dep.notify()     }   }) }

// src/core/observer/dep.js export default class Dep {   static target: ?Watcher;   id: number;   subs: Array;   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 () {     const subs = this.subs.slice()     for (let i = 0, l = subs.length; i < l; i++) {       // 更新 watcher 的值，与 watcher.evaluate() 类似，       // 但 update 是给依赖变化时使用的，包含对 watch 的处理       subs[i].update()     }   } } // 当首次计算 computed 属性的值时，Dep 将会在计算期间对依赖进行收集 Dep.target = null const targetStack = [] export function pushTarget (_target: Watcher) {   // 在一次依赖收集期间，如果有其他依赖收集任务开始（比如：当前 computed 计算属性嵌套其他 computed 计算属性），   // 那么将会把当前 target 暂存到 targetStack，先进行其他 target 的依赖收集，   if (Dep.target) targetStack.push(Dep.target)   Dep.target = _target } export function popTarget () {   // 当嵌套的依赖收集任务完成后，将 target 恢复为上一层的 Watcher，并继续做依赖收集   Dep.target = targetStack.pop() }

// src/core/instance/state.js const computedWatcherOptions = { lazy: true } function initComputed (vm: Component, computed: Object) {   // 初始化watchers列表   const watchers = vm._computedWatchers = Object.create(null)   const isSSR = isServerRendering()   for (const key in computed) {     const userDef = computed[key]     const getter = typeof userDef === 'function' ? userDef : userDef.get     if (!isSSR) {       // 关注点1，给所有属性生成自己的watcher, 可以在this._computedWatchers下看到       watchers[key] = new Watcher(         vm,         getter || noop,         noop,         computedWatcherOptions       )     }     if (!(key in vm)) {       // 关注点2       defineComputed(vm, key, userDef)     }   } }

// src/core/observer/watcher.js constructor (     vm: Component,     expOrFn: string | Function,     cb: Function,     options?: Object   ) {     this.vm = vm     vm._watchers.push(this)     if (options) {       this.deep = !!options.deep       this.user = !!options.user       this.lazy = !!options.lazy       this.sync = !!options.sync     } else {       this.deep = this.user = this.lazy = this.sync = false     }     this.cb = cb     this.id = ++uid // uid for batching     this.active = true     this.dirty = this.lazy // 如果初始化lazy=true时（暗示是computed属性），那么dirty也是true,需要等待更新     this.deps = []     this.newDeps = []     this.depIds = new Set()     this.newDepIds = new Set()     this.getter = expOrFn // 在computed实例化时，将具体的属性值放入this.getter中     // 省略不相关的代码     this.value = this.lazy       ? undefined       : this.get()   }

this.dirty = this.lazy this.getter = expOrFn

// src/core/instance/state.js function createComputedGetter (key) {   return function computedGetter () {     const watcher = this._computedWatchers && this._computedWatchers[key]     // 如果找到了该属性的watcher     if (watcher) {       // 和上文对应，初始化时，该dirty为true,也就是说，当第一次访问computed中的属性的时候，会调用 watcher.evaluate()方法；       if (watcher.dirty) {         watcher.evaluate()       }       if (Dep.target) {         watcher.depend()       }       return watcher.value     }   } }

// src/core/instance/state.js evaluate () {   this.value = this.get()   this.dirty = false }    get () {   // 重点1，将当前watcher放入Dep.target对象   pushTarget(this)   let value   const vm = this.vm   try {     // 重点2，当调用用户传入的方法时，会触发什么？     value = this.getter.call(vm, vm)   } catch (e) {   } finally {     popTarget()     // 去除不相关代码   }   return value }<
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：Vue3系列教程之插槽slot详解_vue.js_
                                                                
下一篇：Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法_vue.js_