Vue学习 9监视属性

Revin050

已于 2022-07-16 10:28:54 修改

阅读量212

点赞数 2

分类专栏： VUE学习文章标签： vue.js 学习 javascript

于 2022-02-17 17:41:31 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/122987532

版权

VUE学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

监视属性

监视属性watch,写法与computed类似。当我们需要监听属性变化时，就可以使用watch。
watch中包含deep(深度监听)、immediate(立即执行)、与handler()

handler()

handler的调用发生在所监视的属性发生变化时。handler具有两个参数，分别为newVlaue和oldValue。
如果实现一个功能，功能要求是点击按钮切换姓名，并且查看新旧名字的变化，那么watch的具体使用如下所示

<body>
    <div id="demo">
        <h1>我的名字是{{name}}</h1>
        <button @click="flag=!flag">点击切换姓名</button>
    </div>
    <script>
        var vm = new Vue({
            el:'#demo',
            data:{
                flag:true,
                // name:Revin1
            },
            computed:{
                name(){
                    return this.flag ? 'Revin1':'Revin2' 
                }
            },
            watch:{
                name:{
                    handler(newValue,oldValue){
                        alert("新名字是"+newValue+"旧名字是"+oldValue)
                        console.log(newValue,oldValue)
                    }
                }
                
            }
        })

    </script>

</body>

在上面的案例中，当name属性发生变化时，handler就会自动调用执行。

deep

deep用来进行深度监听，默认为false。在如下代码中，如果deep为false，那么不管b与c如何变化，a都检测不到。当deep为true时，无论b与c任何一个发生变化，都会被检测出来。也就是利用deep进行深度监视。
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）（也就是deep默认为false）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<body>
    <div id="demo">
        <h1>我的名字是{{name}}</h1>
        <button @click="flag=!flag">点击切换姓名</button>
    </div>
    <script>
        var vm = new Vue({
            el:'#demo',
            data:{
                flag:true,
                a:{
                    b:1,
                    c:2
                }
                // name:Revin1
            },
            computed:{
                name(){
                    return this.flag ? 'Revin1':'Revin2' 
                }
            },
            watch:{
                name:{
                    
                    handler(newValue,oldValue){
                        alert("新名字是"+newValue+"旧名字是"+oldValue)
                        console.log(newValue,oldValue)
                    }
                },
                a:{
                    deep:false,
                    handler(){
                        console.log("检测到a中发生了变化")
                    }
                }
                
            }
        })

    </script>

</body>

immediate

immediate代表立即的、立刻的。在witch中immediate默认为false。
当immediate修改成true时就会立即调用handler()。

注意事项

监视属性watch：
1.当被监视的属性变化时, 回调函数(也就是handler())自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

watch的简写

如果在watch中不需要修改deep和immediate，仅仅需要handler()时，就可以使用简写
完整写法与简写如下

            watch:{
                // 完整写法
                name:{
                    
                    handler(newValue,oldValue){
                        alert("新名字是"+newValue+"旧名字是"+oldValue)
                        console.log(newValue,oldValue)
                    }
                },
                
            },
            watch:{
                // 简写写法
                name(newValue,oldValue){
                    alert("新名字是"+newValue+"旧名字是"+oldValue)
                        console.log(newValue,oldValue)
                }
            }

computed和watch之间的区别

computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或组件实例对象。