一步一步分析vue之_data屬性

wangy7099發表於2017-12-11
Vue

首先，讓我們先新建個vue(2.5.2)的例項。程式碼如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
      <button @click="fetchData">
          fetchData
      </button>
      {{product}}
  </div>
  <script>
  var vm = new Vue({
      el:"#app",
      data:{
          product:"none"
      },
      methods:{
          fetchData(){
              this.product = "some products!"
          }
      }
  })
  </script>
</body>
</html>
複製程式碼

然後，這是生成的vue的例項如下圖。

_data

接下來 讓我們分析一下這個 _data

首先，找到它首次出現的地方。 讓我們來到程式碼的第4465行，如下圖

_data
接著，跟進去，如下圖。
_data
接著，跟進去 ps：這是初始化我們們的data的方法。
_data
沒錯，在程式碼的3296行,就是我們的 _data首次出現並賦值的地方。 讓我們看看vue究竟對_data做了什麼？做了什麼py交易？嗯？
_data
上圖是vue對data屬性做一次檢測，比如命名是否合法啊，是否跟methods和props等名字衝突啊，之類的。讓我們來到proxy(vm,"_data",key) 這裡。就是對 _data 做一些‘py’操作了。我們到那一行，然後跟進去，看看裡面有什麼。
_data
看到這個sharedPropertyDefinition 和 Object.defineProperty 沒？ 沒錯，他就是Object.defineProperty的handler！總的來講： 就是當你要從vue例項上取屬性時，實際上就是從_data上取屬性！！！ 哈哈，就是這麼簡單，接下來，我會繼續研究observe，並分享成果給大家。

相關文章