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-04Vue封裝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ān)于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefine
這篇文章主要介紹了vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type'),本文給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04vue-router 實現(xiàn)導(dǎo)航守衛(wèi)(路由衛(wèi)士)的實例代碼
這篇文章主要介紹了vue-router 實現(xiàn)導(dǎo)航守衛(wèi)(路由衛(wèi)士)的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄功能
這篇文章主要介紹了vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07