【Vue】談Vue的依賴追蹤系統 ——搞懂methods watch和compute的區別和聯絡
阿新 • • 發佈:2018-12-30
var vm = new Vue({ el: '#app', /* data選項中的資料: 1.haiZeiTuan_Name --> 海賊團名稱 2.船員的名稱 = 海賊團名稱(草帽海賊團) + 船員名稱(例如索隆) 這些資料裡存在這種關係: (多個)船員名稱資料 --> 依賴於 --> (1個)海賊團名稱資料 一個數據變化 ---> 多個數據全部變化 */ data: { haiZeiTuan_Name: '草帽海賊團', suoLong: '草帽海賊團索隆', naMei: '草帽海賊團娜美', xiangJiShi:'草帽海賊團香吉士' }, /* 在watch中,一旦haiZeiTuan_Name(海賊團名稱)發生改變 data選項中的船員名稱全部會自動改變 (suoLong,naMei,xiangJiShi) 並把它們打印出來 */ watch: { haiZeiTuan_Name: function (newName) { this.suoLong = newName + '索隆'this.naMei = newName + '娜美'this.xiangJiShi = newName + '香吉士' console.log(this.suoLong) console.log(this.naMei) console.log(this.xiangJiShi) } } }) // 更改watch選項中監控的主資料 vm.haiZeiTuan_Name = '橡膠海賊團'