有的时候vue会出现这种现象，无法监听到复杂对象内部的变化：当对象里面原本有某一个属性，并对这个属性操作时，watch是可以监听到当前属性的变化的。但是，若对象里面本没有这个属性的时候，在操作时将属性添加进去，同时包括之后对这个属性的操作，watch是都检测不到的。

这是因为vue的watch会在初始化的时候通过object.defineProperty给对象的每一个属性都添加watcher来监听内部的变化。所以，后期添加上去的属性是无法检测到的。

解决方法：

如果想在初始化后添加一个属性并进行监听操作，可以使用$set：

// this.$set(object, key, value)
// 使用this.$set就可以监听到
this.$set(this.obj, 'a', Math.random())

转载至 watch监听不到变化？ - 掘金

# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue