相思资源网 Design By www.200059.com

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

标签:
Vue,watch调用方法

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“解决Vue watch里调用方法的坑”

暂无解决Vue watch里调用方法的坑的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。