Maison > Article > interface Web > Parlons du problème de pointage de ceci dans vue2.x. Pourquoi pointe-t-il vers l'instance de vue ?
Cet article parlera du problème de pointage de ceci dans vue2.x et expliquera pourquoi cela pointe vers l'instance de vue. J'espère que cela sera utile à tout le monde !
Dans la présentation du code au sein du groupe, j'ai accidentellement mentionné pourquoi cela peut être directement appelé aux valeurs des données, des méthodes, des accessoires et calculé. Ensuite, tout le monde a eu des suppositions, mais il n'y avait pas de réponse claire. Pour clarifier ce problème, consultez Après avoir compris le code source de vue, j'écrirai un article pour l'enregistrer.
Développez normalement du code vue, écrivez-le presque toujours comme ça
export default {
data() {
return {
name: '彭鱼宴'
}
},
methods: {
greet() {
console.log(`hello, 我是${this.name}`)
}
}
}Pourquoi this.name ici peut-il accéder directement au nom défini dans data, ou this.someFn peut accéder directement aux méthodes Quant à la fonction définie , avec cette question à l'esprit, j'ai commencé à regarder le code source de vue2.x pour trouver la réponse.
Voici l'adresse du code source de vuecode source vue. Jetons d'abord un coup d'œil au constructeur de l'instance vue. Le constructeur se trouve dans le répertoire du code source /vue/src/core/instance/index.js. Postez tout cela et voyez. Le constructeur est très simple, if (!(cette instance de Vue)){} Déterminez si le mot-clé new est utilisé pour appeler le constructeur. Sinon, un avertissement sera émis. . Voici thisFait référence à une instance de Vue. Si le mot clé new est utilisé normalement, utilisez simplement la fonction _init. N'est-ce pas très simple ?
if (!(this instanceof Vue)){} 判断是不是用了 new 关键词调用构造函数，没有则抛出warning，这里的this指的是Vue的一个实例。如果正常使用了new关键词，就走_init函数，是不是很简单。
_init函数分析
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_init函数有点长，做了很多事情，这里就不一一解读，和我们此次探索相关的内容应该在initState(vm)这个函数中，我们继续到initState这个函数里看看。
initState函数分析
let uid = 0
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
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag)
}
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
}可以看出initState做了5件事情
我们先重点看看初始化methods做了什么
initMethods 初始化方法
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}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
);
}
if (props && hasOwn(props, key)) {
warn(
("Method \"" + key + "\" has already been defined as a prop."),
vm
);
}
if ((key in vm) && isReserved(key)) {
warn(
"Method \"" + key + "\" conflicts with an existing Vue instance method. " +
"Avoid defining component methods that start with _ or $."
);
}
}
vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
}
}除去上述说的这些判断，最重要的就是在vue实例上定义了一遍methods里所有的方法，并且使用bind函数将函数的this指向Vue实例上，就是我们new Vue()的实例对象上。
这就解释了为啥this可以直接访问到methods里的方法。
initData 初始化数据
判断methods中定义的函数是不是函数，不是函数就抛warning； 判断methods中定义的函数名是否与props冲突，冲突抛warning； 判断methods中定义的函数名是否与已经定义在Vue实例上的函数相冲突，冲突的话就建议开发者用_或者$开头命名；
initdata做了哪些事情呢：
再看下proxy函数做了什么：
function initData (vm) {
var data = vm.$options.data;
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
var keys = Object.keys(data);
var props = vm.$options.props;
var methods = vm.$options.methods;
var i = keys.length;
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 */);
}其实这里的Object.defineProperty就是用来定义对象的
proxy的用处就是使this.name指向this._data.name
剩下的observe函数不在此次探讨范围，感兴趣的朋友可以自己去看看源码。
回到一开始抛出的问题做一个解答：
methods里的方法通过 bind 指定了this为 new Vue的实例(vm)，methods里的函数也都定义在vm上了，所以可以直接通过this直接访问到methods里面的函数。
data函数返回的数据对象也都存储在了new Vue的实例(vm)上的_data上了，访问 this.name时实际访问的是Object.defineProperty代理后的 this._data.nameAnalyse de la fonction _init
function noop (a, b, c) {}
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
};
function proxy (target, sourceKey, key) {
sharedPropertyDefinition.get = function proxyGetter () {
return this[sourceKey][key]
};
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val;
};
Object.defineProperty(target, key, sharedPropertyDefinition);
} La fonction _init est un peu longue et fait beaucoup de choses je ne vais pas les expliquer une par une. ici. Cela est lié à notre exploration cette fois. Le contenu devrait être dans la fonction initState(vm).
Analyse de la fonction initStaterrreee
On peut voir que initState fait 5 choses🎜Object.defineProperty voici Le but duproxy utilisé pour définir des objets est de faire en sorte que this.name pointe vers this._data.name 🎜🎜le reste La fonction d'observation n'entre pas dans le cadre de cette discussion. Les amis intéressés peuvent consulter eux-mêmes le code source. 🎜🎜🎜Résumé🎜🎜🎜Reprenez la question posée au début et donnez une réponse : 🎜methods code> Grâce à <code>bind, this est spécifié comme l'instance du nouveau Vue (vm), et les fonctions dans les méthodes sont également définies dans vm, afin que vous puissiez accéder directement aux fonctions dans les méthodes via this. 🎜🎜data sont également stockés dans _data sur la nouvelle instance Vue (vm), lorsque en accédant à this.name, ce qui est réellement accessible est this._data.name après le proxy Object.defineProperty. 🎜🎜🎜🎜Quant aux avantages et aux inconvénients de ce modèle de conception de données, vous pouvez continuer à explorer, après tout, cela ne fait pas partie de cette discussion. 🎜🎜【Recommandation associée : 🎜Tutoriel vidéo vue.js🎜】🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!