快捷導(dǎo)航

Vue.js watch監(jiān)視屬性知識點總結(jié)

更新時間：2019年11月11日 08:12:18 作者：---空白---

在本篇文章里小編給大家分享的是關(guān)于Vue.js watch監(jiān)視屬性的相關(guān)知識點內(nèi)容，需要的朋友們學(xué)習(xí)下。

這個屬性用來監(jiān)視某個數(shù)據(jù)的變化，并觸發(fā)相應(yīng)的回調(diào)函數(shù)執(zhí)行

1.基本用法

(1)添加watch屬性，值為一個對象。對象的屬性名就是要監(jiān)視的數(shù)據(jù)，屬性值為回調(diào)函數(shù)，每當(dāng)這個屬性名對應(yīng)的值發(fā)生變化，就會觸發(fā)該回調(diào)函數(shù)執(zhí)行

(2)回調(diào)函數(shù)有2個參數(shù)：

newVal：數(shù)據(jù)發(fā)生改變后的值

oldVal：數(shù)據(jù)發(fā)生改變前的值

var vm = new Vue({
  el:'#app',
  data: {
    name: '郭靖'
  },
  watch: {
    name(newVal,oldVal){
      console.log('name的值發(fā)生了變化')
      console.log(newVal,oldVal)
    }
  }
})

vm.name = "郭大俠" // 執(zhí)行這行代碼，會觸發(fā)對應(yīng)的回調(diào)函數(shù)

執(zhí)行結(jié)果:

name的值發(fā)生了變化
郭大俠 郭靖

2.監(jiān)聽對象內(nèi)部屬性的變化

前面的例子只是監(jiān)聽data中的第一層數(shù)據(jù)，如果要監(jiān)聽多層次的數(shù)據(jù)，例如a.b.c，則屬性名需要用引號包裹起來

<body>
  <div id="app">
    <p>{{name}}</p>
    <button @click="test">修改wife.name</button>
    <button @click="test2">修改wife</button>
  </div>
</body>
<script>
  var vm = new Vue({
    el:'#app',
    data: {
      name: '郭靖',
      age: 20,
      wife: {
        name: '黃蓉',
        sex: '女'
      }
    },
    watch: {
      //監(jiān)聽wife中的name屬性
      'wife.name'(newVal,oldVal){
        console.log('wife.name發(fā)生了改變')
      },
      //監(jiān)聽wife
      'wife'(newVal,oldVal){
        console.log('wife發(fā)生了改變')
      }
    },
    methods:{
      test(){
        this.wife.name = "'黃幫主'"
      },
      test2(){
        this.wife = {name:'我不是黃蓉',sex:'women'}
      }
    }
  })
</script>

運行結(jié)果表明，無論是他父級對象的值發(fā)生了改變，還是它本身的值發(fā)生了改變，都會使這個監(jiān)視屬性的回調(diào)函數(shù)執(zhí)行。

3.監(jiān)聽路由變化

提示：路由的路徑信息保存在$route.path中

watch:{
 '$route.path':function(newval){
  console.log('change')
 }
}

4.深度監(jiān)聽

監(jiān)視屬性只能監(jiān)聽到當(dāng)前對象值的變化，而對象內(nèi)部的屬性變化不會監(jiān)聽到，前面我們監(jiān)聽了wife和wife.name，修改了wife.name并不會觸發(fā)監(jiān)聽wife的回調(diào)函數(shù)。

想要監(jiān)聽對象內(nèi)部的屬性值變化，需要進(jìn)行相應(yīng)的配置。

deep:深度監(jiān)聽，默認(rèn)false
handler:回調(diào)函數(shù)
immediate:頁面初始化時是否觸發(fā)回調(diào)，默認(rèn)false

var vm = new Vue({
  el:'#app',
  data: {
    name: '郭靖',
    age: 20,
    wife: {
      name: '黃蓉',
      sex: '女'
    }
  },
  watch: {
    wife:{
      deep:true,
      handler:function(newVal,oldVal){
        console.log('value is change')
      },
      immediate:true
    }
  }
})

vm.wife.name = '黃幫主' // 觸發(fā)wife屬性對應(yīng)的回調(diào)

以上就是關(guān)于Vue.js watch監(jiān)視屬性的全部知識點，感謝大家的學(xué)習(xí)和對腳本之家的支持。

您可能感興趣的文章: