Vue中为什么不能使用箭头函数来定义methods函数（详解）

阿侑

3427人浏览 · 2021-06-03 18:24:49

阿侑 · 2021-06-03 18:24:49 发布

Vue的methods里定义的函数为什么不能用箭头函数形式

//我们来先看一段简单的代码

在这里插入图片描述

形如上述做法，在methods里定义的函数btnClick(),如果用箭头函数的写法，this指向的将会是windows,并且windows根本访问不到data属性中返回的数据undefined

我们来解释两个问题

this的指向?

首先在箭头函数中this引用的是定义箭头函数的上下文（官方话语），我们来思考一下，定义btnClick()函数的究竟是什么，是全局上下文也就是Windows,因为无论是methods：{}还是Vue.createApp（{}），他们都是 一个对象，不是一个单独的作用域，所以这里的this是指向的Windows

为什么不能用箭头函数形式？

因为counter变量储存在data属性中，而data与methods不同的是，data实质上是一个函数，也就是说data拥有单独的作用域，外部windows自然无法访问到

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^