欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年11月11日 08:12:18   作者:---空白---  
在本篇文章里小編給大家分享的是關于Vue.js watch監(jiān)視屬性的相關知識點內容,需要的朋友們學習下。

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

1.基本用法

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

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

newVal:數據發(fā)生改變后的值

oldVal:數據發(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ā)對應的回調函數

執(zhí)行結果:

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

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

前面的例子只是監(jiān)聽data中的第一層數據,如果要監(jiān)聽多層次的數據,例如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>

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

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

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

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

4.深度監(jiān)聽

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

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

  • deep:深度監(jiān)聽,默認false
  • handler:回調函數
  • immediate:頁面初始化時是否觸發(fā)回調,默認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屬性對應的回調

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

相關文章

  • 深入淺出分析vue2和vue3的區(qū)別

    深入淺出分析vue2和vue3的區(qū)別

    這篇文章主要介紹了vue2和vue3的區(qū)別,較為詳細的分析了vue2與vue3的常見區(qū)別與使用方法,需要的朋友可以參考下
    2023-06-06
  • Vue中render函數的使用方法

    Vue中render函數的使用方法

    本篇文章主要介紹了Vue中render函數的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • vue @input和@click的區(qū)別及說明

    vue @input和@click的區(qū)別及說明

    這篇文章主要介紹了vue @input和@click的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue3利用customRef實現(xiàn)防抖

    vue3利用customRef實現(xiàn)防抖

    防抖就是對于頻繁觸發(fā)的事件添加一個延時同時設定一個最小觸發(fā)間隔,防抖大家都學過,但是如何在?Vue3?里中將防抖做到極致呢,下面小編就來和大家詳細講講
    2023-10-10
  • vue自定義封裝按鈕組件

    vue自定義封裝按鈕組件

    這篇文章主要為大家詳細介紹了vue自定義封裝按鈕組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 手把手教你如何在vue項目中使用rem布局

    手把手教你如何在vue項目中使用rem布局

    公司內部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認真的來總結下,下面這篇文章主要給大家介紹了關于如何在vue項目中使用rem布局的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • Vue源碼解讀之Component組件注冊的實現(xiàn)

    Vue源碼解讀之Component組件注冊的實現(xiàn)

    這篇文章主要介紹了Vue源碼解讀之Component組件注冊的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 在Vue中使用Avue、配置過程及實際應用小結

    在Vue中使用Avue、配置過程及實際應用小結

    在項目中遇到通過點擊加號實現(xiàn)輸入框的增加、以及對該輸入框的輸入內容進行驗證,通過這些誘導因素創(chuàng)作的這篇文章,本文重點給大家介紹在Vue中使用Avue、配置過程以及實際應用,需要的朋友可以參考下
    2022-10-10
  • Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析)

    Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析)

    這篇文章主要介紹了Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析,技術點較多,所以篇幅較長,認真閱覽的你一定會學到很多知識,需要的朋友可以參考下
    2022-09-09
  • Vue生命周期與后端交互實現(xiàn)流程詳解

    Vue生命周期與后端交互實現(xiàn)流程詳解

    Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue()開始就是vue生命周期的開始。Vue實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數據、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過程,稱這是Vue的?命周期
    2022-11-11

最新評論