形如上述做法，在methods里定义的函数btnClick(),如果用箭头函数的写法，this指向的将会是
windows
,并且windows根本访问不到data属性中返回的数据
undefined
首先
在箭头函数中
this引用的是
定义箭头函数的上下文
（官方话语），我们来思考一下，定义btnClick()函数的究竟是什么，是全局上下文也就是
Windows,
因为无论是
methods：{}
还是
Vue.createApp（{}）
，他们都是
一个对象
，不是一个单独的作用域，所以这里的this是指向的Windows
因为counter变量储存在
data属性
中，而data与methods不同的是，
data实质上是一个函数
，也就是说data拥有单独的作用域，外部windows自然无法访问到
Vue
的
methods
里面不可以
使用
箭头函数
vue
中
的
methods
不可以
使用
箭头函数
，因为this指向的不是
vue
实例，
使用
箭头函数
打印this，发现是undefined
methods
: {
test: () => {
console.log(this); // undefined
箭头函数
没有this，this其实是外部的this，即
箭头函数
体内的this对象，就是
定义
时所在的对象，而不是
使用
时所在的对象。所以
箭头函数
的this是固定的，
不能
改变或者重
Vue
里面
methods
对象里面如果
使用
箭头函数
会导致this指向不是
vue
实例，而是一个xxx.a的一个类，尽量不要在
vue
所
定义
的字段里面
使用
箭头函数
。
由此可见，
vue
中
的自带方法
使用
箭头函数
会出现各种错误，慎用！！！
例子：想写一个点击事件：点击输入框的“x”,即可清空文本框的内容
首先为输入框增加一个ref属性（ref=“inputUser”），然后为“x”加一个点击事件（@click=“deleteInp”）
methods
中
使用
普通
函数
：
methods
: {
deleteInp : func...
在
vue
中
一个完整的生命周期过程，我们可以得知生命周期的三个过程：初始化、运行
中
、销毁
中
共有八个钩子
函数
，如下。
● beforeCreate( ) { }
● created( ) { }
● beforeMount( ) { }
●mounted( ) { }
● beforeUpdate( ) { }
● updated( ) { }
● beforeDestroy( ) { }
● destroyed( ) { }
生命周期钩子的 this 上下文指向调用它的
Vue
实例。
生命周期钩子函
在
Vue
中
，data选项用于
定义
组件实例的初始数据。通常情况下，我们可以将data选项
定义
为一个对象，其
中
包含所有数据属性及其初始值。但是，有时候我们需要为每个组件实例提供一个独立的数据副本，以避免组件之间相互影响。为了实现这一点，我们可以
使用
一个
函数
来
定义
data选项。
使用
函数
式的data选项有两个好处：
1. 每个组件实例都会调用一次这个
函数
，返回一个新的数据对象，从而避免了组件之间共享数据的问题。
2.
函数
式的data选项可以访问组件实例的属性，例如props和
methods
，从而可以动态地设置数据属性的初始值。
因此，
使用
函数
式的data选项是一种更加灵活和安全的方式来
定义
组件的初始数据。
Vue - 解决子组件中修改props值报错(error Unexpected mutation of “---“ prop vue/no-mutating-props)
weixin_58309708:
