<!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>
VUE框架深度监视与打开页面立即实现监视效果------VUE框架
于 2023-11-28 15:22:31 首次发布