vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式

更新時(shí)間：2024年08月07日 10:32:05 作者：天魔老師

這篇文章主要介紹了vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue監(jiān)視器@Watch創(chuàng)建執(zhí)行immediate

vue監(jiān)視器@Watch的immediate參數(shù)，表示在watch中首次綁定的時(shí)候，是否執(zhí)行handler函數(shù)，

1.值為true則表示在watch中聲明的時(shí)候，就立即執(zhí)行handler方法，

2.值為false，則和一般使用watch一樣，在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行handler。

async created() {  
    // await this.refreshMessageBody()
}

@Watch('message',{
    immediate:true,    
    // immediate表示在watch中首次綁定的時(shí)候，是否執(zhí)行handler，
    // 值為true則表示在watch中聲明的時(shí)候，就立即執(zhí)行handler方法，
    // 值為false，則和一般使用watch一樣，在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行handler。
})
async refreshMessageBody(){
    console.log("message改變了");
    await this.func1();
    await this.func2();
}

vue監(jiān)視屬性（watch）

監(jiān)視屬性

監(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)視

3.監(jiān)視的兩種寫法：

new Vue時(shí)傳入watch屬性
通過app.$watch監(jiān)視

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>監(jiān)視</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
  	<!--第一種寫法-->
    <h2>今天天氣很{{isHot ? '炎熱':'涼爽'}}</h2>
    <!--第二種寫法：通過計(jì)算屬性-->
    <h2>今天天氣很{{info}}</h2>
    <!--綁定methods的方法-->
    <button @click="change">點(diǎn)擊切換天氣</button>
    <!--離譜寫法：適用于簡單測試-->
    <button @click="isHot = !isHot">點(diǎn)擊切換天氣</button>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            isHot: true
        },
        methods: {
          change: function (){
              this.isHot = !this.isHot
          }
        },
        computed: {
            info: {
                get: function (){
                    if (this.isHot==true){
                        return '炎熱'
                    }else{
                        return '涼爽'
                    }
                },
                set: function (){
                    this.isHot = !this.isHot
                }

            }
        },
        watch: {
            //監(jiān)視誰
            isHot: {
                //什么時(shí)候調(diào)用？當(dāng)isHot改變
                handler(newValue,oldValue) {
                    console.log('isHot被修改惹',newValue,oldValue)
                },
                //初始化時(shí)讓handler調(diào)用一下
                immediate: true
            }
        }
    })
    //可以替換上面的watch屬性
    app.$watch('isHot',{
        //什么時(shí)候調(diào)用？當(dāng)isHot改變
        handler(newValue,oldValue) {
            console.log('isHot被修改惹',newValue,oldValue)
        },
        //初始化時(shí)讓handler調(diào)用一下
        immediate: true
    })
</script>
</body>
</html>

深度監(jiān)視

深度監(jiān)視：

? 1.vue中的watch默認(rèn)不監(jiān)測對象內(nèi)部值的改變（一層）

? 2.配置deep：true可以檢測對象內(nèi)部值改變（多層次）

備注：

? 1.vue自身可以監(jiān)測對象內(nèi)部值的改變，但vue提供的watch默認(rèn)不可以

? 2.使用watch時(shí)根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>監(jiān)視簡寫形式</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">

    <h2>今天天氣很{{isHot ? '炎熱':'涼爽'}}</h2>

    <button @click="change">點(diǎn)擊切換天氣</button>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 2
            }
        },
        methods: {
          change: function (){
              this.isHot = !this.isHot
          }
        },
        computed: {
            info: {
                get: function (){
                    if (this.isHot==true){
                        return '炎熱'
                    }else{
                        return '涼爽'
                    }
                },
                set: function (){
                    this.isHot = !this.isHot
                }

            }
        },
        watch: {
            //完整寫法
            // isHot: {
            //     // deep: true,深度監(jiān)視
            //     handler(newValue,oldValue) {
            //         console.log('isHot被修改惹',newValue,oldValue)
            //     },
            //     //初始化時(shí)讓handler調(diào)用一下
            //     // immediate: true
            // },
            //簡寫
            isHot(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
            }
        }
    })
    //完整寫法
    app.$watch('isHot',{
        //什么時(shí)候調(diào)用？當(dāng)isHot改變
        handler(newValue,oldValue) {
            console.log('isHot被修改惹',newValue,oldValue)
        },
        //初始化時(shí)讓handler調(diào)用一下
        immediate: true
    })
    //不允許寫箭頭函數(shù)，會導(dǎo)致this指向的不是app，
    // vue管理的函數(shù)(methods中的，computed，watch中的)都得寫普通函數(shù)，
    // 不能寫es6里的箭頭函數(shù)
    app.$watch('isHot',function(newValue,oldValue) {
        console.log('isHot被修改惹',newValue,oldValue)
    })
</script>
</body>
</html>

監(jiān)視效果：

computed VS watch

計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器。

這就是為什么 Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法，來響應(yīng)數(shù)據(jù)的變化。

當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的

computed與watch區(qū)別

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如：watch可以進(jìn)行異步操作

注意：

所被Vue管理的函數(shù)，最好寫成普通函數(shù)，這樣this的指向才是vue實(shí)例對象或組件實(shí)例對象
所有不被Vue所管理的函數(shù)（定時(shí)器的回調(diào)函數(shù)、ajax的回調(diào)函數(shù)等），最好寫成箭頭函數(shù)，這樣this的指向才是vue的實(shí)例或組件的實(shí)例對象