解决Vue watch里调用方法的坑

网络编程 2024/9/1 佚名

3 2 1

这里是说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调用方法

标签：

Vue,watch调用方法

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

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

解决Vue watch里调用方法的坑

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

解决Vue watch里调用方法的坑

Vue,watch调用方法

解决vue props传Array/Object类型值,子组件报错的情况

浅谈vue.watch的触发条件是什么

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接