deep原理 vue的watch_vue2.0 watch里面的 deep和immediate用法说明

deep，默认值是 false，代表是否深度监听。

immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

computed: {

btnObj() {

const { sign_img, check } = this

return {

sign_img,

check

}

}

},

watch: {

btnObj: {

handler: function(newVal,oldVal) {

if(!!this.sign_img && this.check){

this.submit_flag = true

this.sign_flag = "1"

}else{

this.submit_flag = false

this.sign_flag = "0"

}

},

deep: true,

immediate: true

}

}

补充知识：在vue中使用watch监测数据改变的deep:true,和immediate:true

在项目中，有时候检测一个变量的值是否反升了变化。通常使用的watch或者使用低效的循环判断。

在次vue中给我们设置了深度监测数据繁盛变化的方法。

1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;

2.immediate:true,代表watch里面声明了之后会立马执行handler里面的函数。

这是一个使用vuex中的一个数据，settingData.在实际中要检测其值发生改变之后要让一个button按钮的disabled属性移除。我们可以使用类似的方式，但是这样写的时候必须使用handler函数。

还有immediate:true,代表watch里面声明了之后会立马执行handler里面的函数。执行相应的逻辑。

如果不设置这些属性可以使用循环的方式。

1.若是检测的是对象，使用循环的时候可以将其转换成数组。(简单的对象处理)

1.使用Object.keys(obj)将其对象中的key拿出来放进一个数组中

a.for...in...

b.[].slice.call(object)

2.然后使用循环将对相应的值存储在另一个数组中。

3.然后根据业务逻辑处理相应的数组

2.使用es6语法糖的方式

1.数组转对象

2.对象转数组

Array.from(object)

复杂的问题总有简单的思路，遇到问题先思考出路然后写代码。

以上这篇vue2.0 watch里面的 deep和immediate用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持云海天教程。

原文链接：https://www.cnblogs.com/lianxisheng/p/10436203.html