关于vue中watch检测到不到对象属性的变化的解决方法
前言
在vue开发的过程中发现一个问题：改变vue.$data中对象的属性，watch是观测不到变化，但其实对象的属性是有变化的。这……，有点难以置信！
正文
<template>
<div>
<dl>name: {{option.name}}</dl>
<dl>age: {{option.age}}</dl>
<dl>
<button @click="updateAgeTo25">update age with 25</button>
</dl>
</div>
</template>
<script>
export default {
data () {
return {
option: {
name: "isaac",
age: 24
}
}
},
watch: {
option(val) {
console.log(val)
}
},
methods: {
updateAgeTo25() {
this.option.age = 25
}
}
}
</script>
如结果所示，option.age已经更新，但是watch中的option函数并没有被触发。
vue的watch钩子会那么鸡肋？我是不信的了。
深层watch
...
watch: {
option: {
handler(newVal) {
console.log(newVal);
},
deep: true,
immediate: true
}
},
...
需要深层watch就需要开启deep属性
如结果所示。
另外，你会发现，在age没有变化前也是有打印出option，这是因为开启immediate属性，设定为true，
该回调将会在侦听开始之后被立即调用
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
问题内容： 我相信我犯了一个非常简单的错误/忽略了一些琐碎的事情。 编译时收到以下错误。 为什么我无法访问 Integer* 类中的 intValue（） 方法？ * 问题答案： 您正在使用决定命名的类型参数变量来遮盖该类型。 您的代码等同于 显然不会编译，因为（的边界）没有声明方法。 你想要的是 在这种情况下，用作类型参数。
-
本文向大家介绍解决vue中对象属性改变视图不更新的问题，包括了解决vue中对象属性改变视图不更新的问题的使用技巧和注意事项，需要的朋友参考一下 常规情况下我们在vue实例的data中设置响应数据。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？ 实例代码如下： 有三种解决方案： 方案一：利用Vue.set(object,key,val) 例：Vue.set(vm.
-
本文向大家介绍解决Vue不能检测数组或对象变动的问题，包括了解决Vue不能检测数组或对象变动的问题的使用技巧和注意事项，需要的朋友参考一下 来看一个实例： 想实现的效果是点击 li 看 vm.nymbers[index] 是否存在，不存在设置为1，存在的话加1。 点击之后数字并没有在view层更新，而通过console打印发现数据更新了，只是view层没有及时的检测到。 再看一个改动之后的： 可以
-
本文向大家介绍解决vue attr取不到属性值的问题，包括了解决vue attr取不到属性值的问题的使用技巧和注意事项，需要的朋友参考一下 js： html： 使用 ruleList.$nextTick(function () {}) 拿到更新后的dom 以上这篇解决vue attr取不到属性值的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍解决Webpack 热部署检测不到文件变化的问题，包括了解决Webpack 热部署检测不到文件变化的问题的使用技巧和注意事项，需要的朋友参考一下 今天在用Webpack开发的时候，突然发现文件变动后热部署功能不工作了，感觉好像是webpack检测不到文件的修改了。折腾了半天，开始一直以为是自己的代码有问题了，结果一次无意识的重启了一下机器后发现又可以热部署了，感觉像是见鬼了。于是继续
-
问题内容： 所以这是我的交易 楷模 ....以下模型（这些模型已连接到EfDbContext）已连接到以下存储库… 接口/存储库 在我的HomeController（）中，我得到了一个JsonResult方法，我想返回上下文。这是方法 杰森请求 我收到以下错误： 序列化类型为’System.Data.Entity.DynamicProxies.News_96C0B16EC4AC46070505EE