码迷,mamicode.com
首页 > 其他好文 > 详细

vue2.0 watch

时间:2017-08-30 00:54:53      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:选项参数   nbsp   turn   some   异步加载   键值   color   包含   变化   

类型:string | Function | Object

vue官网解释: 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

也就是说watch可以监听对象的变化,规则是键值对方式。

export default {
    props: {
      fatherAjaxData: {
        type: Object
      }
    },
    data() {
      return {
        a: 1,
        b: 2,
        c: 3
      }
    },
    watch: {
      // 父级异步加载的数据 props 方式给到 当前子级
      fatherAjaxData: function (val, oldVal) {
        this.$nextTick(() => {
          console.log(‘监听到已异步加载的fatherAjaxData数据 已有值‘);
        });
      },
      a: function (val, oldVal) {
        console.log(`watch a val change --- new val: ${val}, old val: ${oldVal}`);
      },
      // watch_b_val_change 方法名
      b: ‘watch_b_val_change‘,
      c: {
        handler: function (val, oldVal) {
          console.log(`watch c val change --- new val: ${val}, old val: ${oldVal}`);
        },
        deep: true // 为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
      }
    },
    mounted() { // vue 生命周期方法 vue页面全部加载完毕(不包括异步数据)
      this.$nextTick(() => {
        console.log(‘vue页面加载完毕!‘);
      });
    },
    methods: {
      watch_b_val_change(val, oldVal) {
        console.log(`watch b val change --- new val: ${val}, old val: ${oldVal}`);
      }
    }
  };

this.$nextTick :vue生命周期方法 当数据发生变化 dom变化后 执行$nextTick的callback方法

deep: 为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

vm.$watch(‘someObject‘, callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

 

vue2.0 watch

标签:选项参数   nbsp   turn   some   异步加载   键值   color   包含   变化   

原文地址:http://www.cnblogs.com/juexin/p/7450842.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!