Vue中的?watch監(jiān)聽屬性詳情

更新時(shí)間：2022年01月24日 13:52:30 作者：huxiaoxiao.

這篇文章主要介紹了Vue中的?watch監(jiān)聽屬性詳情，mputed計(jì)算屬性用來(lái)監(jiān)聽多個(gè)數(shù)據(jù)；watch?監(jiān)聽單個(gè)數(shù)據(jù)；本文將具體介紹的是?watch監(jiān)聽屬性，感興趣的小伙伴可以參考一下文章的具體內(nèi)容，希望對(duì)你有所幫助

1.第一個(gè) handler：其值是一個(gè)回調(diào)函數(shù)。即監(jiān)聽到變化時(shí)應(yīng)該執(zhí)行的函數(shù)。
2.第二個(gè)是 deep：其值是 true 或 false；確認(rèn)是否深入監(jiān)聽。(一般監(jiān)聽時(shí)是不能監(jiān)聽到對(duì)象屬性值的變化的，數(shù)組的值變化可以聽到。)
3.第三個(gè)是 immediate：其值是 true 或 false；確認(rèn)是否以當(dāng)前的初始值執(zhí)行 handler 的函數(shù)。

一.watch監(jiān)聽一般數(shù)據(jù)的變化(數(shù)值，字符串，布爾值)

舉例說(shuō)明：

1.數(shù)值

在data數(shù)據(jù)中心的num，當(dāng)我們通過(guò)點(diǎn)擊事件讓它發(fā)生變化時(shí)，通過(guò)watch監(jiān)聽屬性監(jiān)聽它的變化

<div id="app">
        <p>{{num}}</p>
        <button @click="num++">點(diǎn)擊加一</button>
    </div>
      let vm = new Vue({
            el:'#app',
            data:{
                num:0
            },
            watch:{
            // 當(dāng)前值（已經(jīng)改變的值）newval  舊值 oldval
                num:function(newval,oldval){
                    console.log("新值是："+newval);
                    console.log("舊值是："+oldval);
                }
            }
        })

當(dāng)我們點(diǎn)擊按鈕時(shí)，查看控制臺(tái)：

注意：在watch中還有其他兩種方法

 watch:{
            // 當(dāng)前值（已經(jīng)改變的值）newval  舊值 oldval
                // num(newval,oldval){
                //     console.log("新值是："+newval);
                //     console.log("舊值是："+oldval);
                // }
                num:{
                    handler(newval,oldval){
                    console.log("新值是："+newval);
                    console.log("舊值是："+oldval);
                    }
                }
            }

輸出結(jié)果是一致的，下面的例子統(tǒng)一使用第三種方法，也就是帶handler的方法。

2.字符串

<div id="app">
        <input type="text" v-model="mes">
        <p>輸入的內(nèi)容為：{{mes}}</p>
    </div>
 let vm = new Vue({
            el:'#app',
            data:{
                mes:''
            },
            watch:{
                mes:{
                    handler(newval,oldval){
                        console.log("新的內(nèi)容："+newval);
                        console.log("舊的內(nèi)容："+oldval);
                    }
                }
            }
        })

當(dāng)我們?cè)谖谋究騼?nèi)輸入內(nèi)容時(shí)：

查看輸出結(jié)果：

3.布爾值

<div id="app">
        <p v-show="isShow">通過(guò)修改布爾值顯示和隱藏</p>
        <button @click="isShow = !isShow">點(diǎn)擊改變布爾值</button>
    </div>
 

let vm = new Vue({
            el:'#app',
            data:{
                isShow:true
            },
            watch:{
                isShow:{
                    handler(newval,oldval){
                        console.log("新的值："+newval);
                        console.log("舊的值："+oldval);
                    }
                }
            }
        })

當(dāng)點(diǎn)擊按鈕切換時(shí)，查看控制臺(tái)：

二.watch 監(jiān)聽復(fù)雜類型數(shù)據(jù)的變化

deep 屬性：深度監(jiān)聽對(duì)象變化 (代表是否深度監(jiān)聽)，當(dāng)需要監(jiān)聽一個(gè)對(duì)象的改變時(shí)，普通的 watch 方法無(wú)法監(jiān)聽到對(duì)象內(nèi)部屬性的改變，此時(shí)就需要 deep 屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽。

1.對(duì)象

<div id="app">
        <input type="text" v-model="mes.name">
        <p>輸入的內(nèi)容是：{{mes.name}}</p>
    </div>
