Vue3的版本

"version": "3.2.20"

阅读区域

618 - 645

解决疑惑

1. methods 对象的 this指向
2. methods 对象的里的 方法 为什么不能用箭头函数

代码

// 当 methods 有方法时
if (methods) {// 对methods对象中的每一个方法遍历for (const key in methods) {// 取出每一个方法const methodHandler = (methods as MethodOptions)[key]// 判断是否是方法Function类型if (isFunction(methodHandler)) {// In dev mode, we use the `createRenderContext` function to define// methods to the proxy target, and those are read-only but// reconfigurable, so it needs to be redefined here// 在开发环境时if (__DEV__) {Object.defineProperty(ctx, key, {// 对每个方法进行绑定this的作用域 this等于这里的publicThisvalue: methodHandler.bind(publicThis),configurable: true,enumerable: true,writable: true})} else {// 非开发环境时，对每个方法进行this的绑定ctx[key] = methodHandler.bind(publicThis)}if (__DEV__) {checkDuplicateProperties!(OptionTypes.METHODS, key)}} else if (__DEV__) {warn(`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +`Did you reference the function correctly?`)}}}

1. methods 对象的 this指向

从上面的源码看出，我们找到 publicThis的指向是 实例的代理

const publicThis = instance.proxy! as any

而这个实例的代理就是Vue中的data对象，所以this指向的就是data返回的对象啦。

2. methods 对象的里的方法为什么不能用箭头函数

箭头函数表达式 的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target

如果你用箭头表达式，那么它的this将为指向window

理解this实例

'use strict';
var obj = {i: 10,b: () => console.log(this.i, this),c: function() {console.log( this.i, this)}
}
obj.b();
// undefined, Window{...}
obj.c();
// 10, Object {...}

分析绑定时，用bind绑定后的结果

let obj = {a: 10
};
let fun = () => {console.log(this.a, typeof this.a, this);return this.a+10;// 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
}
Object.defineProperty(obj, "b", {get: fun.bind(obj) //尝试改变this的指向
});obj.b; // undefined   "undefined"   Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

现在我相信你可以理解在methods里不能用箭头函数的原因啦。

理解Vue中的methods对象方法里的this指向，并解读源码相关推荐

vue 中遍历数组对象存到一个新数组里
vue 中遍历数组对象存到一个新数组里(亲测可行!!!) 参考文档 : MDN-解构赋值方法一 : For of 迭代和解构 var people = [{name: 'Mike Smith',f ...
vue中mixins的使用方法和注意地方
一.什么是Mixins? mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如dat ...
Vue中的this.$nextTick方法的使用 [前端][Vue框架]
Vue中的this.$nextTick方法的使用因为在vue中当组件的data中的数据发生了变化之后, 如果这个data中的数据与某个Dom元素有关, 那么这个时候这个Dom元素不会立即更新, vu ...
vue中的props对象
vue中的props对象 1.props对象的定义 props其实是properties的缩写,props对象是用来定义属性的.props对象可以接受数组形式的参数又或者是对象形式的参数. 数组形式 ...
《高阶Perl》——3.8　对象方法里的缓存
3.8 对象方法里的缓存对象方法,它经常不理解地把缓存的值保存在独立的散列里.考虑一个投资银行写的程序里的Investor对象.该对象表现了银行的一个客户: package Investor;# C ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
vue中mixins的使用方法
参考官网以及网上的一些资料,最基本的用法混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项 ...
ES6/02/创建对象，构造函数和原型，原型和原型链，this指向，类，ES5新增的方法，数组方法，回调函数，ES5新增的字符串方法，ES5中新增的对象方法
创建对象 1,利用new Object()创建对象 var obj1 =new Object(); 2,利用对象字面量创建对象 var obj2={}; 3,利用构造函数创建对象 function S ...
python iterable对象_如何理解Python中的iterable对象
转载请注明出处:https://www.jianshu.com/u/5e6f798c903a [^*] 表示注脚,在文末可以查看对应连接,但简书不支持该语法. 首先,容器和 iterable 间没有必 ...

理解Vue中的methods对象方法里的this指向，并解读源码

Vue3的版本

阅读区域

解决疑惑

代码

1. methods 对象的 this指向

2. methods 对象的里的方法为什么不能用箭头函数

分析绑定时，用bind绑定后的结果

理解Vue中的methods对象方法里的this指向，并解读源码相关推荐

最新文章

热门文章

理解Vue中的methods对象方法里的this指向，并解读源码

Vue3的版本

阅读区域

解决疑惑

代码

1. methods 对象的 this指向

2. methods 对象的里的 方法 为什么不能用箭头函数

分析绑定时，用bind绑定后的结果

理解Vue中的methods对象方法里的this指向，并解读源码相关推荐

最新文章

热门文章

2. methods 对象的里的方法为什么不能用箭头函数