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

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

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

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