computed和watch的区别是什么?watch中deep属性和immediate的作用是什么?

参考:computed和watch的区别

1、watch: 一个数据影响多个数据
2、computed:一个数据受多个数据影响
3、watch computed methods区别
(1)watch computed以Vue的依赖追踪机制为基础,只要依赖数据发生变化,所有依赖这个数据的“相关”数据会“自动”发生变化,即自动调用相关函数去实现数据的变动
(2)methods里定义的函数需要手动调用才能执行
4、举例说明
new Vue({
  el: '#app',
  // 设置两个button,点击分别调用getMethodsDate,getComputedDate方法
  template: 
'<div id="app">
    <button @click="getMethodsDate">methods</button>
    <button @click="getComputedDate">computed</button>
</div>',
  methods: {
    getMethodsDate: function () {
      alert(new Date())
    },
    // 返回computed选项中设置的计算属性——computedDate
    getComputedDate: function () {
      alert(this.computedDate)
    }
  },
  computed: {
    computedDate: function () {
      return new Date()
    }
  }
  1. 两次点击methods返回的时间是不同的
  2. 注意两次点击computed返回的时间是相同的,因为此时computed提供的是缓存的值,而没有重新计算
    computed进行重新计算的条件:
    1. 存在依赖型数据(放在data等对象下的实例数据)
    2. 依赖数据发生改变
5、deep和immediate的作用

参考:vue.js监听属性watch(handler方法immediate属性deep属性)

  • deep:为true时,可实现深度监听。watch需要监听对象的改变时,普通watch无法实现对对象属性的监听,只有data中的数据才能实现监听,因此需要深度监听,实现对对象属性的监听。
  • immediate:为true时,可立即执行监听函数。一般情况下,当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值