中的監聽方法

watch

注意

名字 你想監www.cppcns.com聽哪個屬性，就要和他起一樣的名字

1.作用

用來監聽vue例項中的資料變化
可以隨時修改狀www.cppcns.com態的變化

2.觸發條件

當你監聽的屬性發生變化時，會自動呼叫對應的監聽方法

3.使用場景

用於非同步處理，開銷比較大的運算

4.示例

	 watch:{
             name(newvalue,oldvalue){
                  //計算屬性可以接受兩個引數,第一個引數是新的屬性值,第二引數是老的屬性值
                    // this.age
                    // console.log('name屬性發生變化了')
                    console.log(new
 
value,oldvalue)
                }

5.監聽物件時

<script>
export default {
    data() {
        return {
            obj: {
                name: "張三",age: 20,children: [
                    {
                        name: "李四",age: 27
                    },{
                        name: "王五",age: 23
                    }
                ]
            }
        };
    },www.cppcns.com
 

    watch: {
        obj: {
            handler: function(newVal,oldVal) {
                console.log("newVal:",newVal);
                console.log("oldVal:",oldVal);
            },deep: true,immediate: true
        },"obj.name": function(newVal,oldVal) {
            
            console.log("newVal obj.name:",newVal);
            console.log("oldVal obj.name:",oldVal);
        }
    },};
</script>

監聽物件的時候，需要加deep:true，這樣才能深入底層去實時監聽，如果沒有加的話，物件是監聽不到變化的。

immediate屬性：布林值
immediate：true：首次載入就監聽資料變化
immediate：false：只有發生改變才監聽

deep:true；

是開啟深層次的監聽，即所有屬性都加上監聽器，如果其中一個發生改變了就執行handler函式。

到此這篇關於Vue之監聽方法案例詳解的文章就介紹到這了,更多相關Vue之監聽方法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！