通常我们不需要频繁的去更新模板上的属性值，则会采用computed，因为他具有缓存功能，可以提高性能。
computed有两种写法
1、
<div id="app">{{fullName}}</div>
let vm = new Vue({
el:'#app',
data(){
return {
// arr:[[1,2,3]],
// name:'123',
firstName:'yan',
lastName:'liying'
}
},
computed:{
fullName:{
get(){
return this.firstName + this.lastName;
},
set(val){
}
}
},
})
2、
<div id="app">{{fullName}}</div>
let vm = new Vue({
el:'#app',
data(){
return {
// arr:[[1,2,3]],
// name:'123',
firstName:'yan',
lastName:'liying'
}
},
computed:{
fullName(){
return this.firstName + this.lastName
}
},
})
vue中初始化computed，每一个计算属性的本质就是watcher，创建计算属性的watcher时，会传入一个懒惰属性，来控制computed缓存的功能，默认是执行的，先处理为vm._computedWatchers对象,每个key对应一个watch实例。进而能够获取到当前这个计算属性的dirty，来控制是来重新触发get，还是走上一次的缓存；
function initComputed(vm, computed) {
for (let key in computed) {
const userDef = computed[key];
let watch = vm._computedWatcher = {}
//依赖的属性变化就重新取值 get
let getter = typeof userDef == "function" ? userDef : userDef.get;
//每个计算属性本质就是watcher
watch[key] = new Watcher(vm, getter, () => {}, { lazy: true }); //默认执行
//将key定义在vm上
defineProperty(vm, key, userDef);
}
}
function createComputedGetter(key){
return function computedGetter(){
let watcher = this._computedWatcher[key];
if(watcher.dirty){
watcher.evaluate();
}
//如果当前取完值后 dep.target还有值，需要继续向上收集
if(Dep.target){
//计算属性watcher，firstName,lastName
watcher.depend();//watcher对应了多个dep
console.log(Dep.target,'---tera');
}
return watcher.value;
}
}
//computed 就是一个defineProperty
function defineProperty(vm, key, userDef) {
let sharedProperty = {};
if(typeof userDef == 'function'){
sharedProperty.get = userDef;
}else{
sharedProperty.get = createComputedGetter(key);
sharedProperty.set = userDef.set;
}
Object.defineProperty(vm, key, sharedProperty)
}
watcher中的dirty默认是true，是执行状态，会触发watcher中的evaluate，方法，evaluate方法中会调用get方法，并且同时将当前的watcher中的dirty置为false，下一次不会执行。
class Watcher {
constructor(vm, exporOrFn, cb, options = {}) {
this.vm = vm;
this.exporOrFn = exporOrFn;
this.options = options;
this.cb = cb;
this.id = id++;
this.user = !!options.user; //是否是用户调用
this.lazy = !!options.lazy; //computed懒执行的flag
this.deps = [];
this.dirty = this.lazy;
this.depsId = new Set();
//默认应该让exportOrFn执行，exportOrFn做了什么事？去render上取值
if (typeof exporOrFn == "string") {
this.getter = function () {
let arr = exporOrFn.split(".");
let obj = vm;
for (var i = 0; i < arr.length; i++) {
obj = obj[arr[i]];
}
return obj;
};
} else {
this.getter = exporOrFn;
}
//value 值是第一次渲染的value
this.value = this.lazy ? undefined : this.get(); //默认初始化要取值
}
get() {
//稍后用户更新时，可以重新调用getter方法
//defineProperty.get,每个属性都可以收集自己的watcher,每个属性都有一个依赖收集的对象 dep
//一个属性可以对应多个watcher，一个watcher也可以对应多个属性
pushTarget(this);
const value = this.getter.call(this.vm);
popTarget(this);
return value;
}
update() {
if (this.lazy) {
this.dirty = true;
} else {
//每次更新时 this 多次调用update 我希望现将watcher缓存下来，等一会一起更新
queueWatcher(this);
}
}
evaluate() {
this.dirty = false;
this.value = this.get();
}
}
总结
初始化 data 和 computed，分别代理其 set 和 get 方法，对 data 中的所有属性生成唯一的 dep 实例
对 computed 中的 属性生成唯一的 watcher，并保存在 vm._computedWatchers 中
访问计算属性时，设置 Dep.target 指向 计算属性的 watcher，调用该属性具体方法
方法中访问 data 的属性，即会调用 data 属性的 get 方法，将 data 属性的 dep 加入到 计算属性的 watcher ， 同时该 dep 中的 subs 添加这个 watcher
设置 data 的这个属性时，调用该属性代理的 set 方法，触发 dep 的 notify 方法
因为时 computed 属性，只是将 watcher 中的 dirty 设置为 true
最后，访问计算属性的 get 方法时，得知该属性的 watcher.dirty 为 true，则调用 watcher.evaluate() 方法获取新的值
