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.js # javascript # es6
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue