请注意，本文编写于 67 天前，最后修改于 67 天前，其中某些信息可能已经过时。
目录
一、
1. 侦听器的基本使用
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侦听器的基本使用</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<input type="text" v-model="question">
<!-- <button @click="queryAnswer">查找答案</button> -->
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
question: "Hello World"
}
},
// 侦听器
watch: {
// question是侦听data中的属性名称
// newValue变化后的新值
// oldValue变化前的旧值
question(newValue, oldValue) {
console.log("新值：", newValue, "旧值:", oldValue);
// 调用methods方法
this.queryAnswer();
}
},
methods: {
queryAnswer() {
console.log(this.question);
}
},
computed: {
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
2. 侦听器的选项
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侦听器的选项</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<h2>{{ info.name }}</h2>
<h2>{{ info.nba.name }}</h2>
<button @click="changeInfo">修改info</button>
<button @click="changeInfoName">修改info.name</button>
<button @click="changeInfoNbaName">修改info.nba.name</button>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
info: {name: "test", age: 18, nba: {name: "kobe"}}
}
},
// 侦听器
watch: {
// 默认情况下侦听器只能侦听本身数据的改变(内部发生的改变是不能侦听的)
// info(newInfo, oldInfo) {
// console.log(newInfo, oldInfo);
// },
// 深度侦听/立即执行(页面加载会直接执行一次)
info: {
handler: function(newInfo, oldInfo) {
console.log(newInfo, oldInfo);
},
deep: true, // 设置深度侦听
immediate: true // 立即执行
}
},
// 方法
methods: {
changeInfo() {
this.info = {name: "why"};
},
changeInfoName() {
this.info.name = "kobe";
},
changeInfoNbaName() {
this.info.nba.name = "test";
}
},
// 计算属性
computed: {
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
3. 侦听器的其他方式
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侦听器的其他方式</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<h2>{{ info.name }}</h2>
<button @click="changeInfo">修改info</button>
<button @click="changeInfoName">修改info.name</button>
<button @click="changeInfoNbaName">修改info.nba.name</button>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
info: {name: "test", age: 18, nba: {name: "kobe"}}
}
},
// 侦听器
watch: {
// "info.name": function(newName, oldName) {
// console.log(newName, oldName);
// }
},
// 方法
methods: {
changeInfo() {
this.info = {name: "why"};
},
changeInfoName() {
this.info.name = "kobe";
},
changeInfoNbaName() {
this.info.nba.name = "test";
}
},
// 计算属性
computed: {
},
created() {
this.$watch("info", function(newInfo, oldInfo) {
console.log(newInfo, oldInfo);
}, {
deep: true,
immediate: true
})
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
本文作者:ruiwiki
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
目录
