Vue.js中watch監視屬性知識點的示例分析

這篇文章主要介紹Vue.js中watch監視屬性知識點的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯公司主要從事做網站、成都做網站、網頁設計、企業做網站、公司建網站等業務。立足成都服務喀喇沁,10余年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:028-86922220

這個屬性用來監視某個數據的變化，并觸發相應的回調函數執行

1.基本用法

(1)添加watch屬性，值為一個對象。對象的屬性名就是要監視的數據，屬性值為回調函數，每當這個屬性名對應的值發生變化，就會觸發該回調函數執行

(2)回調函數有2個參數：

newVal：數據發生改變后的值

oldVal：數據發生改變前的值

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

vm.name = "郭大俠" // 執行這行代碼，會觸發對應的回調函數

執行結果:

name的值發生了變化
郭大俠 郭靖

2.監聽對象內部屬性的變化

前面的例子只是監聽data中的第一層數據，如果要監聽多層次的數據，例如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: {
      //監聽wife中的name屬性
      'wife.name'(newVal,oldVal){
        console.log('wife.name發生了改變')
      },
      //監聽wife
      'wife'(newVal,oldVal){
        console.log('wife發生了改變')
      }
    },
    methods:{
      test(){
        this.wife.name = "'黃幫主'"
      },
      test2(){
        this.wife = {name:'我不是黃蓉',sex:'women'}
      }
    }
  })
</script>

運行結果表明，無論是他父級對象的值發生了改變，還是它本身的值發生了改變，都會使這個監視屬性的回調函數執行。

Vue.js中watch監視屬性知識點的示例分析

3.監聽路由變化

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

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

4.深度監聽

監視屬性只能監聽到當前對象值的變化，而對象內部的屬性變化不會監聽到，前面我們監聽了wife和wife.name，修改了wife.name并不會觸發監聽wife的回調函數。

想要監聽對象內部的屬性值變化，需要進行相應的配置。

deep:深度監聽，默認false
handler:回調函數
immediate:頁面初始化時是否觸發回調，默認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 = '黃幫主' // 觸發wife屬性對應的回調

以上是“Vue.js中watch監視屬性知識點的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

網站標題：Vue.js中watch監視屬性知識點的示例分析
文章來源：http://m.kartarina.com/article46/jeceeg.html

成都網站建設公司_創新互聯，為您提供網站建設、網頁設計公司、微信公眾號、網站改版、外貿網站建設、微信小程序

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容