vue源码分析(watcher篇)
Posted 一只燕仔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue源码分析(watcher篇)相关的知识,希望对你有一定的参考价值。
function Watcher(vm, exp, cb)
//在watcher的实例上保存回调函数
this.cb = cb; //用于更新界面的回调函数
this.vm = vm; //MVVM的实例vm
this.exp = exp; //对应的表达式
this.depIds = ;
this.value = this.get(); //调用get方法
Watcher.prototype =
update: function()
this.run();
,
run: function()
var value = this.get();
var oldVal = this.value;
if (value !== oldVal)
this.value = value; //调用构建watcher实例的时候传递过来的回调函数,让他的this指向为vm
this.cb.call(this.vm, value, oldVal);
,
addDep: function(dep)
//判断当前depIds中是否已经有dep了
//当模版首次更新的时候都是没有的,需要添加,当页面数据发生改变的时候同时会调用此方法
if (!this.depIds.hasOwnProperty(dep.id))
//调用dep的addSub方法进行对watcher实例的添加
dep.addSub(this);//此时this是watcher的实例
//添加当前的dep到depIds中,并且把dep.id的值作为depIds的key
this.depIds[dep.id] = dep;
,
get: function() //get方法
//在watcher初始化的时候保存实例到Dep的target上
Dep.target = this; //暂存this
//调用get方法获取当前对应表达式的数据
var value = this.getVMVal();
//清空target
Dep.target = null;
return value;
,
getVMVal: function()
var exp = this.exp.split('.'); //截取
var val = this.vm._data;
exp.forEach(function(k) //循环
//读取_data中所对应的值
val = val[k];
);
return val; //返回值
;
以上是关于vue源码分析(watcher篇)的主要内容,如果未能解决你的问题,请参考以下文章