vue 監視屬性

萝卜薰發表於2024-07-02
Vue
<div id="root">
    <h2>今天天氣很{{info}}</h2>
    <button @click="changeWeather">切換天氣</button>
    <hr/>
    <h3>a的值是{{numbers.a}}</h3>
    <button @click="add">點我讓a+1</button>
    <h3>b的值是{{numbers.b}}</h3>
    <button @click="numbers.b++">點我讓b+1</button>
</div>
const vm = new Vue({ data(){ return{isHot:true, numbers:{a:1,b:1} }}, 
       computed:{
        info(){
            return this.isHot?'炎熱':'涼爽'
        }
       },
       
       methods: {
        changeWeather(){
            this.isHot = !this.isHot //取反
        },
        add(){this.numbers.a ++}
       },
       
       watch:{
        info:{  //handler函式將在isHot/info被修改時呼叫，同時返回修改前後的值
            handler(newValue,oldValue){
                console.log('info被修改了',newValue,oldValue)
            }
        },
        'numbers.a':{ //這種還要帶.的var要記得帶引號
            handler(newValue,oldValue){
                console.log('a改變了',newValue,oldValue)
            }
        },
        numbers:{
            deep:true,     //深度監視，numbers中的任意元素（a或b）發生改變時，numbers會被監視到。
            handler(){
                console.log('numbers改變了')
            }
        }

       },
    })

在vm中新建一個 watch 的類，類中的元素為被監視的物件，該元素也是一個類，類中包含一個handler(newValue,oldValue){console.log()}函式，可以將資料改變的情況寫出來。

相關文章