07_侦听器
侦听器
定义：
当被侦听的属性发生变化时，自动调用回调函数
示例：
<body>
<div id="app">
<h1>{{ info }}</h1>
<h1>你的年龄为：{{ age }}</h1>
<input type="text" placeholder="输入你的年龄" v-model="age" />
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
age: 40,
name: 'byoy',
};
},
computed: {
info() {
return 'hello world!';
},
},
watch: {
age: {
// 初始化时就调用handler函数一次
immediate: true,
// 当data中的age发生改变时调用handler函数
handler(newValue, oldValue) {
console.log(`新值：${newValue} - 旧值：${oldValue}`);
},
},
info: {
immediate: true,
handler() {
console.log('info被侦听了');
},
},
},
});
// 侦听器的另外一种写法
vm.$watch('byboy', {
immediate: true,
handler() {
console.log('name被侦听了');
},
});
</script>
</body>
深度侦听
watch默认不侦听对象内部的数据，配置deep属性能侦听对象内部值的改变
<body>
<div id="app">
<h1>ID：{{ student.id }}</h1>
<h1>name：{{ student.name }}</h1>
<h1>age：{{ student.age }}</h1>
<button @click="student.age++">chagne age</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
student: {
id: 1,
name: 'byboy',
age: 20,
},
};
},
watch: {
student: {
// 配置deep属性
deep: true,
handler(newValue, oldValue) {
console.log(newValue.age, oldValue.age);
},
},
},
});
</script>
</body>
侦听器简写
当你不需要初始化时调用watch和深度侦听的时候可以使用简写
<body>
<div id="app">
<h1>{{ age }}</h1>
<button @click="age++">change age</button>
<h1>{{ year }}</h1>
<button @click="year++">change year</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
age: 20,
year: 2023,
};
},
watch: {
// 直接写成一个函数
age: function (newValue, oldValue) {
console.log(newValue, oldValue);
},
},
});
// 侦听器的另外一种写法
vm.$watch('year', function (newValue, oldValue) {
console.log(newValue, oldValue);
});
</script>
</body>
computed和watch之间的区别：
-
computed能完成的功能，watch都可以完成。
-
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
小提示：
被vue管理的函数一般写成普通函数，this指向vm或组件实例对象
不被vue管理的函数一般写成箭头函数（定时器的回调函数、ajax的回调函数），this指向vm或组件实例对象
阅读剩余
THE END
