Vue中如何避免watch方法调用时的潜在问题？

本文共计497个文字，预计阅读时间需要2分钟。

在调用watch中的方法时，页面经常找不到方法。这时一定要在watch中输出this，查看this包含的内容是否多层，若找不到方法，可能是因为层级太多。目前我还不太理解这一点。

这里是说watch调用methods里方法的时候，页面经常会报找不到方法

这个时候一定要在watch里去输出一下this，

看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题。

例如

正常情况下用this.functionname()就可以调用了。

但是在一些情况下（现在本人还没找到原因）在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层，所以使用方法的时候就会变成 this.a.methods.funtionname()

原因还在找，不过解决办法先记下来。

补充知识：使用 Vue 的最佳做法---不要在“created”和“watch”中调用方法

我就废话不多说了，大家还是直接看代码吧~

watch: { params: { handler: function (val, oldVal) { if (val == '1') { this.initTableData() } }, deep: true }, property: { immediate: true, handler: function (val, oldVal) { this.initTableData() }, }, },

Vue开发人员经常犯的一个错误是他们不必要地在created和watch中调用方法。 其背后的想法是，我们希望在组件初始化后立即运行watch。

// 不好的做法 created: () { this.handleChange() }, methods: { handleChange() { // stuff happens } }, watch () { property() { this.handleChange() } }

但是，Vue为此提供了内置的解决方案，这是我们经常忘记的Vue watch属性。

我们要做的就是稍微重组watch并声明两个属性：

1.handler (newVal, oldVal)-这是我们的watch方法本身。

2. immediate: true- 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行

// 好的做法 methods: { handleChange() { // stuff happens } }, watch () { property { immediate: true handler() { this.handleChange() } } }

以上这篇解决Vue watch里调用方法的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。