溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“Vue中的watch監視屬性怎么應用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue中的watch監視屬性怎么應用”文章吧。
1.當被監視的屬性變化時，回調函數自動調用，進行相關操作
2.監視的屬性必須存在，才能進行監視
3.監視的兩種寫法
（1）new Vue時傳入watch配置
（2）通過vm.$watch監視
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天氣案例_監視屬性</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
監視屬性watch：
1.當被監視的屬性變化時, 回調函數自動調用, 進行相關操作
2.監視的屬性必須存在，才能進行監視！！
3.監視的兩種寫法：
(1).new Vue時傳入watch配置
(2).通過vm.$watch監視
-->
<!-- 準備好一個容器-->
<div id="root">
<h3>今天天氣很{{info}}</h3>
<button @click="changeWeather">切換天氣</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎熱' : '涼爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
/* watch:{
isHot:{
immediate:true, //初始化時讓handler調用一下
//handler什么時候調用？當isHot發生改變時。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
} */
})
vm.$watch('isHot',{
immediate:true, //初始化時讓handler調用一下
//handler什么時候調用？當isHot發生改變時。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
</script>
</html>1.Vue中的watch默認不監視對象內部值的改變（一層）
2.配置deep:true可以監視對象內部值的改變（多層）
備注：
vue自身可以監視對象內部值的改變，但vue提供的watch默認不可以
使用watch時根據數據的具體結構，決定是否采用深度監視
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天氣案例_深度監視</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
深度監視：
(1).Vue中的watch默認不監測對象內部值的改變（一層）。
(2).配置deep:true可以監測對象內部值改變（多層）。
備注：
(1).Vue自身可以監測對象內部值的改變，但Vue提供的watch默認不可以！
(2).使用watch時根據數據的具體結構，決定是否采用深度監視。
-->
<!-- 準備好一個容器-->
<div id="root">
<h3>今天天氣很{{info}}</h3>
<button @click="changeWeather">切換天氣</button>
<hr/>
<h4>a的值是:{{numbers.a}}</h4>
<button @click="numbers.a++">點我讓a+1</button>
<h4>b的值是:{{numbers.b}}</h4>
<button @click="numbers.b++">點我讓b+1</button>
<button @click="numbers = {a:666,b:888}">徹底替換掉numbers</button>
{{numbers.c.d.e}}
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1,
c:{
d:{
e:100
}
}
}
},
computed:{
info(){
return this.isHot ? '炎熱' : '涼爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
// immediate:true, //初始化時讓handler調用一下
//handler什么時候調用？當isHot發生改變時。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//監視多級結構中某個屬性的變化
/* 'numbers.a':{
handler(){
console.log('a被改變了')
}
} */
//監視多級結構中所有屬性的變化
numbers:{
deep:true,
handler(){
console.log('numbers改變了')
}
}
}
})
</script>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天氣案例_監視屬性_簡寫</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 準備好一個容器-->
<div id="root">
<h3>今天天氣很{{info}}</h3>
<button @click="changeWeather">切換天氣</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎熱' : '涼爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
//正常寫法
/* isHot:{
// immediate:true, //初始化時讓handler調用一下
// deep:true,//深度監視
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}, */
//簡寫
/* isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
} */
}
})
//正常寫法
/* vm.$watch('isHot',{
immediate:true, //初始化時讓handler調用一下
deep:true,//深度監視
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}) */
//簡寫
/* vm.$watch('isHot',(newValue,oldValue)=>{
console.log('isHot被修改了',newValue,oldValue,this)
}) */
</script>
</html>以上就是關于“Vue中的watch監視屬性怎么應用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
