computed与watch应用场景

computed:一个属性值随其它值变化,一般页面显示

1. computed擅长处理的场景:一个数据受多个数据影响
    computed拥有缓存属性,
    只有当依赖的数据发生变化时,关联的数据才会变化,
    适用于计算或者格式化数据的场景.
    
        总结:模板中的表达式简洁,易维护
           1. 变量不在data中定义,而是定义在computed,写法跟些方法一样,有返回值(return 出来),函数名直接在页面中渲染,不需要小括号
           2. 根据传入的变量的变化 进行结果的更新
           3. 计算属性属于响应式依赖进行缓存,如果其中的没有值改变,则它调用的就是上一次 计算缓存的数据,因此提高了性能
              而methods中每一次调用就会重新计算 一次,为了进行不必要的资源浪费,选择计算属性
              

watch:监听值变化,然后进行某些操作

2. watch擅长处理的场景:一个数据影响多个数据
    watch: 监听
        当一条数据影响多条时就需要用到watch

immerdiate 属性

通过声明 immediate 选项为 true,可以立即执行一次 handler。

watch 并不适用于显示某一个数据以及数据的拼装等。watch 用在监听数据变化,做某些指令操作(给后台发数据请求)

deep属性(深度监听时)

不使用 deep 时,当我们改变 obj.a 的值时,watch不能监听到数据变化,默认情况下,handler 只监听属性引用的变化,也就是只监听了一层,但改对象内部的属性是监听不到的

通过使用 deep: true 进行深入观察,这时,我们监听 obj,会把 obj 下面的属性层层遍历,都加上监听事件,这样做,性能开销也会变大,只要修改 obj 中任意属性值,都会触发 handler.

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值