快捷導(dǎo)航

Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)

更新時(shí)間：2022年05月27日 10:19:23 作者：??奔跑吧雞翅????

這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實(shí)現(xiàn)，文章以天氣為例展開介紹Vue?監(jiān)視屬性?的相關(guān)內(nèi)容，需要的小伙伴可以參考一下

天氣案例實(shí)現(xiàn)

<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
        },
        methods:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        computed:{
            info(){
                return this.isHot?'炎熱':'涼爽'
            }
        }
    })
</script>

兩個(gè)注意事項(xiàng)

1、上面我們用到了計(jì)算屬性 info 來(lái)展示天氣。如果我們把天氣寫死，不用這個(gè)計(jì)算屬性，那么 vue 開發(fā)這工具里的相關(guān)值是不變的

如下，初始值 isHot = true，天氣炎熱，但我們把頁(yè)面的值寫死，不用 isHot

我們點(diǎn)擊切換天氣按鈕，vue 開發(fā)者工具中展示的還是炎熱，其實(shí)我們通過(guò)打印發(fā)現(xiàn)，isHot 值其實(shí)已經(jīng)變了

2、如果點(diǎn)擊切換天氣按鈕時(shí)，我們僅僅是把 isHot 取反，我們可以這樣寫

<button @click="isHot = !isHot">切換天氣</button>

之前寫的 changeWeather() 也就不需要了

但是如果要做的事不止一件，例如還要維護(hù)一個(gè)別的數(shù)據(jù)，最好還是寫一個(gè)方法

<button @click="isHot = !isHot;x++">切換天氣</button>

監(jiān)視屬性

如果我們需要知道 isHot 什么時(shí)候發(fā)生了變化，可以在上邊的代碼上增加

watch:{
	isHot:{
		//immediate:true,//初始化時(shí)讓handler()調(diào)用一下
		//handler()什么時(shí)候調(diào)用？當(dāng)isHot改變時(shí)
		handler(newValue,oldValue){
			console.log('isHost被修改了',oldValue,newValue);
		}
	}
}

注意：

1、當(dāng)設(shè)置其中的 immediate:true ，那么初始化的時(shí)候 handler() 也會(huì)調(diào)用一下
2、也能監(jiān)視計(jì)算屬性

info:{
	immediate:true,//初始化時(shí)讓handler()調(diào)用一下
    handler(newValue,oldValue){
		console.log('info被修改了',oldValue,newValue);
	}
}

3、也可以動(dòng)態(tài)調(diào)用

const vm = new Vue({
        el:'#root',
        ......
})
vm.$watch('isHot',{
	handler(newValue,oldValue){
		console.log('isHot被修改了',oldValue,newValue);
    }
})

監(jiān)視屬性watch

1、當(dāng)被監(jiān)視的屬性變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，進(jìn)行相關(guān)操作
2、監(jiān)視的屬性必須存在，才能進(jìn)行監(jiān)視

監(jiān)視的兩種寫法:

(1).new Vue 時(shí)傳入 watch 配置
(2).通過(guò) vm.$watch 監(jiān)視

深度監(jiān)視

如果有數(shù)據(jù) numbers ，結(jié)構(gòu)如下

numbers:{
	 a:1,
	 b:1
}

現(xiàn)在需要監(jiān)視其中 a 的變化，寫法：

<h3>a的值是{{numbers.a}}</h3>
<button @click="numbers.a++">點(diǎn)我讓a+1</button>

new Vue({
        el:'#root',
        data:{
            numbers:{
                a:1,
                b:1
            }
        },
        watch:{
            //監(jiān)視多級(jí)結(jié)構(gòu)中某個(gè)屬性的變化
            'numbers.a':{
               handler(){
                   console.log('a發(fā)生了變化');
               }
            }
        }
    })

如果是想檢測(cè) numbers 中任意值發(fā)生變化可以這樣寫：

<div id="root">
    <h3>a的值是{{numbers.a}}</h3>
    <button @click="numbers.a++">點(diǎn)我讓a+1</button>
    <h3>b的值是{{numbers.b}}</h3>
    <button @click="numbers.b++">點(diǎn)我讓b+1</button>
</div>

new Vue({
        el: '#root',
        data: {
            numbers: {
                a: 1,
                b: 1
            }
        },
        watch: { 
            //監(jiān)視多級(jí)結(jié)構(gòu)中所有屬性的變化
            numbers: {
                deep: true,
                handler() {
                    console.log('numbers發(fā)生了變化');
                }
            }
        }
    })

其中 deep: true是關(guān)鍵，如果不寫是不能實(shí)現(xiàn)的

深度監(jiān)視

(1).vue 中的 watch 默認(rèn)不監(jiān)測(cè)對(duì)象內(nèi)部值的改變（一層）
(2).配置 deep:true 可以監(jiān)測(cè)對(duì)象內(nèi)部值改變（多層）

備注：

(1).vue 自身可以監(jiān)測(cè)對(duì)象內(nèi)部值的改變，但Vue提供的 watch 默認(rèn)不可以
(2).使用 watch 時(shí)根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視

監(jiān)視的簡(jiǎn)寫形式

如果 watch 中只有 handler 時(shí)，可以簡(jiǎn)寫：

		watch:{
            //完整寫法
            /*isHot:{
                //immediate:true,//初始化時(shí)讓handler()調(diào)用一下
                //deep: true,//深度監(jiān)視
                handler(newValue,oldValue){
                    console.log('isHost被修改了',oldValue,newValue);
                }
            }*/
            isHot(newValue,oldValue){
                console.log('isHost被修改了',oldValue,newValue);
            }
        }

當(dāng)然也可以動(dòng)態(tài)調(diào)用

	//完整寫法
    vm.$watch('isHot',{
        //immediate:true,//初始化時(shí)讓handler()調(diào)用一下
        //deep: true,//深度監(jiān)視
        handler(newValue,oldValue){
            console.log('isHost被修改了',oldValue,newValue);
        }
    })
    //簡(jiǎn)寫，簡(jiǎn)寫后就不能寫上邊的屬性了
    vm.$watch('isHot',function (oldValue,newValue) {
        console.log('isHost被修改了',oldValue,newValue);
    })

到此這篇關(guān)于Vue 監(jiān)視屬性之天氣案例實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 監(jiān)視屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: