乐趣区

关于前端:Vue-watch仅监听一次数据变更

jiezi

业务场景，逻辑在子组件内，子组件的数据变更要传递到父组件。仅在初始化时，父组件要传递给子组件一个初始状态（异步的传入），子组件执行状态变更。

这种状况下，仅第一次须要初始化状态（执行状态变更），尔后都是子组件的状态变更提交到父组件。提交后父子组件的状态统一，不须要再手动执行状态变更。
因而仅须要监听第一次数据变更，手动执行状态变更逻辑。

最根本的 watch 实现如下 

export default {
  data: {
    isDone: false,
    needWatch: "string",
  },
  watch: {needWatch(val) {if (!isDone) {
        // 解决业务逻辑
        // 之后变更 isDone 的状态
        this.isDone = true;
      }
    },
  },
};

下面这种做法的思路是应用 isDone 作为标记位。监听器始终存在，如果 done 了，watch 中不再执行业务逻辑。

下面的做法（申明式监听）尽管实现了性能，但监听器始终存在。

上面应用命令式监听来实现仅监听一次数据变更，在数据变更后，勾销监听。

export default {
  data: {needWatch: "string",},
  mounted() {const unwatch = this.$watch("needWatch", function (val) {
      // 解决业务逻辑
      // 之后调用 unwatch, 勾销监听
      unwatch();});
  },
};

到这里注释曾经完结了。

补充：
简略介绍申明式 watch 的语法。
vm.$watch(expOrFn, callback, [options] )

第一个参数是被监听的变量或函数。
第二个参数是回调函数，业务逻辑应该写在回调函数内。
第三个参数是配置项，配置项可选。配置项: {immediate: true, deep: true}

vm.$watch() 返回一个函数 unwatch，执行 unwatch 能够勾销监听。

须要留神，
如果 options 中开启了 immediate: true，那么不能在第一次回调时勾销侦听给定的 property，否则会报错。（上面这种写法会报错）

this.$watch(
  needWatch,
  function (val) {doSomething()
    unwatch()},
  {immediate: true}
)

同步更新到本人的语雀
https://www.yuque.com/diracke…

退出移动版