快捷導(dǎo)航

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

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

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

準(zhǔn)備工作

克隆源碼到本地

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

下載完畢后，用vscode打開，目光移動(dòng)到package.json的scripts屬性，我們看到有dev和build，dev會(huì)啟動(dòng)一個(gè)開發(fā)環(huán)境的服務(wù)，也就是說，我們?cè)谠创a里做的改動(dòng)，都會(huì)及時(shí)生效。build就是打包。和我們平時(shí)開發(fā)Vue.js項(xiàng)目是一個(gè)道理。

我們首先安裝一下Vue.js項(xiàng)目的依賴（使用pnpm），然后運(yùn)行npm run dev。這樣的好處就是我們能隨時(shí)看到代碼改動(dòng)后的效果。

接下來我們?cè)?code>examples目錄下創(chuàng)建一個(gè)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>

安裝一個(gè)serve全局包啟動(dòng), 在根目錄運(yùn)行一下serve，就能看到頁(yè)面展示出來了。

調(diào)試源碼

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

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

進(jìn)入initState內(nèi)部，我們看到

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

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

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

initData

調(diào)試完了initMehtods后，就開始initData,我們使用step out按鈕就跳出了當(dāng)前函數(shù)，接著進(jìn)入initData內(nèi)部。

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做了比對(duì)，最后通過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，實(shí)現(xiàn)綁定的。