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
        }
     }