欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中methods的this指向問題淺析

 更新時間:2022年10月27日 14:36:13   作者:天地會珠海分舵  
相信我們寫Vue代碼時肯定都會在methods中用過this這個關(guān)鍵字,甚至還打印過this查看其內(nèi)容。最終發(fā)現(xiàn)該實例對象竟然是我們的Vue實例對象

如果是組件的話,將會是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實現(xiàn)一個SPA登錄頁面的過程【推薦】

    本篇文章主要介紹了Vue.js寫一個SPA登錄頁面過程的相關(guān)知識,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • Vue封裝localStorage設(shè)置過期時間的示例詳解

    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
  • Vue.js 踩坑記之雙向綁定

    Vue.js 踩坑記之雙向綁定

    這篇文章給大家?guī)砹薞ue.js 踩坑記之雙向綁定問題,非常不錯,具有參考借鑒價值,感興趣的朋友跟隨腳本之家小編一起學(xué)習吧
    2018-05-05
  • 關(guān)于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type')

    關(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)士)的實例代碼

    這篇文章主要介紹了vue-router 實現(xiàn)導(dǎo)航守衛(wèi)(路由衛(wèi)士)的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • Vue實現(xiàn)天氣預(yù)報小應(yīng)用

    Vue實現(xiàn)天氣預(yù)報小應(yīng)用

    這篇文章主要為大家詳細介紹了Vue實現(xiàn)天氣預(yù)報小應(yīng)用,查詢一些城市的天氣情況,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue中watch監(jiān)聽對象中某個屬性的方法

    vue中watch監(jiān)聽對象中某個屬性的方法

    watch 的用法有個特點,就是當值第一次綁定的時候,不會執(zhí)行監(jiān)聽函數(shù),只有值發(fā)生改變才會執(zhí)行,如果我們需要在最初綁定值得時候也執(zhí)行函數(shù),就需要用到 immediate 屬性,這篇文章主要介紹了vue中watch監(jiān)聽對象中某個屬性的方法,需要的朋友可以參考下
    2023-04-04
  • 全面解析vue中的數(shù)據(jù)雙向綁定

    全面解析vue中的數(shù)據(jù)雙向綁定

    這篇文章主要介紹了vue中的數(shù)據(jù)雙向綁定問題,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-05-05
  • vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄功能

    vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄功能

    這篇文章主要介紹了vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • Vue中 axios delete請求參數(shù)操作

    Vue中 axios delete請求參數(shù)操作

    這篇文章主要介紹了Vue中 axios delete請求參數(shù)操作,具有很好的參考價值,希望對大家有所 幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評論