vue提供了watch方法，用于監(jiān)聽實(shí)例內(nèi)data數(shù)據(jù)的變化。通常寫法是：

new Vue({ data: {  count: 10，  blog:{    title:'my-blog',    categories:[]  } }, watch: {  count: function (newval, oldVal) {   console.log(`new: %s, old: %s`, newVal, oldVal);  } }})

上述情況里data中的count屬性可以直接監(jiān)聽，但是如果需要監(jiān)聽的數(shù)據(jù)是對象內(nèi)的某一屬性值的變化，直接watch對象blog是檢測不到變化的，這是因?yàn)閎log這個(gè)對象的指向并沒有發(fā)生改變。有幾個(gè)解決方法

1.深度監(jiān)測

new Vue({ data: {  count: 10，  blog:{    title:'my-blog',    categories:[]  } }, watch: {  blog:{    handler(newVal,oldVal){      console.log(`new: ${newVal}, old: ${oldVal}`);    },    deep:true  } }})

里面的deep設(shè)為了true，這樣的話，如果修改了這個(gè)blog中的任何一個(gè)屬性，都會執(zhí)行handler這個(gè)方法。不過這樣會造成更多的性能開銷，尤其是對象里面屬性過多，結(jié)構(gòu)嵌套過深的時(shí)候。而且有時(shí)候我們就只想關(guān)心這個(gè)對象中的某個(gè)特定屬性，這個(gè)時(shí)候可以這樣

2.用字符串來表示對象的屬性調(diào)用

new Vue({ data: {  count: 10，  blog:{    title:'my-blog',    categories:[]  } }, watch: {  'blog.categories'(newVal, oldVal) {    console.log(`new:${newVal}, old:${oldVal}`);  },  }})

3.使用computed計(jì)算屬性

new Vue({ data: {  count: 10，  blog:{    title:'my-blog',    categories:[]  } }, computed: {  categories() {   return this.blog.categories;  } }, watch: {  categories(newVal, oldVal) {   console.log(`new:${newVal}, old:${oldVal}`);  },  },})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。