Vue监听数据变化

2023-07-19 06:07| 来源: 网络整理| 查看: 265

监听数据变化,在Vue中是通过侦听器来实现的,时刻监听某个数据的变化

watch的基本用法侦听器的书写位置写在export default中与data和methods用,隔开 export default { name: "app", // 数据 key---data value---Function data: function () { return { count: 1 }; }, // 方法 key---methods value---{} methods: {}, //在export default中添加即可不用管顺序 watch: { //监听内容 count() { console.log("count发生了变化"); } } };

监听器里的方法一定要与被监听的变量名一致

侦听器的进阶用法获取前一次的值

有的时候需要上一次的数据,再上一个案例中添加一个参数即可获取旧值

watch:{ inputValue(value,oldValue) { // 第一个参数为新值，第二个参数为旧值，不能调换顺序 console.log(`新值：${value}`); console.log(`旧值：${oldValue}`); } } handler方法和immediate属性

immediate: 可以让页面第一次渲染的时候去触发侦听器 handler: 监听到修改之后这个函数会执行侦听器实际上是一个对象,里面包含了handler方法和其他属性:

export default { name: "app", watch: { firstName: { handler: function (newName, oldName) { this.fullName = newName + " " + this.lastName; }, immediate: true } } };

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章