Vue监听数据变化
监听数据变化,在Vue中是通过侦听器来实现的,时刻监听某个数据的变化watch的基本用法侦听器的书写位置<script>export default {name: "app",// 数据 key---data value---Functiondata: function () {return {count: 1};},// 方法 key---methods value---{}.
·
监听数据变化,在Vue中是通过侦听器来实现的,时刻监听某个数据的变化
watch的基本用法
- 侦听器的书写位置
写在export default中与data和methods用,隔开
<script>
export default {
name: "app",
// 数据 key---data value---Function
data: function () {
return {
count: 1
};
},
// 方法 key---methods value---{}
methods: {},
//在export default中添加即可不用管顺序
watch: {
//监听内容
count() {
console.log("count发生了变化");
}
}
};
</script>
监听器里的方法一定要与被监听的变量名一致
侦听器的进阶用法
获取前一次的值
有的时候需要上一次的数据,再上一个案例中添加一个参数即可获取旧值
watch:{
inputValue(value,oldValue) {
// 第一个参数为新值,第二个参数为旧值,不能调换顺序
console.log(`新值:${value}`);
console.log(`旧值:${oldValue}`);
}
}
handler方法和immediate属性
immediate: 可以让页面第一次渲染的时候去触发侦听器
handler: 监听到修改之后这个函数会执行
侦听器实际上是一个对象,里面包含了handler方法和其他属性:
<script>
export default {
name: "app",
watch: {
firstName: {
handler: function (newName, oldName) {
this.fullName = newName + " " + this.lastName;
},
immediate: true
}
}
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)