vue2.0 watch里面的 deep和immediate用法说明

 更新时间:2020年10月30日 11:27:51   作者:练洗之命  
这篇文章主要介绍了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用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于VUE的编译作用域及slot作用域插槽问题

    关于VUE的编译作用域及slot作用域插槽问题

    这篇文章主要介绍了VUE 的编译作用域及slot作用域插槽问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • 浅谈vue中的data与_data的关系是什么

    浅谈vue中的data与_data的关系是什么

    在Vue实例中,data属性是用户定义的用于存储数据的对象,而_data是Vue内部用于存储数据的对象,本文主要介绍了浅谈vue中的data与_data的关系是什么,感兴趣的可以了解一下
    2023-12-12
  • VueUse使用及造轮子选择对比示例详解

    VueUse使用及造轮子选择对比示例详解

    这篇文章主要为大家介绍了VueUse使用及造轮子选择对比示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue封装通用table组件的完整步骤记录

    Vue封装通用table组件的完整步骤记录

    对于一个中后台类的项目,一个比较常见的展示形式就是Table了,这篇文章主要给大家介绍了关于Vue封装通用table组件的相关资料,需要的朋友可以参考下
    2021-07-07
  • vue实现对highlight-current-row方式整行选中后修改默认背景颜色

    vue实现对highlight-current-row方式整行选中后修改默认背景颜色

    这篇文章主要介绍了vue实现对highlight-current-row方式整行选中后修改默认背景颜色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue正则表达式限制input的输入范围

    Vue正则表达式限制input的输入范围

    我们有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • vue 面包屑导航组件封装

    vue 面包屑导航组件封装

    本文主要介绍了vue 面包屑导航组件封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 在Vue使用$attrs实现构建高级组件

    在Vue使用$attrs实现构建高级组件

    本文我们主要来看下Vue3中的$attrs属性。首先,我们会介绍它的用途以及它的实现与Vue2有哪些不两同点,并通过事例来加深对它的理解
    2022-09-09
  • 学习vue.js表单控件绑定操作

    学习vue.js表单控件绑定操作

    这篇文章主要和大家一起学习vue.js表单控件绑定操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vite和Vue CLI的优劣

    Vite和Vue CLI的优劣

    这篇文章主要介绍了Vite比Vue CLI快在哪里,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2021-01-01

最新评论