vue watch 监听不到变化_关于vue中watch检测到不到对象属性的变化的解决方法

前言

在vue开发的过程中发现一个问题：改变vue.$data中对象的属性，watch是观测不到变化，但其实对象的属性是有变化的。这……，有点难以置信！

正文

update age with 25

export default {

data () {

return {

option: {

name: "isaac",

age: 24

}

watch: {

option(val) {

console.log(val)

}

methods: {

updateAgeTo25() {

this.option.age = 25

}

如结果所示，option.age已经更新，但是watch中的option函数并没有被触发。

vue的watch钩子会那么鸡肋？我是不信的了。

深层watch

...

watch: {

option: {

handler(newVal) {

console.log(newVal);

deep: true,

immediate: true

}

...

需要深层watch就需要开启deep属性

如结果所示。

另外，你会发现，在age没有变化前也是有打印出option，这是因为开启immediate属性，设定为true，

该回调将会在侦听开始之后被立即调用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue watch 监听不到变化_关于vue中watch检测到不到对象属性的变化的解决方法相关推荐

vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况使用下标修改某个元素(这种比较常见) array[index] = 1 objec ...
VUE 全局监听sessionStorage变化
VUE 全局监听sessionStorage变化另参考: (转)vue中监听sessionStorage的变化
Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...
Vue 深度监听和初始绑定
vue的监听属性普通方式无法监听对象内部属性的改变,并且初始化时不会监听数据对象. vue为监听属性提供了一种对象方法 watch: {'option.size': {// handler为默认执行的 ...
vue动态监听窗口高度 - 全背景banner
vue动态监听窗口高度 - 全背景banner 参考项目文件 src/hr/index.vue [结合下文:第一种方法] 第一种方法:[本文手写代码] data() {return {screenHe ...
vue watch监听中 immediate, deep, hander的作用
1. immediate immediate的值默认是false,在第一次进入页面页面时,如果没有发生数据变化watch并不会立即监听只有发生数据改变,hander才会有操作,但是如果将immedia ...
监听关闭页面事件 ajax,Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试, 终于解决了这个问题,代码如下: mounted() { ...
vue @scroll 监听滚动条事件
vue @scroll 监听滚动条事件为啥要使用 @scroll 监听滚动条事件没用在vue.js 开发前我们监听滚动条事件都是在window挂监听事件例如:window.onscroll = ...
oracle监听显示未成功_理解 oracle 的 lsnrctl status
理解 oracle 的 "lsnrctl status" 先看看 lsnrctl status 的输出信息: Services Summary... Service "P ...

vue watch 监听不到变化_关于vue中watch检测到不到对象属性的变化的解决方法

vue watch 监听不到变化_关于vue中watch检测到不到对象属性的变化的解决方法相关推荐

最新文章

热门文章