用法
--------------------------------------------------------------------------------
先來看看官網的介紹:
官網介紹的很好理解了，也就是監聽一個數據的變化，當該數據變化時執行我們的watch方法,watch選項是一個對象，鍵為需要觀察的表達式(函數),還可以是一個對象，可以包含如下幾個屬性:
handler ;對應的函數 ;可以帶兩個參數，分別是新的值和舊的值，上下文為當前Vue實例
immediate ;偵聽開始之后是否立即調用 ;默認為false
sync ;波爾值，是否同步執行，默認false ;如果設置了這個屬性，當數據有變化時就會立即執行了，否則放到下一個tick中排隊執行
例如:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <title>Document</title></head><body> <div id="app"> <p>{{message}}</p> <button @click="test">測試</button> </div> <script> var app = new Vue({ el:'#app', data:{message:'hello world!'}, watch:{ message:function(newval,val){ console.log(newval,val) } }, methods:{ test:()=>app.message="Hello Vue!" } }) </script></body></html>DOM渲染如下:
點擊測試按鈕后DOM變成了:
同時控制臺輸出:Hello Vue! hello world!
源碼分析
--------------------------------------------------------------------------------
Vue實例后會先執行_init()進行初始化(4579行)時，會執行initState()進行初始化,如下:
function initState (vm) { //第3303行 vm._watchers = []; var opts = vm.$options; if (opts.props) { initProps(vm, opts.props); } if (opts.methods) { initMethods(vm, opts.methods); } if (opts.data) { initData(vm); } else { observe(vm._data = {}, true /* asRootData */); } if (opts.computed) { initComputed(vm, opts.computed); } if (opts.watch && opts.watch !== nativeWatch) { //如果傳入了watch 且 watch不等于nativeWatch(細節處理，在Firefox瀏覽器下Object的原型上含有一個watch函數) initWatch(vm, opts.watch); //調用initWatch()函數初始化watch }}function initWatch (vm, watch) { //第3541行 for (var key in watch) { //遍歷watch里的每個元素 var handler = watch[key]; if (Array.isArray(handler)) { for (var i = 0; i < handler.length; i++) { createWatcher(vm, key, handler[i]); } } else { createWatcher(vm, key, handler); //調用createWatcher } }}function createWatcher ( //創建用戶watcher vm, expOrFn, handler, options) { if (isPlainObject(handler)) { //如果handler是個對象，則將該對象的hanler屬性保存到handler里面 從這里看到值可以是個對象 options = handler; handler = handler.handler; } if (typeof handler === 'string') { handler = vm[handler]; } return vm.$watch(expOrFn, handler, options) //最后創建一個用戶watch}Vue原型上的$watch構造函數如下:
Vue.prototype.$watch = function ( //第3596行 expOrFn, //監聽的屬性，例如例子里的message cb, //對應的函數 options //選項 ) { var vm = this; if (isPlainObject(cb)) { return createWatcher(vm, expOrFn, cb, options) } options = options || {}; options.user = true; //設置options.user為true,表示這是一個用戶watch var watcher = new Watcher(vm, expOrFn, cb, options); //創建一個Watcher對象 if (options.immediate) { //如果有immediate選項，則直接運行 cb.call(vm, watcher.value); } return function unwatchFn () { watcher.teardown(); } };}偵聽器對應的用戶watch的user選項是true的，全局Watcher如下:
var Watcher = function Watcher ( //第3082行 vm, expOrFn, //偵聽的屬性:message cb, //對應的函數 options, isRenderWatcher) { this.vm = vm; if (isRenderWatcher) { vm._watcher = this; } vm._watchers.push(this); // options if (options) { this.deep = !!options.deep; this.user = !!options.user; //用戶watch這里的user屬性為true this.lazy = !!options.lazy; this.sync = !!options.sync; } else { this.deep = this.user = this.lazy = this.sync = false; } this.cb = cb; this.id = ++uid$1; // uid for batching this.active = true; this.dirty = this.lazy; // for lazy watchers this.deps = []; this.newDeps = []; this.depIds = new _Set(); this.newDepIds = new _Set(); this.expression = expOrFn.toString(); // parse expression for getter if (typeof expOrFn === 'function') { this.getter = expOrFn; } else { //偵聽器執行到這里， this.getter = parsePath(expOrFn); //get對應的是parsePath()返回的匿名函數 if (!this.getter) { this.getter = function () {}; "development" !== 'production' && warn( "Failed watching path: /"" + expOrFn + "/" " + 'Watcher only accepts simple dot-delimited paths. ' + 'For full control, use a function instead.', vm ); } } this.value = this.lazy ? undefined : this.get(); //最后會執行get()方法}; function parsePath (path) { //解析路勁 if (bailRE.test(path)) { return } var segments = path.split('.'); return function (obj) { //返回一個函數，參數是一個對象 for (var i = 0; i < segments.length; i++) { if (!obj) { return } obj = obj[segments[i]]; } return obj }}執行Watcher的get()方法時就將監聽的元素也就是例子里的message對應的deps將當前watcher(用戶watcher)作為訂閱者，如下:
Watcher.prototype.get = function get () { //第3135行 pushTarget(this); //將當前用戶watch保存到Dep.target總=中 var value; var vm = this.vm; try { value = this.getter.call(vm, vm); //執行用戶wathcer的getter()方法，此方法會將當前用戶watcher作為訂閱者訂閱起來 } catch (e) { if (this.user) { handleError(e, vm, ("getter for watcher /"" + (this.expression) + "/"")); } else { throw e } } finally { // "touch" every property so they are all tracked as // dependencies for deep watching if (this.deep) { traverse(value); } popTarget(); //恢復之前的watcher this.cleanupDeps(); } return value};當我們點擊按鈕了修改了app.message時就會執行app.message對應的訪問控制器的set()方法，就會執行這個用戶watcher的update()方法，如下:
Watcher.prototype.update = function update () { //第3200行 更新Watcher /* istanbul ignore else */ if (this.lazy) { this.dirty = true; } else if (this.sync) { //如果$this.sync為true，則直接運行this.run獲取結果 this.run(); } else { queueWatcher(this); //否則調用queueWatcher()函數把所有要執行update()的watch push到隊列中 }};Watcher.prototype.run = function run () { //第3215行 執行，會調用get()獲取對應的值 if (this.active) { var value = this.get(); if ( value !== this.value || // Deep watchers and watchers on Object/Arrays should fire even // when the value is the same, because the value may // have mutated. isObject(value) || this.deep ) { // set new value var oldValue = this.value; this.value = value; if (this.user) { //如果是個用戶 watcher try { this.cb.call(this.vm, value, oldValue); //執行這個回調函數 vm作為上下文 參數1為新值 參數2為舊值 也就是最后我們自己定義的function(newval,val){ console.log(newval,val) }函數 } catch (e) { handleError(e, this.vm, ("callback for watcher /"" + (this.expression) + "/"")); } } else { this.cb.call(this.vm, value, oldValue); } } }};對于偵聽器來說，Vue內部的流程就是這樣子
總結
以上所述是小編給大家介紹的Vue 2.0 偵聽器 watch屬性代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
