zoukankan      html  css  js  c++  java
  • vue2.0 watch 详解

    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

    .

  • 相关阅读:
    Android中Activity和Fragment之间的通信
    用Android布局和简单控件实现的一个常见的界面
    【Linux】linux常用基本命令 [轉載]
    本地项目上传到gitlab
    spring boot 配置redis
    linux mysql的安装
    linux 安装 java环境变量
    mvc 跨域
    JSON 的几种简单格式和转换
    地区三级联动和全盘扫描索引的建立
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7728484.html
Copyright © 2011-2022 走看看