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

31次阅读

共计 969 个字符,预计需要花费 3 分钟才能阅读完成。

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

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

最根本的 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…

正文完
 0