vue中computed和watch之间的差异之(更新篇)

watch监听在后来的项目中需深度监听,比如对象下面的某一个属性变化了,需要执行一些方法
还有的需求是页面首次进来,虽然没有数据变化,但是希望执行监听里面的代码

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher 这种使用于对象下面的某个属性的深度监听
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

但是在真实的项目开发中,监听对象下面的某些属性是偶发性的不生效,到目前都没有找到问题的原因;现在能解决的办法就是把对象下面的属性单独出来作为一个属性由父组件传进子组件可暂时解决

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,776评论 25 709
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,050评论 3 119
  • 长期,是最重要的概念 可以通过专注 行动 努力把自己的长期变得比别人的长期更短一些。 经常花时间设身处地从他人角度...
    漂亮的蓝一阅读 2,732评论 0 0
  • “《杀手的眼泪》讲述的是一个发生在智利边缘蛮荒大陆上的感人故事。一位天真纯洁的男孩,一个恶贯满盈的杀人犯,一个浪...
    小树TV阅读 4,556评论 0 0
  • 日精进打卡第61天 知~学习 《六项精进》读2遍 《大学》读2遍 经典名句分享 君子持躬不可不谨严 行~实践 一、...
    愈挫愈勇666阅读 818评论 0 0