Vue中methods的this指向問題淺析
如果是組件的話，將會是VueComponent實例對象，Vue和VueComponent兩個類其實差不都，今后會另外開章節(jié)描述兩者差別，這里先飄過。
比如下面的簡單的一個demo代碼，點擊按鈕打印出this。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="printThis">What is this</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
counter: 0,
},
methods: {
printThis() {
console.log("this:", this);
},
},
});
</script>
</body>
</html>最終打印的結(jié)果將會如下：
很明顯，vue框架通過某種方法自動幫我們將methods下面的this指向到vue的實例對象了。
下面跟蹤下vue的源代碼，看下是怎么實現(xiàn)的。
首先，我們看下new Vue的入口，也即是Vue類的構(gòu)造函數(shù)
function Vue(options) {
...
this._init(options);
}構(gòu)造函數(shù)的參數(shù)options就是我們前面new Vue時傳入的帶有methods和data這些配置項的對象。
構(gòu)造函數(shù)里面會做很多初始化的動作，這些動作都被封裝到_init這個方法中了。因為是通過this調(diào)用的，所以我們可以猜想到這個方法應(yīng)該是寫到了Vue的prototype上的。
Vue.prototype._init = function (options?: Object) {
const vm: Component = this;
...
// 將含有methods和data等配置項的對象合并并掛到Vue實例對象vm的$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
);
...
initState(vm);
...
};
}該方法會將我們new Vue時提供的帶有methods和data的配置項放入到Vue實例對象的$options屬性中，然后調(diào)用initState方法。
export function initState(vm: Component) {
...
if (vm.$options.methods) initMethods(vm, vm.$options.methods);
...
}因為我們提供了methods選項，記得吧？我們上面methods寫了printThis方法。所以這里會調(diào)用到initMethods方法，傳入的參數(shù)是Vue實例對象vm和我們傳進來的methods選項。
function initMethods(vm: Component, methods: Object) {
...
for (const key in methods) {
...
vm[key] =
typeof methods[key] !== "function" ? noop : bind(methods[key], vm);
}
}上面的代碼邏輯主要就是循環(huán)methods里面的每個方法，然后將這些方法以相同的名字在vue實例對象中也放一份，比如我們的printThis方法，在vue實例對象中也來一份。
但是放到vue實例對象中的這些方法和原來的有一些區(qū)別，什么區(qū)別呢？就是通過上面的bind方法做了些調(diào)整。
這個bind方法看上去是不是很眼熟，名字和我們javascript用來修改this指向的bind方法一樣。
而事實上這個bind方法最終調(diào)用的是一個叫做nativeBind的方法
function nativeBind (fn: Function, ctx: Object): Function {
return fn.bind(ctx)
}該方法做的事情就是將我們傳入來的method，即我們這里的printThis方法的this的指向，指向到了傳進來的vm，即我們的vue實例對象。
而這，也即是為什么我們在methods里面的方法可以通過this直接訪問到Vue實例對象的原因了。
到此這篇關(guān)于Vue中methods的this指向問題淺析的文章就介紹到這了,更多相關(guān)Vue methods內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js實現(xiàn)一個SPA登錄頁面的過程【推薦】
本篇文章主要介紹了Vue.js寫一個SPA登錄頁面過程的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
Vue封裝localStorage設(shè)置過期時間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時間的相關(guān)資料,在這個示例中,我們在MyComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
這篇文章給大家?guī)砹薞ue.js 踩坑記之雙向綁定問題，非常不錯，具有參考借鑒價值，感興趣的朋友跟隨腳本之家小編一起學(xué)習吧2018-05-05
關(guān)于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefine
這篇文章主要介紹了vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type'),本文給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue-router 實現(xiàn)導(dǎo)航守衛(wèi)（路由衛(wèi)士）的實例代碼
這篇文章主要介紹了vue-router 實現(xiàn)導(dǎo)航守衛(wèi)（路由衛(wèi)士）的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)天氣預(yù)報小應(yīng)用，查詢一些城市的天氣情況，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
watch 的用法有個特點，就是當值第一次綁定的時候，不會執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會執(zhí)行，如果我們需要在最初綁定值得時候也執(zhí)行函數(shù)，就需要用到 immediate 屬性，這篇文章主要介紹了vue中watch監(jiān)聽對象中某個屬性的方法,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中的數(shù)據(jù)雙向綁定問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-05-05
vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄功能
這篇文章主要介紹了vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了Vue中 axios delete請求參數(shù)操作，具有很好的參考價值，希望對大家有所 幫助。一起跟隨小編過來看看吧2020-08-08