vue_侦听属性变化_监视属性_watch

最新推荐文章于 2024-03-03 07:45:00 发布

若云止水

最新推荐文章于 2024-03-03 07:45:00 发布

阅读量2.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41812346/article/details/130183109

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>监视属性</h1>
    <input title="msg" type="text" v-model="msg" />
    
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue(
        {
            el: "#app",
            data: {
                msg: "vue"
            },
            watch:{
                // 要监视的属性
                msg :{
                    //固定方法，handler,当被监视的属性发生变化时，调用该方法
                    //一个参数 为变化后的值，第二个参数 为变化前的值
                    handler(newValue,oldValue){
                        console.log("after:" + newValue + "\nbefore:" + oldValue);
                    }
                }

            },
            computed:{
                reverse() {
                    return this.msg.split('').reverse().join('');
                }
            }
        }
    );
</script>
</body>
</html>

修改文本框中的内容，即修改data 中msg的值

immediate 初始化时调用一次handler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>监视属性</h1>
    <input title="msg" type="text" v-model="msg" />

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue(
        {
            el: "#app",
            data: {
                msg: "vue"
            },
            watch:{
                // 要监视的属性
                msg :{
                    //初始化时调用一次handler
                    immediate: true,
                    //固定方法，handler,当被监视的属性发生变化时，调用该方法
                    //一个参数 为变化后的值，第二个参数 为变化前的值
                    handler(newValue,oldValue){
                        console.log("after:" + newValue + "\nbefore:" + oldValue);
                    }
                }

            },
            computed:{
                reverse() {
                    return this.msg.split('').reverse().join('');
                }
            }
        }
    );
</script>
</body>
</html>

页面一加载就调用一次handler函数，变化前的值是未定义

监视o属性（一个对象）的b属性

o属性保存的是对象的地址，o的属性b变化时，o所指向的对象还是之前的对象，未发生改变，所以想要监视b的变化，不能写 o,也不能写b ，因为 vue对象并没有 b属性，有的是o,

要想监视b的变化，需要写 'o.b'

(此处需要加上引号，因为 o.b 的点 . 不符合命名要求，对象的属性不符合命名要求时需要加上引号才能使用，访问时只能用对象名[属性名] 的方式访问 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>监视属性</h1>
    <input title="o" type="text" v-model="o.b" />

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue(
        {
            el: "#app",
            data: {
                msg: "vue",
                o: {
                    b: 0
                }
            },
            watch:{
                // 要监视的属性
                'o.b' :{
                    //初始化时调用一次handler
                    immediate: true,
                    //固定方法，handler,当被监视的属性发生变化时，调用该方法
                    //一个参数 为变化后的值，第二个参数 为变化前的值
                    handler(newValue,oldValue){
                        console.log("after:" + newValue + "\nbefore:" + oldValue);
                    }
                }

            },
            computed:{
                reverse() {
                    return this.msg.split('').reverse().join('');
                }
            }
        }
    );
</script>
</body>
</html>

修改文本框的值

深度监视 deep

监视属性 o(是一个对象), o 中的任意属性发生变化时，会调用handler 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>监视属性</h1>
    <input title="a" type="text" v-model="o.a" />
    <input title="b" type="text" v-model="o.b" />

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue(
        {
            el: "#app",
            data: {
                msg: "vue",
                o: {
                    a: 1,
                    b: 2
                }
            },
            watch:{
                // 要监视的属性
                o :{
                    //深度监视
                    deep: true,
                    //固定方法，handler,当被监视的属性发生变化时，调用该方法
                    //一个参数 为变化后的值，第二个参数 为变化前的值
                    handler(newValue,oldValue){
                        console.log(newValue == oldValue);
                        console.log(newValue.a);
                    }
                }

            },
            computed:{
                reverse() {
                    return this.msg.split('').reverse().join('');
                }
            }
        }
    );
</script>
</body>
</html>

newValue,oldValue 指向的是同一个对象，变化后的对象 o

后期添加监视

vm.$watch()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>监视属性</h1>
    <input title="test" type="text" v-model="test" />

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue(
        {
            el: "#app",
            data: {
                msg: "vue",
                o: {
                    a: 1,
                    b: 2
                },
                test: "$watch"
            },
            watch:{
                // 要监视的属性
                o :{
                    //深度监视
                    deep: true,
                    //固定方法，handler,当被监视的属性发生变化时，调用该方法
                    //一个参数 为变化后的值，第二个参数 为变化前的值
                    handler(newValue,oldValue){
                        console.log(newValue == oldValue);
                        console.log(newValue.a);
                    }
                }

            },
            computed:{
                reverse() {
                    return this.msg.split('').reverse().join('');
                }
            }
        }
    );
    vm.$watch("test", {
        immediate:true,
        handler(newValue,oldValue){
            console.log(oldValue + "\n" + newValue);
        }
    });
</script>
</body>
</html>

若云止水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue_侦听属性变化_监视属性_watch

o属性保存的是对象的地址，o的属性b变化时，o所指向的对象还是之前的对象，未发生改变，所以想要监视b的变化，不能写 o,也不能写b ，因为 vue对象并没有 b属性，有的是o,(此处需要加上引号，因为 o.b 的点 . 不符合命名要求，对象的属性不符合命名要求时需要加上引号才能使用，访问时只能用对象名[属性名] 的方式访问 )监视属性 o(是一个对象), o 中的任意属性发生变化时，会调用handler 函数。newValue,oldValue 指向的是同一个对象，变化后的对象 o。
复制链接

扫一扫