- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
先来看看官网的介绍:
官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的观看方法,观察选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性:
,,,,,,,,,,,handler ,,,,,,;对应的函数,,,,,,,,,,,,,,,,,,,,,,,,可以带两个参数,分别是新的值和旧的值,上下文为当前Vue实例
,,,,,,,,,,immediate ,,;侦听开始之后是否立即调用;默认为假
,,,,,,,,,,sync ,,,,,,;波尔值,是否同步执行,默认false ,,,,如果设置了这个属性,当数据有变化时就会立即执行了,否则放到下一个滴答声中排队执行
例如:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;脚本src=" https://cdn.bootcss.com/vue/2.5.16/vue.js "祝辞& lt;/script>
& lt; title> Document
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; p>{{消息}}& lt;/p>
& lt;按钮@click=安馐浴钡脑诓馐? lt;/button>
& lt;/div>
& lt; script>
应用var=new Vue ({
埃尔:“#应用”,
数据:{信息:“hello world !”},
看:{
信息:函数(newval val) {
console.log (newval val)
}
},
方法:{
测试:()=祝辞;应用。消息="你好Vue !”
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
DOM渲染如下:
点击测试按钮后DOM变成了:
同时控制台输出:你好Vue !hello world !
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
,Vue实例后会先执行_init()进行初始化(4579行)时,会执行initState()进行初始化,如下:
函数initState (vm){//第3303行
vm。_watchers=[];
var选择=vm。美元选项;
如果(opts.props) {initProps (vm, opts.props);}
如果(opts.methods) {initMethods (vm, opts.methods);}
如果(opts.data) {
initData (vm);
其他}{
观察(vm。_data=https://www.yisu.com/zixun/{}, true/* asRootData */);
}
如果(opts.computed) {initComputed (vm, opts.computed);}
如果选择。& &选择观看。看!==nativeWatch){//如果传入了观看且看不等于nativeWatch(细节处理,在Firefox浏览器下对象的原型上含有一个手表函数)
initWatch (vm, opts.watch);//调用initWatch()函数初始化的手表
}
}
函数initWatch (vm,观察){//第3541行
(var关键看){//遍历手表里的每个元素
var处理程序=看(例子);
如果(Array.isArray(处理器)){
(var=0;我
Vue原型上的美元看构造函数如下:
Vue.prototype。看=函数(美元//第3596行
expOrFn,//监听的属性,例如例子里的消息
cb//对应的函数//选选择项
){
var vm=;
如果(isPlainObject (cb)) {
返回createWatcher (vm, expOrFn、cb、期权)
}
选项=选项| | {};
选项。用户=true;//设置options.user为真的,表示这是一个用户的手表
var观察家=new观察者(vm, expOrFn、cb、期权);//创建一个观察者对象
如果(options.immediate){//如果有直接选项,则直接运行
cb。调用(vm, watcher.value);
}
返回函数unwatchFn () {
watcher.teardown ();
}
};
}
