Vue2 this 能够直接获取到 data 和 methods 的原理分析
前言
在平时使用vue来开发项目的时候,对于下面这一段代码,我们可能每天都会见到:
const vm = new Vue({ data: { name: '我是pino', }, methods: { print(){ console.log(this.name); } }, }); console.log(vm.name); // 我是pino vm.print(); // 我是pino
但是我们自己实现一个构造函数却实现不了这种效果呢?
function Super(options){} const p = new Super({ data: { name: 'pino' }, methods: { print(){ console.log(this.name); } } }); console.log(p.name); // undefined p.print(); // p.print is not a function
那么vue2中是怎么实现这种调用方式的呢?
源码
首先可以找到vue2的入口文件:
src/core/instance/index
function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options) } // 初始化操作是在这个函数完成的 initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue) export default Vue
接下来看initMixin
文件中是如何实现的
export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed vm._isVue = true // merge options if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) // resolve injections before data/props // 初始化data/methods... initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') } }
其实仅仅关注initState
这个函数就好了,这个函数初始化了props
, methods
, watch
, computed
- 使用
initProps
初始化了props
- 使用
initMethods
初始化了methods
- 使用
initData
初始化了data
- 使用
initComputed
初始化了computed
- 使用
initWatch
初始化了watch
function initState (vm) { vm._watchers = []; var opts = vm.$options; // 判断props属性是否存在,初始化props if (opts.props) { initProps(vm, opts.props); } // 有传入 methods,初始化方法methods if (opts.methods) { initMethods(vm, opts.methods); } // 有传入 data,初始化 data if (opts.data) { initData(vm); } else { observe(vm._data = {}, true /* asRootData */); } // 初始化computed if (opts.computed) { initComputed(vm, opts.computed); } // 初始化watch if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch); } }
在这里只关注initMethods
和initData
initMethods
function initMethods (vm, methods) { var props = vm.$options.props; for (var key in methods) { { // 判断是否为函数 if (typeof methods[key] !== 'function') { warn( "Method \"" + key + "\" has type \"" + (typeof methods[key]) + "\" in the component definition. " + "Did you reference the function correctly?", vm ); } // 判断props存在且props中是否有同名属性 if (props && hasOwn(props, key)) { warn( ("Method \"" + key + "\" has already been defined as a prop."), vm ); } // 判断实例中是否有同名属性,而且是方法名是保留的 _ $ (在JS中一般指内部变量标识)开头 if ((key in vm) && isReserved(key)) { warn( "Method \"" + key + "\" conflicts with an existing Vue instance method. " + "Avoid defining component methods that start with _ or $." ); } } // 将methods中的每一项的this指向绑定至实例 // bind的作用就是用于绑定指向,作用同js原生的bind vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm); } }
其实整个initMethods
方法核心就是将this
绑定到了实例身上,因为methods
里面都是函数,所以只需要遍历将所有的函数在调用的时候将this
指向实例就可以实现通过this
直接调用的效果。
其他的大部分代码都是用于一些边界条件的判断:
- 如果不为函数 -> 报错
props
存在且props
中是否有同名属性 -> 报错- 实例中是否有同名属性,而且是方法名是保留的 -> 报错
bind函数
function polyfillBind (fn, ctx) { function boundFn (a) { var l = arguments.length; // 判断参数的个数来分别使用call/apply进行调用 return l ? l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a) : fn.call(ctx) } boundFn._length = fn.length; return boundFn } function nativeBind (fn, ctx) { return fn.bind(ctx) } // 判断是否支持原生的bind方法 var bind = Function.prototype.bind ? nativeBind : polyfillBind;
bind
函数中主要是做了兼容性的处理,如果不支持原生的bind
函数,则根据参数个数的不同分别使用call/apply
来进行this
的绑定,而call/apply
最大的区别就是传入参数的不同,一个分别传入参数,另一个接受一个数组。
hasOwn 用于判断是否为对象本身所拥有的对象,上文通过此函数来判断是否在props
中存在相同的属性
// 只判断是否为本身拥有,不包含原型链查找 var hasOwnProperty = Object.prototype.hasOwnProperty; function hasOwn (obj, key) { return hasOwnProperty.call(obj, key) } hasOwn({}, 'toString') // false hasOwn({ name: 'pino' }, 'name') // true
isReserved
判断是否为内部私有命名(以$
或_
开头)
function isReserved (str) { var c = (str + '').charCodeAt(0); return c === 0x24 || c === 0x5F } isReserved('_data'); // true isReserved('data'); // false
initData
function initData (vm) { var data = vm.$options.data; // 判断data是否为函数,如果是函数,在getData中执行函数 data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}; // 判断是否为对象 if (!isPlainObject(data)) { data = {}; warn( 'data functions should return an object:\n' + 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm ); } // proxy data on instance // 取值 props/methods/data的值 var keys = Object.keys(data); var props = vm.$options.props; var methods = vm.$options.methods; var i = keys.length; // 判断是否为props/methods存在的属性 while (i--) { var key = keys[i]; { if (methods && hasOwn(methods, key)) { warn( ("Method \"" + key + "\" has already been defined as a data property."), vm ); } } if (props && hasOwn(props, key)) { warn( "The data property \"" + key + "\" is already declared as a prop. " + "Use prop default value instead.", vm ); } else if (!isReserved(key)) { // 代理拦截 proxy(vm, "_data", key); } } // observe data // 监听数据 observe(data, true /* asRootData */); }
getData
如果data
为函数时,调用此函数对data
进行执行
function getData (data, vm) { // #7573 disable dep collection when invoking data getters pushTarget(); try { // 将this绑定至实例 return data.call(vm, vm) } catch (e) { handleError(e, vm, "data()"); return {} } finally { popTarget(); } }
proxy
代理拦截,当使用this.xxx
访问某个属性时,返回this.data.xxx
// 一个纯净函数 function noop (a, b, c) {} // 代理对象 var sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop }; function proxy (target, sourceKey, key) { // get拦截 sharedPropertyDefinition.get = function proxyGetter () { return this[sourceKey][key] }; // set拦截 sharedPropertyDefinition.set = function proxySetter (val) { this[sourceKey][key] = val; }; // 使用Object.defineProperty对对象进行拦截 Object.defineProperty(target, key, sharedPropertyDefinition); }
其实对data
的处理就是将data
中的属性的key
遍历绑定至实例vm
上,然后使用Object.defineProperty
进行拦截,将真实的数据操作都转发到this.data
上。
Object.defineProperty对象属性
- value:属性的默认值。
- writable:该属性是否可写。
- enumerable:该属性是否可被枚举。
- configurable:该属性是否可被删除。
- set():该属性的更新操作所调用的函数。
- get():获取属性值时所调用的函数。
简略实现
function Person(options) { let vm = this vm.$options = options if(options.data) { initData(vm) } if(options.methods) { initMethods(vm, options.methods) } } function initData(vm) { let data = vm._data = vm.$options.data let keys = Object.keys(data) let len = keys.length while(len--) { let key = keys[len] proxy(vm, "_data", key) } } var sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop }; function proxy(target, sourceKeys, key) { sharedPropertyDefinition.get = function() { return this[sourceKeys][key] } sharedPropertyDefinition.set = function(val) { this[sourceKeys][key] = val } Object.defineProperty(target, key, sharedPropertyDefinition) } function noop(a, b, c) {} function initMethods(vm, methods) { for(let key in methods) { vm[key] = typeof methods[key] === 'function' ? methods[key].bind(vm) : noop } } let p1 = new Person({ data: { name: 'pino', age: 18 }, methods: { sayName() { console.log('I am' + this.name) } } }) console.log(p1.name) // pino p1.sayName() // 'I am pino'
总结
所以就可以回答题目的问题了:
通过this
直接访问到methods
里面的函数的原因是:因为methods
里的方法通过bind
指定了this
为new Vue
的实例(vm
)。
通过this
直接访问到 data
里面的数据的原因是:data里的属性最终会存储到new Vue
的实例(vm
)上的_data
对象中,访问this.xxx
,是访问Object.defineProperty
代理后的 this._data.xxx
。
未来可能会更新实现mini-vue3
和javascript
基础知识系列,希望能一直坚持下去,
到此这篇关于Vue2 this 能够直接获取到 data 和 methods 的原理分析的文章就介绍到这了,更多相关Vue2 this 获取 data 和 methods 内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7112255428452417549
相关文章
- 下面本文章来给大家介绍在php中成员变量的一些对比了,文章举了四个例子在这例子中分别对不同成员变量进行测试与获取操作,下面一起来看看。 有如下4个代码示例,你认...2016-11-25
- php 获取用户IP与IE信息程序 function onlineip() { global $_SERVER; if(getenv('HTTP_CLIENT_IP')) { $onlineip = getenv('HTTP_CLIENT_IP');...2016-11-25
- php获取一个文件夹的mtime的程序了,这个就是时间问题了,对于这个问题我们来看小编整理的几个例子,具体的操作例子如下所示。 php很容易获取到一个文件夹的mtime,可以...2016-11-25
- 获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon,所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现:http://www.google.com/s2/favi...2014-06-07
- 主要功能:获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 :$(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 :$(document).width();...2015-10-21
- jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ mar...2013-10-13
- 1、先讲讲JQuery的概念,JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代...2014-05-31
- 本文主要介绍this关键字的几种使用方法,this可以代表当前实例,可以调用其他构造函数,还可以用来构建索引器,这里都有一一举例说明。...2020-06-25
- 这篇文章主要介绍了C#获取字符串后几位数的方法,实例分析了C#操作字符串的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了vue 数据(data)赋值问题的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-29
- 如果是为了取到tagName后再进行判断,那直接用下面的代码会更方便: $(element).is('input') 如果是要取到标签用作到别的地方,可以使用一下代码: $(element)[0].tagName 或: $(element).get(0).tagName...2014-05-31
- 复制代码 代码如下:$nodes = @$xpath->query("//*[@id='main_pr']/img/@src");$prurl = $nodes->item(0)->nodeValue;...2013-10-04
- 本文为代码分享,也是在工作中看到一些“大牛”的代码,做做分享。 具体是这样的,如下一个二维数组,是从库中读取出来的。 代码清单: 复制代码 代码如下: $user = array( 0 => array( 'id' => 1, 'name' => '张三', 'ema...2014-06-07
- 现实中我们经常看到这样的说明,排名不分先后,按姓名首字母进行排序。这是中国人大多数使用的排序方法。那么在php程序中该如何操作呢?下面就分享一下在php程序中获取汉字拼音的首字母的方法,在网上搜到的大多数是有问题的...2015-10-23
- 本篇文章是对使用C#获取系统特殊文件夹路径的解决方法进行了详细的分析介绍,需要的朋友参考下...2020-06-25
- 网上也有很多类似的方法,不过都存在这样那样的不严谨的问题,本文就不一一分析了,这里只给出最正确的利用php 获取文件扩展名(文件后缀名)的方法。 function get_extension($filename){ return pathinfo($filename,PATHIN...2015-10-30
- 这篇文章主要介绍了基于JavaScript获取鼠标位置的各种方法 ,需要的朋友可以参考下...2015-12-18
- 这篇文章主要介绍了C#获取变更过的DataTable记录的实现方法,对初学者很有学习借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要给大家介绍了7道关于JS this的面试题,来看看你能答对几个,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-05
- 这篇文章主要介绍了C#中this指针的用法,对初学者而言是非常重要的概念,必须加以熟练掌握,需要的朋友可以参考下...2020-06-25