网络编程
位置：首页>> 网络编程>> JavaScript>> 解决Vue watch里调用方法的坑

解决Vue watch里调用方法的坑

作者：Lg泪光　　发布时间：2024-05-05 09:10:44　

标签：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()
 }
}
}

来源：https://blog.csdn.net/qq_38604499/article/details/81354363

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com