Vue.js中this如何取到data和method里的屬性詳解

更新時間：2022年12月06日 09:46:30 作者：前端摸魚兒

methods屬性是一個對象,通常我們會在這個對象中定義很多的方法,下面這篇文章主要給大家介紹了關于Vue.js中this如何取到data和method里的屬性,需要的朋友可以參考下

準備工作

克隆源碼到本地

git clone https://github.com/vuejs/vue.git

下載完畢后，用vscode打開，目光移動到package.json的scripts屬性，我們看到有dev和build，dev會啟動一個開發(fā)環(huán)境的服務，也就是說，我們在源碼里做的改動，都會及時生效。build就是打包。和我們平時開發(fā)Vue.js項目是一個道理。

我們首先安裝一下Vue.js項目的依賴（使用pnpm），然后運行npm run dev。這樣的好處就是我們能隨時看到代碼改動后的效果。

接下來我們在examples目錄下創(chuàng)建一個html文件，引入打包后的vue.js

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <h1 @click="changeMsg">hello {{msg}}</h1>
   </div>
   <script src="../dist/vue.js"></script>
   <script>
     const vm = new Vue({
       el: '#app',
       data: {
         msg: 'world'
       },
       methods: {
         changeMsg() {
           this.msg = 'me'
         }
       }
     })
   </script>
 </body>
</html>

安裝一個serve全局包啟動, 在根目錄運行一下serve，就能看到頁面展示出來了。

調試源碼

我們這里使用谷歌瀏覽器調試，F12找到sources面板如下圖所示的位置打上斷點，接著刷新頁面，就進入了調試模式。

然后，我們就通過step into按鈕進入new Vue的函數(shù)內部。接著進入_init的內部，找到initState(vm),也就是當前文件代碼的4714行，這個函數(shù)的內部就是我們要研究的部分。

進入initState內部，我們看到

  if (opts.methods)
          initMethods(vm, opts.methods);
      if (opts.data) {
          initData(vm);
      }

initMethods

function initMethods(vm, methods) {
      var props = vm.$options.props;
      for (var key in methods) {
          {
              if (typeof methods[key] !== 'function') {
                  warn$2("Method \"".concat(key, "\" has type \"").concat(typeof methods[key], "\" in the component definition. ") +
                      "Did you reference the function correctly?", vm);
              }
              if (props && hasOwn(props, key)) {
                  warn$2("Method \"".concat(key, "\" has already been defined as a prop."), vm);
              }
              if (key in vm && isReserved(key)) {
                  warn$2("Method \"".concat(key, "\" conflicts with an existing Vue instance method. ") +
                      "Avoid defining component methods that start with _ or $.");
              }
          }
          vm[key] = typeof methods[key] !== 'function' ? noop : bind$1(methods[key], vm);
      }
  }

首先判斷組件內部是否聲明了函數(shù)
其次判斷是否和props、保留鍵名的名字沖突了
最后是處理邏輯，如果對應值的類型是函數(shù)將傳入的vm對應的屬性賦值，否則為noop，賦值的函數(shù)這里做了一個強綁（使用的bind, this指向vm）。這個bind$來自原生的bind方法

var bind$1 = Function.prototype.bind ? nativeBind : polyfillBind;

initData

調試完了initMehtods后，就開始initData,我們使用step out按鈕就跳出了當前函數(shù)，接著進入initData內部。

function initData(vm) {
      var data = vm.$options.data;
      data = vm._data = isFunction(data) ? getData(data, vm) : data || {};
      if (!isPlainObject(data)) {
          data = {};
          warn$2('data functions should return an object:\n' +
                  'https://v2.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$2("Method \"".concat(key, "\" has already been defined as a data property."), vm);
              }
          }
          if (props && hasOwn(props, key)) {
              warn$2("The data property \"".concat(key, "\" is already declared as a prop. ") +
                      "Use prop default value instead.", vm);
          }
          else if (!isReserved(key)) {
              proxy(vm, "_data", key);
          }
      }
      // observe data
      var ob = observe(data);
      ob && ob.vmCount++;
  }

邏輯和initMethods類似，和props、methods做了比對，最后通過proxy將data,綁定到vm上

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);
  }

最終我們知道data的值是通過Object.defineProperty，實現(xiàn)綁定的。