Vue2為何能通過this訪問到data與methods的屬性
前言
在我沒接觸vue之前我不著調(diào)this是啥壓根就沒有接觸過，在我學過了vue之后我知道了this，那時候理解的this就是你要使用data中的屬性或調(diào)用methods中的方法等其他東西都要用this去調(diào)用，那時候其實我還是不知道this是啥，后面慢慢的才知道，當然我知道應該就是八股文背出來的，通過今天讀這個源碼，讓我理解的更加深刻了，原來還可以這么用。
一、vue的使用
看這一段代碼我們能知道有個Vue的構(gòu)造函數(shù) ，然后我們使用new Vue創(chuàng)建了它的實例，并給它傳了一個對象參數(shù)，里面有data和methods，那么在這個Vue構(gòu)造函數(shù)做了什么才能讓我使用this可以直接訪問里面的屬性或者方法呢？
//創(chuàng)建vue的實例
const vm = new Vue({
data: {
desc: '為什么this能夠直接訪問data中的屬性',
},
methods: {
sayName() {
console.log(this.desc);
}
},
});
console.log(vm.name);
console.log(vm.sayName());二、Vue的構(gòu)造函數(shù)
接收一個options參數(shù)
- 使用 instanceof 判斷 this對象上是否出現(xiàn)了Vue的prototype，我們都知道this的指向是取決于誰調(diào)用
- this._init(options) 證明在這調(diào)用要么我們創(chuàng)建的實例上有_init方法要么方法在Vue的prototype上，但是我們可以看到實例上并沒有_init方法 ,那么肯定在一個地方給Vue的prototype上加上了_init方法 繼續(xù)往下看
function Vue(options) {
if (!(this instanceof Vue)
) {
warn('Vue是一個構(gòu)造函數(shù)，應使用“new”關(guān)鍵字調(diào)用');
}
this._init(options);
}
//Vue() //錯誤的調(diào)用方式 進入警告判斷 此時this指向window 然后window的 window.__proto__的指向的Window構(gòu)造函數(shù)的prototype三 初始化initMixin(Vue)
在源碼中會看到很多初始化的函數(shù)在這我們initMixin()
這個函數(shù)就是在Vue的原型上增加了_init方法，方法接收一個參數(shù)，然后定義了vm變量，在我看的時候就想看看這個函數(shù)的this指向誰，其實也不難函數(shù)掛在Vue構(gòu)造函數(shù)的原型上，調(diào)用還是在構(gòu)造函數(shù)里面使用this調(diào)用，構(gòu)造函數(shù)的this指向Vue實例，根據(jù)this的指向規(guī)則 此時的vm就指向了Vue構(gòu)造函數(shù)的實例。
使用this的訪問規(guī)則如果實例上沒有就去原型上找
然后執(zhí)行 initState(vm)
initMixin(Vue)
function initMixin(Vue) {
//prototype上增加init方法
Vue.prototype._init = function (options) {
var vm = this; //Vue實例
vm.age = 30
//代碼進行了刪減
initState(vm);
}
}
//這里只是舉例測試
const vm = new Vue({})
console.log(vm.age) //30四 initState(vm)
這里就是對我們傳入的data 或者methods進行不同的處理
//initState方法代碼進行了刪減
function initState(vm) {
vm._watchers = [];
var opts = vm.$options; //這里是我們在創(chuàng)建實例的時候傳的參數(shù)
//如果傳了methods 則去調(diào)用
if (opts.methods) { initMethods(vm, opts.methods); }
if (opts.data) {
initData(vm);
} else {
observe(vm._data = {}, true /* asRootData */);
}
}五 initMethods(vm, opts.methods)
如果有methods則取調(diào)用initMethods方法
前面主要是判斷 methods中的值是不是函數(shù)，key有沒有跟props沖突等
最后一段代碼就是在vm的實例上增加方法vm[key]=methods[key]，在讀的時候我有這樣一個以為為什么還要用bind改變this指向呢不本來就是寫在vm實例上的方法嗎 只能使用vm調(diào)用 那么方法的this不就指向vm嗎？
/*
vm:構(gòu)造函數(shù)實例
methods：我們傳的methods對象
*/
function initMethods(vm, methods) {
var props = vm.$options.props;
//循環(huán)methods對象
for (var key in methods) {
{
//判斷是否是函數(shù) 不是的化則作出警告
if (typeof methods[key] !== 'function') {
warn(
"Method "" + key + "" has type "" + (typeof methods[key]) + "" in the component definition. " +
"Did you reference the function correctly?",
vm
);
}
//判斷 methods 中的每一項是不是和 props 沖突了，如果是，警告。
if (props && hasOwn(props, key)) {
warn(
("Method "" + key + "" has already been defined as a prop."),
vm
);
}
//判斷 methods 中的每一項是不是已經(jīng)在 new Vue實例 vm 上存在，而且是方法名是保留的 _ $ （在JS中一般指內(nèi)部變量標識）開頭，如果是警告。
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中的方法 這樣其實我們就已經(jīng)可以用vm訪問 到methods中的方法了
vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
}
}問了群里大佬之后原來這步操作時為了防止用戶改變this指向，專門做了個例子
在這我有定義了對象a里面有個age屬性和fn，fn我賦值vm實例上的sayHi，然后a.fn()調(diào)用很明顯this的指向已經(jīng)被改變了，使用bind之后則不會
const vm = new Vue({
methods: {
sayHi() {
console.log(this.age, 'hello-this')
}
}
});
let a = {
age: 15,
fn: vm.sayHi
}
console.log(a.fn(), 'vm') //打印15六 initData(vm)
data是如何做到的使用this可以直接訪問的，其實原理都一樣，
首先在vm實例上增加了_data，里面存的我們傳入的data參數(shù)
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];
//判斷key值有沒有跟methods中的key重名
{
if (methods && hasOwn(methods, key)) {
warn(
("Method "" + key + "" has already been defined as a data property."),
vm
);
}
}
//判斷key值有沒有跟props中的key重名
if (props && hasOwn(props, key)) {
warn(
"The data property "" + key + "" is already declared as a prop. " +
"Use prop default value instead.",
vm
);
//是否是內(nèi)部私有保留的字符串$ 和 _ 開頭
} else if (!isReserved(key)) {
//代理
proxy(vm, "_data", key);
}
}
// observe data
observe(data, true /* asRootData */);
}七 proxy(vm, "_data", key)
get 和 set 方法 注意里面的this 指向vm實例對象，上面已經(jīng)在vm實例對象上增加了_data 所有在獲取或者設置屬性值的時候 都是this._data[key] 也就是vm._data[key],
然后通過Object.defineProperty往實例對象上添加屬性，所以當我們訪問vm[key] 也就是 vm._data[key]
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);
}//創(chuàng)建vue構(gòu)造函數(shù)
function Vue(options) {
if (!(this instanceof Vue)
) {
warn('Vue是一個構(gòu)造函數(shù)，應使用“new”關(guān)鍵字調(diào)用');
}
this._init(options);
}
//初始化
initMixin(Vue);
function initMixin(Vue) {
//prototype上增加init方法
Vue.prototype._init = function (options) {
var vm = this; //Vue實例
let methods = options.methods
initState(vm);
}
}
//initState方法代碼進行了刪減
function initState(vm) {
vm._watchers = [];
var opts = vm.$options; //這里是我們在創(chuàng)建實例的時候傳的參數(shù)
//如果傳了methods 則去調(diào)用
if (opts.methods) { initMethods(vm, opts.methods); }
if (opts.data) {
initData(vm);
} else {
observe(vm._data = {}, true /* asRootData */);
}
}
/*
vm:構(gòu)造函數(shù)實例
methods：我們傳的methods對象
*/
function initMethods(vm, methods) {
var props = vm.$options.props;
//循環(huán)methods對象
for (var key in methods) {
{
//一些條件判斷
}
//給實例增加methods中的方法 這樣其實我們就已經(jīng)可以用vm訪問 到methods中的方法了
vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm);
}
}
const vm = new Vue({
methods: {
sayHi() {
console.log('hello-this')
}
}
});
vm.sayHi() //hello-this總結(jié)
其實看明白了Methods是怎么做到直接用this可以直接訪問的后面的都是差不多的，主要就是一個構(gòu)造函數(shù)，然后創(chuàng)建一個實例，在實例上增加屬性或者方法，這樣我們就可以用實例對象直接訪問了。原理就是那么簡單。
到此這篇關(guān)于Vue2為何能通過this訪問到data與methods的屬性的文章就介紹到這了,更多相關(guān)Vue2訪問data內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element中el-table動態(tài)合并單元格(span-method方法)
本文主要介紹了Element中el-table動態(tài)合并單元格(span-method方法)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了Vue分析同步和異步有什么區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-05-05
Vue解決element-ui消息提示$message重疊問題
這篇文章主要為大家介紹了Vue解決element-ui消息提示$message重疊問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
vue項目網(wǎng)站全局置灰功能實現(xiàn)示例詳解
這篇文章主要為大家介紹了vue項目網(wǎng)站全局置灰功能實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
vue實現(xiàn)動態(tài)表單動態(tài)渲染組件的方式(1)
這篇文章主要為大家詳細介紹了vue實現(xiàn)動態(tài)表單動態(tài)渲染組件的方式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue如何將字符串變?yōu)閿?shù)組問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue項目打包:修改dist文件名方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本文詳細介紹了VueRouter 路由的概念、規(guī)則、基礎等相關(guān)內(nèi)容，文中運用大量的圖片進行講解，感興趣的小伙伴可以看一看這篇文章2021-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端返回頂部，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
provide和inject在Vue 2中已經(jīng)被廣泛應用，不是新鮮API，3.0重新認識一下它們兩個，本文重點給大家介紹vue3中provide和inject的使用，需要的朋友參考下吧2021-07-07