Vue 監聽屬性
阿新 • • 發佈：2022-04-06
這裡結合 天氣案例 來理解 Vue 監聽屬性
天氣案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天氣案例</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>天氣：{{info}}</h2> <button @click="changeWeather">切換天氣</button> </div> </body> <script type="text/javascript"> new Vue({ el: '#root', data: { isHot: true }, computed: { info() { return this.isHot ? '熱' : '冷' } }, methods: { changeWeather() { this.isHot = !this.isHot } } }) </script> </html>
天氣案例_監聽屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天氣案例_監視屬性</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>天氣：{{info}}</h2> <button @click="changeWeather">切換天氣</button> </div> </body> <script type="text/javascript"> new Vue({ el: '#root', data: { isHot: true }, computed: { info() { return this.isHot ? '熱' : '冷' } }, methods: { changeWeather() { this.isHot = !this.isHot } }, watch: { isHot: { // 初始化時讓 handler 呼叫一下 immediate: false, // 當 isHot 發生改變時 handler 被呼叫 handler(newValue, oldValue) { console.log('isHot 被修改', newValue, oldValue) } } } }) </script> </html>
使用 watch 選項或者 vm.$watch
選擇需要監聽的物件 isHot 配置 handler(newValue, oldValue)
其中 newValue 為變化後的值 oldValue 為變化前的值
備註：immediate: true 會讓 handler 在初始化時被呼叫一下
天氣案例_監聽屬性_簡寫
簡寫的代價：不能配置immediate: true 等配置類
例項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天氣案例_監視屬性_簡寫</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>天氣：{{info}}</h2> <button @click="changeWeather">切換天氣</button> </div> </body> <script type="text/javascript"> new Vue({ el: '#root', data: { isHot: true }, computed: { info() { return this.isHot ? '熱' : '冷' } }, methods: { changeWeather() { this.isHot = !this.isHot } }, watch: { //簡寫 isHot(newValue, oldValue) { console.log('isHot 被修改') } } }) </script> </html>
使用 watch 選項 簡寫 示例
// 正常寫法
isHot: {
handler(newValue, oldValue) {
console.log('isHot 被修改')
}
}
//簡寫
isHot(newValue, oldValue) {
console.log('isHot 被修改')
}
}
使用 vm.$watch 簡寫 示例
// 正常寫法
vm.$watch('isHot', {
handler(newValue, oldValue) {
console.log('isHot 被修改')
}
})
// 簡寫
vm.$watch('isHot', function (newValue, oldValue) {
console.log('isHot 被修改')
})