Vue学习之监视属性watch

最新推荐文章于 2025-03-05 01:22:47 发布

我会努力变强的

最新推荐文章于 2025-03-05 01:22:47 发布

阅读量501

点赞数 1

分类专栏： JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_40837310/article/details/122736627

版权

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用watch属性来监视数据变化，并展示了如何通过配置深度监视和立即调用。通过实例演示了配置`person`对象和`a1`属性的监视过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

设置监视属性的作用：

当被监视的属性发生变化时，回调函数会自动调用，进行相关操作。
监视的熟悉必须存在，才能进行监视。
使用vue的配置对象中的watch属性进行配置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
</head>
<body>
    <div id="root">
        {{a1}} <br>
        {{person}}
    </div>

    <script src="./js/vue.js"></script>

    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({

            el:"#root",
            data:{
                person:{
                    name:"yehaocong",
                    age:18,
                    school:{
                        name:"jiaying"
                    }
                },
                a1:66,
            },
            watch:{
            
                //正常写法，可以进行一些属性配置
                //属性名必须在data中存在
                person:{
                    //开启深度监视，默认是关闭的
                    //vue自身可以监视多层数据，但是watch属性的数据默认不能监视多层，要手动开启
                    //deep:true,
                    //是否需要在页面加载时就调用一次回调函数，默认不调用，由这个属性设置。
                    //immediate:true,
                    //回调函数，会接收两个值，一个是改变前，一个是改变后
                    handler(){
                        console.log("被修改了");
                    }
                },
                //简便写法：
                //属性名必须在data中存在
                //会接收两个值，一个是改变前，一个是改变后
                //这种方式就不可以进行一些额外配置，比如深度监视，初始化等
                a1(oldV,newV){
                        console.log("a1属性被修改了，旧值：",oldV,",新值：",newV);
                }

            }

        })
    </script>
</body>
</html>