VUE框架深度监视与打开页面立即实现监视效果------VUE框架

旧约Alatus

已于 2023-11-28 21:45:27 修改

阅读量911

点赞数 21

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript ecmascript 前端框架 vue html5

于 2023-11-28 15:22:31 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134668585

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>数字:<input type="text" v-model:value="value"/></h1>
        <h1>监视B:<input type="text" v-model:value="a.b"/></h1>
        <h1>监视C:<input type="text" v-model:value="a.c"/></h1>
        <h1>监视F:<input type="text" v-model:value="a.d.e.f"/></h1>
    </div>
    <script>
        const vm = new Vue({
            data : {
                msg : "Hello",
                value : "",
                a : {
                    b : 0,
                    c : 0,
                    d : {
                        e : {
                            f : 0
                        }
                    }
                }
            },
            computed : {
                hehe()
                {
                    return "hehe" + this.value;
                }
            },
            watch : {
                //可以监视多个属性的
                // 监视什么属性,就把什么属性放在这即可
                value : {
                    immediate : true,
                    // 这里有一个固定写死的方法就叫handler
                    // handler什么时候被调用
                    handler(newValue,oldValue)
                    {
                        // 如果是箭头函数,这个对象是window对象
                        // 依旧不建议箭头函数
                        // 默认是vm对象(vue实例对象)
                        console.log(this);
                        // 这个方法在被监视参数变化时自动调用
                        // handler有两个参数,第一个是newValue,另外一个是oldValue
                        // newValue是属性改变后的新数值,oldValue是改变前的老数值
                        console.log("自带的老的" + oldValue);
                        console.log("自带的新的" + newValue);
                    }
                },
                // 无法监视b属性,因为b属性在data下压根不存在
                // 如果监视的属性具有多级属性,一定要记得添加单引号
                "a.b" : {
                    // 因此我们修改b,a的内存指向压根没变
                    // 只是b的值变化了,所以对于a来说,他没有产生变化
                    // 不会触发变更的handler方法
                    handler(newValue,oldValue)
                    {
                        console.log(this);
                        console.log("自带的老的" + oldValue);
                        console.log("自带的新的" + newValue);
                    }
                },
                "a.c" : {
                    handler(newValue,oldValue)
                    {
                        console.log(this);
                        console.log("自带的老的" + oldValue);
                        console.log("自带的新的" + newValue);
                    }
                },
                "a" : {
                    // 启用深度监视,可以将这个多层级结构的所有属性一并监视
                    deep : true,
                    handler(newValue,oldValue)
                    {
                        console.log(this);
                        console.log("自带的老的" + oldValue);
                        console.log("自带的新的" + newValue);
                    }
                },
                // 可以监视一般属性也可以监视计算属性
                hehe : {
                    handler(newValue,oldValue)
                    {
                        console.log(this);
                        console.log("hh的老的" + oldValue);
                        console.log("hh的新的" + newValue);
                    }
                }
            }
        });
        vm.$mount("#app");
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

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

</head>

<body>

<div id="app">

<h1>{{msg}}</h1>

<h1>数字:<input type="text" v-model:value="value"/></h1>

<h1>监视B:<input type="text" v-model:value="a.b"/></h1>

<h1>监视C:<input type="text" v-model:value="a.c"/></h1>

<h1>监视F:<input type="text" v-model:value="a.d.e.f"/></h1>

</div>

<script>

const vm = new Vue({

data : {

msg : "Hello",

value : "",

a : {

b : 0,

c : 0,

d : {

e : {

f : 0

}

}

}

},

computed : {

hehe()

{

return "hehe" + this.value;

}

},

watch : {

//可以监视多个属性的

// 监视什么属性,就把什么属性放在这即可

value : {

immediate : true,

// 这里有一个固定写死的方法就叫handler

// handler什么时候被调用

handler(newValue,oldValue)

{

// 如果是箭头函数,这个对象是window对象

// 依旧不建议箭头函数

// 默认是vm对象(vue实例对象)

console.log(this);

// 这个方法在被监视参数变化时自动调用

// handler有两个参数,第一个是newValue,另外一个是oldValue

// newValue是属性改变后的新数值,oldValue是改变前的老数值

console.log("自带的老的" + oldValue);

console.log("自带的新的" + newValue);

}

},

// 无法监视b属性,因为b属性在data下压根不存在

// 如果监视的属性具有多级属性,一定要记得添加单引号

"a.b" : {

// 因此我们修改b,a的内存指向压根没变

// 只是b的值变化了,所以对于a来说,他没有产生变化

// 不会触发变更的handler方法

handler(newValue,oldValue)

{

console.log(this);

console.log("自带的老的" + oldValue);

console.log("自带的新的" + newValue);

}

},

"a.c" : {

handler(newValue,oldValue)

{

console.log(this);

console.log("自带的老的" + oldValue);

console.log("自带的新的" + newValue);

}

},

"a" : {

// 启用深度监视,可以将这个多层级结构的所有属性一并监视

deep : true,

handler(newValue,oldValue)

{

console.log(this);

console.log("自带的老的" + oldValue);

console.log("自带的新的" + newValue);

}

},

// 可以监视一般属性也可以监视计算属性

hehe : {

handler(newValue,oldValue)

{

console.log(this);

console.log("hh的老的" + oldValue);

console.log("hh的新的" + newValue);

}

}

}

});

vm.$mount("#app");

</script>

</body>

</html>