1. 程式人生 > >vue中watch的用法總結

vue中watch的用法總結

true strong mode 使用 調用 edi 包括 bsp ron

  首先確認 watch是一個對象,一定要當成對象來用。 對象就有鍵,有值。

  鍵:就是你要監控的那個家夥,比如說$route,這個就是要監控路由的變化,或者是data中的某個變量。

  值可以是函數:就是當你監控的家夥變化時,需要執行的函數,這個函數有兩個形參,第一個是當前值,第二個是變化後的值。

  值也可以是函數名:不過這個函數名要用單引號來包裹。

  第三種情況厲害了。 值是包括選項的對象:選項包括有三個。

  1、第一個handler:其值是一個回調函數。即監聽到變化時應該執行的函數。

  2、第二個是deep:其值是true或false;確認是否深入監聽。(一般監聽時是不能監聽到對象屬性值的變化的,數組的值變化可以聽到。)

  3、第三個是immediate:其值是true或false;確認是否以當前的初始值執行handler的函數

var vm = new Vue({
  data: {
    a: 1,
    b: 2
  },
  watch: {
    a: function (val, oldVal) {
      console.log(new: %s, old: %s, val, oldVal)
    },
    // 方法名
    b: someMethod,
    // 選項的對象
    c: {
      handler: function (val, oldVal) { 
/* ... */ }, deep: true, immediate: true } } })

  具體的用法可以直接看下面的示例,簡單直接

    <div id="app">  
        <input type="text" v-model:value="childrens.name" />  
        <input type="text" v-model:value="lastName" />  
    </div>  
    
    <script type="text/javascript
"> var vm = new Vue( { el: #app, data: { childrens: { name: 小強, age: 20, sex: }, tdArray:["1","2"], lastName:"張三" }, watch:{ childrens:{ handler:function(val,oldval){ console.log(val.name) }, deep:true//對象內部的屬性監聽,也叫深度監聽 }, childrens.name:function(val,oldval){ console.log(val+"aaa") },//鍵路徑必須加上引號 lastName:function(val,oldval){ console.log(this.lastName) } },//以V-model綁定數據時使用的數據變化監測 } ); vm.$watch("lastName",function(val,oldval){ console.log(val) })//主動調用$watch方法來進行數據監測</span> </script> </body>

vue中watch的用法總結