欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue.js中watch監(jiān)視屬性知識點的示例分析

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

成都創(chuàng)新互聯(lián)公司主要從事做網(wǎng)站、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務喀喇沁,10余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220

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

1.基本用法

(1)添加watch屬性，值為一個對象。對象的屬性名就是要監(jiān)視的數(shù)據(jù)，屬性值為回調(diào)函數(shù)，每當這個屬性名對應的值發(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ā)對應的回調(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í)行。

Vue.js中watch監(jiān)視屬性知識點的示例分析

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

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

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

4.深度監(jiān)聽

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

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

  • deep:深度監(jiān)聽，默認false

  • handler:回調(diào)函數(shù)

  • immediate:頁面初始化時是否觸發(fā)回調(diào)，默認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屬性對應的回調(diào)

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

網(wǎng)站標題：Vue.js中watch監(jiān)視屬性知識點的示例分析
文章來源：http://chinadenli.net/article46/jeceeg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、網(wǎng)頁設計公司、微信公眾號、網(wǎng)站改版、外貿(mào)網(wǎng)站建設、微信小程序

廣告

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

成都網(wǎng)站建設