let vm = new Vue({
            el:'#app',
            data:{
                mes:{name:''}
            },
            watch: {
                mes:{
                    // watch監(jiān)聽屬性監(jiān)聽對(duì)象時(shí)新舊值時(shí)相同的
                    handler(newval){
                        console.log("新值為："+this.mes.name);
                    },
                    deep:true
                }
            }
        })

在文本框中輸入內(nèi)容后，查看控制臺(tái)：

也可以在對(duì)象中添加num，通過(guò)滑動(dòng)桿來(lái)控制num的值，并監(jiān)聽：

 <input type="range" v-model="mes.num">
 data:{
                mes:{name:'',num:''}
            },
 
watch: {
                mes:{
                    // watch監(jiān)聽屬性監(jiān)聽對(duì)象時(shí)新舊值時(shí)相同的
                    handler(newval){
                        console.log("num新值："+this.mes.num);
                    },
                    deep:true
                }
            }

滑動(dòng)時(shí)查看輸出結(jié)果：

2.數(shù)組

<body>
    
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{item}}</li>
        </ul>
        <!-- 添加一個(gè)按鈕，點(diǎn)擊時(shí)往數(shù)組中添加一個(gè)新內(nèi)容 -->
        <button @click="add()">點(diǎn)擊添加</button>
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                arr:[1,2,3,4,5]
            },
            methods:{
                add(){
                    // 獲取當(dāng)前數(shù)組最大值
                    let cont = this.arr[this.arr.length-1];
                    // 自增
                    cont++;
                    // 向數(shù)組最后一位添加元素
                    this.arr.push(cont);
                }
            },
            watch: {
                arr:{
            // 監(jiān)聽數(shù)組的時(shí)候不需要深度監(jiān)聽，不需要deep
                    handler(newval){
                        console.log("新數(shù)組為："+newval);
                    }
                }
            }
        })
    </script>
</body>

點(diǎn)擊添加元素后，查看輸出結(jié)果：

3.對(duì)象數(shù)組

<body>
    
    <div id="app">
        <ul>
            <li v-for="item in list">
                {{item.id}}--{{item.name}}
            </li>
        </ul>
        <!-- 定義文本框，向數(shù)組中添加新的對(duì)象 -->
        <input type="text" v-model="id">
        <input type="text" v-model="name">
        <button @click="add()">添加</button>
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:"哇哈"},
                    {id:2,name:"哇哈哈"},
                    {id:3,name:"哇哈哈哈"}
                ],
                id:"",
                name:''
            },
            methods: {
                // 將收到的輸入內(nèi)容添加到數(shù)組中
                add(){
                    this.list.push({id:this.id,name:this.name});
                    // 清除文本框的內(nèi)容
                    this.id=this.name=''
                }
            },
            watch:{
                // 注意：watch對(duì)象中監(jiān)聽的數(shù)據(jù)，一定是數(shù)據(jù)中心data中已經(jīng)存在的數(shù)據(jù)
                // watch監(jiān)聽數(shù)組對(duì)象 新，舊值是相等，但是監(jiān)聽數(shù)組的時(shí)候，不需要 深度監(jiān)聽！
                list:{
                    handler(newval){
                        newval.forEach((item)=>{
                            console.log(item.name);
                        })                       
                    }
                }
            }
        })
    </script>
</body>

添加新元素后查看輸出結(jié)果：

4.對(duì)象數(shù)組的屬性

<body>
    
    <div id="app">
        <ul>
            <li v-for="x in list">
                {{x.id}}---{{x.name}} &emsp;
                <button @click="mod(x.id)">修改</button>
            </li>
        </ul>
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'ww'},
                    {id:2,name:'ee'},
                    {id:3,name:'qq'}
                ],
            },
            methods: { 
                mod(id,name){
                    this.list.forEach((item)=>{
                        // 在遍歷的過(guò)程中做判斷，如果你點(diǎn)擊的id就是你當(dāng)前編輯的這一條數(shù)據(jù)
                        if(item.id == id){
                            item.name = "老鐵"
                            console.log(item);
                        }
                    })
                }
            },
            watch: {
                list:{
                    handler(x,y){
                        x.forEach((element)=>{
                            console.log(element.name);
                        })
                    },
                    deep:true
                }
            }
        })
    </script>
</body>

點(diǎn)擊修改時(shí)，查看輸出結(jié)果：