computed vue 不 触发_Vue Computed 原理

Computed 计算属性是 Vue 中常用的一个功能，在使用中发现他像是介于data和method之间的一个属性。他可以像是data一样在模板中{{message}}一样去使用，也可以通过this.message来调用；同时他也像method一样可以去处理数据逻辑。

本片文章就简要分析一下computed的原理，在此之间需要了解一下Vue数据响应的原理Object.defineProperty中的get/set重写。

原理解析

特殊处理computed

在Vue的实例化时，出入的对象中如果包含computed属性，构造内部会对这个对象进行特殊处理，处理成下一样的代码。

// 1.0实例化

var vm = new Vue({

data () {

return { }

}

computed: {

// key:value,

total: function _total() {

return this.a * this.b

}

},

})

// computed转化

var _computed = {

// computed的key值与原先同名,新的value是一个队原先value封装的函数

total: function(){

// 在实例上挂载响应的属性，这样就可以像data一样使用 this.total === vm.total

this.total = (function _total() {

return this.price * this.num

})()

}

}

computed初始化

初始化之后在vm上已经可以像data一样使用了

let target = null // target 是重点

// 遍历_computed

Object.keys(_computed).forEach(key = {

// 将key对应的function存入target中

target = computed[key] // [function]

// 执行target函数，函数内部更新了 vm[key] 的值

target()

// 清空target

target = null

})

监听和缓存

computed的基本特性是：

1、当data数据变更时，computed会更新

2、当computed中没有引入的数据更新时，computed不会去重新计算，大幅度节省计算量

实际是Vue内部创建了一个Dep类

get

在 computed初始化 中的代码可以看到，_computed在forEach的时候，target = _computed[key]，也就是说，target执行的时候，如果内部触发get，那当前触发get属性的dep. depend函数中target函数中一定包含这个属性

例如触发在_computed.total中触发this.price的get时候，target === _computed.total ，dep. depend() 会将target 即 _computed.total 存入 price的subscribers中。

这样每个data中的属性都有一个自己的subscribers，其中是跟自己相关的computed函数

set

当触发set的时候，就回去遍历执行subscribers中的函数

如this.price = 100这样更新时，this.price中的subscribers = [_computed.total, ...]，this.subscribers.forEach((sub)=>{sub()})就会更新相关的computed了

// 订阅/发布模式

class Dep {

constructor () {

// 调度中心 有几个computed引用到就有几个sub

this.subscribers = []

}

// 发布 get的时候调用

depend () {

if(target && !this.subscribers.includes(target)) { // target存在并且调度中心没有

this.subscribers.push(target) // 将target发布到调度中心

}

}

// 订阅

notify () {

// 便利调度中心 更新所有引用了这个数据的computed

this.subscribers.forEach((sub)=>{

sub()

})

}

}

Object.keys(data).forEach(key => {

let internalValue = null

const dep = new Dep() // 闭包的方式实现，每一个data中的属性都会有一个自己Dep实例

Object.defineProperty(data, key, {

get () {

dep.depend() // 当触发get的时候

return internalValue

}

set (newVal) {

internalValue = newVal

dep.notify() // 当触发set的时候

}

})

})