Vue——監聽器watch-有解無憂

使用watch來偵聽data中資料的變化，watch中的屬性（watch是物件格式）一定是data 中已經存在的資料，

使用場景：資料變化時執行異步或開銷比較大的操作，

典型應用：http://www.pinyinzi.cn/

a. 監聽器監聽data中資料的變化（當前）

b. 監聽器watch屬性值是一個物件

c. 監聽器物件里的屬性就是data中已經存在的資料的名

d. 監聽器里面屬性的值是一個處理函式，函式有2個形參：新值、舊值

e. watch默認只能監聽字面量（data中的表面資料，不能監聽data中的陣列物件等里面資料的變化）

想要監聽物件里面的資料，需要深度監聽

語法：

objname: {handler(val),deep: true}

函式handler引數就一個：物件是參考傳值

深度監聽的處理函式的名字handler不能變其他的，只能是這個名字

watch與computed的區別？

a. 在實作相同功能的時候，計算屬性的代碼復雜度要比監聽器要低；

b. 計算屬性支持深度監聽（默認）

后期使用上如何選擇？

a. 能用計算屬性就用計算屬性；

b. 如果是異步等代碼，這個時候可以優先考慮watch

c. 在深度監聽的時候建議考慮計算屬性

d. 只是學習測驗的時候，看你心情

<div class='app'>
            <input type="text" placeholder="姓" v-model="xing">
            <input type="text" placeholder="名" v-model="ming">
            <input type="text" placeholder="姓名" v-model="xm" >
    </div>
    </body>
<script src='./js/vue.js'></script>
<script>
    new Vue({
        el: '.app',
        data: {
            message: '',
            directives: '',
            xing:'',
            ming:'',
            xm:'',
        },
        watch:{
            // 監聽姓的變化,具有兩個引數，分別表示新的資料和舊的資料
            xing:function(x,j){
                // console.log(x,j);
            // 將新的資料復制到“姓名”中
            this.xm = x + this.ming
            },
            ming:function(x,j){
                this.xm = this.xing + x
            }
        }
    })

深度監聽：

將需要監聽的資料放置到一個物件中，在html標簽元素的自定義屬性v-model的值上添加物件的名稱，最后在監聽中使用深度監聽的語法

HTML陳述句
<input type="text" placeholder="姓" v-model="name.xing">
<input type="text" placeholder="名" v-model="name.ming">
<input type="text" placeholder="姓名" v-model="name.xm" >
//資料：
data: {
       name:{
          xing:'',
          ming:'',
          xm:'',
           }
 },

//監聽：
watch:{
    // 監聽這個物件
     name:{
     // 第一個值適用于監聽的函式，具有一個引數，表示這個物件
          handler(val){
               // console.log(val)
               val.xm = val.xing + val.ming
                    },
                    // 深度監聽的標志
               deep:true
                }
            }

使用計算屬性

HTML
<input type="text" placeholder="姓" v-model="xing">
<input type="text" placeholder="名" v-model="ming">
<input type="text" placeholder="姓名" v-model="xm" >
直接在data里面添加：
xing:'',
            ming:'',
計算屬性：
 computed:{
            xm(){
                return this.xing + this.ming
            }
        }

使用計算屬性（深度）：

HTML更改
<input type="text" placeholder="姓" v-model="name.xing">
<input type="text" placeholder="名" v-model="name.ming">
<input type="text" placeholder="姓名" v-model="xm" >

資料修改
name:{
       xing:'',
        ming:'',
     }
計算屬性

computed:{
        xm(){
        return this.name.xing + this.name.ming
        }
     }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/241283.html

標籤：其他

上一篇：mustache.js實作首頁元件動態渲染

下一篇：Vue概述