目录一、侦听器watch1.1.初识侦听器watch1.2.Vue的data的watch1.3.Vue的watch侦听选项一、侦听器watch (思维导图不太完善,因为是按照自己看
(思维导图不太完善,因为是按照自己看懂的方式记的,如有错误,还请指正)
⭐⭐
watch:观看,监视
那么什么是侦听器watch
呢
data
返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template
中;template
会自动进行更新来显示最新的数据;watch
来完成了;⭐⭐
案例:
const app = Vue.createApp({
data() {
return {
message: "Hello Vue",
info: { name: "kk", age: 18 },
};
},
methods: {
changeMessage() {
this.message = "hello kk";
this.info = { name: "kk" };
},
},
watch: {
// 1.默认有两个参数,newValue/oldValue
message(newValue, oldVale) {
console.log("message数据发生了变化", newValue, oldValue);
},
info(newValue, oldValue) {
// 2.如果是对象类型,那么拿到的是代理对象
console.log("info数据发生了变化", newValue, oldValue);
console.log(newValue.name, oldValue.name);
// 3.获取原始对象
console.log({ ...newValue });
⭐⭐
<div id="app">
<h2>{{info.name}}</h2>
<button @click="changeInfo">修改info</button>
</div>
const app = Vue.createApp({
data() {
return {
info: { name: "kk", age: 18 },
};
},
methods: {
changeInfo() {
// 创建一个对象,赋值给info
this.info = { name: "kk" };
// 直接修改对象里的一个属性
this.info.name = "kk";
},
},
watch: {
// 默认watch监听不会进行深度监听
info(newValue, oldValue) {
console.log("侦听到info改变", newValue, oldValue);
},
// 进行深度监听
info: {
handler(newValue, oldValue) {
console.log("侦听到info改变", newValue, oldValue);
console.log(newValue === oldValue);
},
// 监听器选项
// info进行深度监听
deep: true,
// 第一次渲染直接执行一次监听器
immediate: true,
},
},
"info.name": function (newValue, oldValue) {
console.log("name发生改变", newValue, oldValue);
},
});
app.mount("#app");
到此这篇关于Vue中的侦听器watch的文章就介绍到这了,更多相关Vue侦听器watch内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 老生常谈Vue中的侦听器watch
本文链接: https://www.lsjlt.com/news/169429.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0