解决Vue watch里调用方法的坑
这里是说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里调用方法的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。