Vue中watch属性和methods的方法用箭头函数定义结果会怎么样?

作者：管理员 2019-07-04 16:50:32 分类：Vue2.js专栏阅读（5065） 0

我不知道大家有没有注意，在实际项目中你看到过别人在这两处是用箭头函数去定义的吗？好像没有，我看那些箭头狂魔写的代码也没这么弄过，那这是为啥有想过吗？

示例methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<template>
<div>
<p @click="sum">点击我吧</p>
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
a: 1
};
},
methods: {
sum: ()=>{
this.a++
}
}
};
</script>

结果

最终结果是你怎么点都没反应，但并没报错，this指向当前执行的方法对象{sum: {…}}。为什么？官方其实有说：不应该使用箭头函数来定义 method 函数 (例如 plus: () => sum.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined，至于watch可以自己测试下，其结果也是如此，不演示了。

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(3) 打赏

标签：

Vue.js

上一篇：怎么保留Vue.js渲染模板时模板中的HTML注释

下一篇：在vue事件中传入$event，使用e.target和e.currentTarget有什么区别

Vue中watch属性和methods的方法用箭头函数定义结果会怎么样?

示例methods

结果

相关推荐

共 0 条评论关于"Vue中watch属性和methods的方法用箭头函数定义结果会怎么样?"

点击取消