<!--監視屬性 watch:1. 當被監視的屬性變化時，回調函數自動調用，進行相關操作2. 監視的屬性必須存在，才能進行監視3. 監視的兩種寫法：(1). new Vue 時傳入 watch 配置(2). 通過 vm.$watch 監視深度監視：(1). Vue 中的 watch 默認不檢測對象內部值的改變（一層）(2). 配置 deep: true 可以檢測對象內部值的改變（多層）備注：(1). Vue 自身可以檢測對象內部值的改變，但 Vue 提供的 watch 默認不可以！(2). 使用 watch 時根據數據的具體結構，決定是否采用深度檢測 --><div id="root"><h2>今天天氣很{{info}}</h2><button @click="changeWeather">切換天氣</button></div><script src="../js/vue.js"></script> <script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {isHot: true},computed: {info() {return this.isHot ? '炎熱' : '涼爽';}},methods: {changeWeather() {this.isHot = !this.isHot;}},// watch 的第一種寫法watch: {isHot: {immediate: true, // 初始化時讓 handler 調用一下// 當 isHot 發生改變時 調用 handlerhandler(newValue, oldValue) {console.log('isHot 被修改了', newValue, oldValue);}},// info: {// immediate: true, // 初始化時讓 handler 調用一下// // 當 isHot 發生改變時 調用 handler// handler(newValue, oldValue) {// console.log('info 被修改了', newValue, oldValue);// }// }}});// watch 第二種寫法vm.$watch('info', {immediate: true,handler(newValue, oldValue) {console.log('info 被修改了', newValue, oldValue);}}) </script>

一、watch 的簡寫

// 在 watch 里面 watch: {// 只是檢測數據，不需要其他配置項就可以使用簡寫形式isHot(newValue, oldValue) {console.log('isHot 被修改了', newValue, oldValue);} }// 在 vm 外面這樣寫 vm.$watch('isHot', function (newValue, oldValue) {console.log('isHot 被修改了', newValue, oldValue); })

二、watch 和 computed 的區別

<!--computed 和 watch 之間的區別：1. computed 能完成的功能，watch 都可以完完成2. watch 能完成的功能，computed 不一定能完成。例如：watch 可以進行異步操作兩個重要的小原則：1. 所有被 Vue 所管理的函數，最好寫成普通函數，這樣 this 的指向才是 vm 或 組件實例對象2. 所有不被 Vue 所管理的函數（定時器的回調函數、ajax 的回調函數等、Promise 的回調函數），最好寫成箭頭函數這樣 this 的指向才是 vm 或 組件實例對象 --> <script>const vm = new Vue({watch: {firstName(value) {// 延遲一秒觸發，setTimeout(() => {this.fullName = value + ' - ' + this.lastName;}, 1000);},lastName(value) {this.fullName = this.firstName + ' - ' + value;}}}); </script> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Vue 监视属性 watch的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。