1、介紹
Vue中的監(jiān)視屬性是通過watch選項(xiàng)來實(shí)現(xiàn)的。watch選項(xiàng)可以是一個對象，其中的每個屬性都是要監(jiān)視的屬性名，而每個屬性的值都是一個回調(diào)函數(shù)，用于處理這個屬性的變化。
例如，假設(shè)有一個Vue實(shí)例的data對象中有一個屬性message，我們想要監(jiān)視這個屬性的變化，可以通過watch選項(xiàng)來實(shí)現(xiàn)：
new Vue({
data: {
message: 'Hello, Vue!'
},
watch: {
message: function(newValue, oldValue) {
console.log('message的值已經(jīng)改變了：', newValue, oldValue);
}
}
})
在上面的例子中，當(dāng)message屬性的值發(fā)生變化時，watch選項(xiàng)中定義的回調(diào)函數(shù)會被觸發(fā)，并且會接收到新的值和舊的值作為參數(shù)。然后，我們可以在回調(diào)函數(shù)中執(zhí)行任意的操作，比如打印變化的值。
除了對象方式的watch選項(xiàng)外，Vue還提供了一種更簡便的方式，即使用計(jì)算屬性。使用計(jì)算屬性可以更方便地監(jiān)視屬性的變化，并且可以利用Vue的響應(yīng)式系統(tǒng)自動更新計(jì)算屬性的值。
例如，我們可以通過計(jì)算屬性來監(jiān)視message屬性的變化：
new Vue({
data: {
message: 'Hello, Vue!'
},
computed: {
messageWatcher: {
get: function() {
return this.message;
},
set: function(newValue) {
console.log('message的值已經(jīng)改變了：', newValue, this.message);
this.message = newValue;
}
}
}
})
在上面的例子中，我們定義了一個計(jì)算屬性messageWatcher，它的get方法返回message屬性的值，而set方法用于監(jiān)視message屬性的變化，并在變化時執(zhí)行回調(diào)函數(shù)。通過這種方式，我們可以更方便地監(jiān)視屬性的變化，并且可以在回調(diào)函數(shù)中對屬性的變化做出響應(yīng)。
2、案例天氣案例
效果
comuted 使用計(jì)算屬性實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>監(jiān)視屬性</title>
<!--引入vue-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天氣很{{info}}</h2>
<button @click="changeweather">切換天氣</button>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;
new Vue({
el:"#root",
data:{
ishot:true
},
computed:{
info(){
return this.ishot ? '炎熱':'寒冷';
}
},
methods:{
changeweather(){
this.ishot = !this.ishot;
}
}
})
</script>
</body>
</html>
3、使用watch 監(jiān)視屬性第一種寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>監(jiān)視屬性實(shí)現(xiàn)天氣案例</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天氣很{{info}}</h2>
<button @click="changeweather">切換天氣</button>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;
new Vue({
el:"#root",
data:{
ishot:true
},
computed:{
info(){
return this.ishot ? '炎熱':'寒冷';
}
},
methods:{
changeweather(){
this.ishot = !this.ishot;
}
},
watch:{
ishot: {
immediate:true,//初始化時讓handler調(diào)用一下
//hander 什么時候被調(diào)用？當(dāng)ishot發(fā)生修改時。
handler(newvalue,oldvalue){
console.log(newvalue,oldvalue);
}
}
}
})
</script>
</body>
</html>
使用watch 第二種方式文章來源：http://www.zghlxwxcb.cn/news/detail-824238.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>監(jiān)視屬性實(shí)現(xiàn)天氣案例</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天氣很{{info}}</h2>
<button @click="changeweather">切換天氣</button>
</div>
<script type="text/javascript">
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:{
// ishot: {
// immediate:true,//初始化時讓handler調(diào)用一下
// //hander 什么時候被調(diào)用？當(dāng)ishot發(fā)生修改時。
// handler(newvalue,oldvalue){
// console.log(newvalue,oldvalue);
// }
// }
// }
})
vm.$watch('ishot',{
immediate:true,//初始化時讓handler調(diào)用一下
//hander 什么時候被調(diào)用？當(dāng)ishot發(fā)生修改時。
handler(newvalue,oldvalue){
console.log(newvalue,oldvalue);
}
})
</script>
</body>
</html>
總結(jié)：
文章來源地址http://www.zghlxwxcb.cn/news/detail-824238.html
到了這里，關(guān)于Vue-12、Vue監(jiān)視屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
