【Vue学习笔记】属性检测（侦听属性）watch

ـ٨ـﮩﮩ٨ـ千帆ﮩ٨、

已于 2023-02-25 14:23:46 修改

阅读量223

点赞数

分类专栏： Vue学习笔记文章标签： vue.js javascript 学习

于 2023-02-25 10:18:23 首次发布

本文链接：https://blog.csdn.net/biancheng_/article/details/129212309

版权

Vue学习笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

属性检测(watch)在Vue中用于监听数据变化并执行相应操作，尤其适合异步或开销大的场景。与计算属性不同，watch是异步的，可使用immediate和deep选项。deep用于监听对象属性的深层变化，而计算属性则主要用于同步计算并返回结果。文章提供了watch的用法示例及与计算属性和方法的区别。

摘要由CSDN通过智能技术生成

什么是属性检测（侦听属性）watch？

需要在数据变化时执行异步或开销较大的操作时，这个时候需要属性检测watch。而不要使用计算属性，因为计算属性是同步的（需要立即返回结果）。watch监听主要用来监听data中的数据当data的数据改变了watch就会触发执行一些函数方便我们再数据改变之后完成一些功能。

语法：

watch:{
  被侦听的属性名:'methods的里函数名'    //数据名==data的key
  被侦听的属性名:函数体(new,old){}
  被侦听的属性名:{
    handler:function(new,old){},
    deep: true //面试题：深度检测，当侦听的属性是个对象，修改对象的某个键时，就能检测到
    immediate: true //首次运行,要不要监听
  }
}

1.handler方法就是监听的数据改变之后触发的函数

2.watch在首次加载不会触发如果我们想触发必须使用immedate属性来开启首次加载监听

3,再就是watch默认不会监听到对象的属性的改变如果我们想监听对象的属性改变我们可以使用deep属性
这个属性来开启深度监听但是开启deep会有一些问题比如说新旧val相同或者是性能上的浪费因为开启deep之后他会把这个对象的所有属性都监听到浪费资源我们也可以使用字符串方式设置监听内容来提升性能
deep优化

	  "obj.name":{
                    handler(newval,oldval){
                        console.log(newval)
                        console.log(oldval)
                    },
                  deep:true //开启深度监听
                }

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        {{n}}<br><br>
        <button @click="n++">加1</button><br><br>
    </div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>

    /*
        1.当被监听的属性发生改变时，自动调用回调函数
        2.被监听的属性必须存在,（计算属性也可被监听）
        3.监听的写法
        a. Vue实例中 
        b. 全局
        4.如果希望监听的元素，一上来就触发函数immediate:true
    */
    
    let vm = new Vue({
        el:"#root",
        data:{
            n:0,
        },
        computed:{
            m:function(){
                return this.n * 2;
            }
        }
        //局部
        //watch:{
            //简写
            // n:function(){
            //     console.log("heihei");
            // }
            //局部
            // n:{
            //     handler:function(){
            //         console.log("heihei");
            //     },
            //     immediate:true
            // }
        //}
    }); 

    //全局
    vm.$watch("n",{
        handler:function(){
            console.log("heihei");
        },
        immediate:true
    });
    vm.$watch("m",{
        handler:function(){
            console.log("haha");
        },
        immediate:true
    });
</script>

深度检测：

深度监听:Vue中的监听只能监视第一层，如果有需要进行多层监听，请用 deep:true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
    
    </div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    /*
        深度监听:Vue中的监听只能监视第一层，
        如果有需要进行多层监听，请用
        deep:true
    */
    let vm = new Vue({
        el:"#root",
        data:{
            score:{
                english:100,
                math:50
            }
        },
        watch:{
            score:{
                handler(){
                    console.log("heihei");
                },
                deep:true
            }
        }
    }); 


</script>

计算属性 VS 函数（方法）VS 属性检测

	计算属性（computed）	函数（methods）	属性检测（侦听）（watch）
作用	为了显示而用	只是处理逻辑，跟普通的函数一样	属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数
依赖模板调用	√（只能在模板上调用的）	√（可以在模板使用）	×（不能在模板上使用）
是否缓存	√	×	√
异步	×（必须是同步）	√（可以有异步）	√（可以有异步）

解释：

本质： computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，当依赖的属性值发生改变时，才会重新计算
computed 的值，默认是只读的（相当于getter函数），它也可以设置getter和setter函数来完成读和写 watch：
更多的是观察的作用，每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter.

运用场景： computed：当我们需要进行数值计算，并且依赖于其它数据时，使用 computed。只用写同步代码，只能在模板上使用。
watch：当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch。不能在模板上使用。