一步一步分析vue之_data属性首先，让我们先新建个vue(2.5.2)的实例。代码如下。然后，这是生成的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

首先，找到它首次出现的地方。让我们来到代码的第4465行，如下图

接着，跟进去，如下图。

接着，跟进去 ps：这是初始化咱们的data的方法。

没错，在代码的3296行,就是我们的 _data首次出现并赋值的地方。让我们看看vue究竟对_data做了什么？做了什么py交易？嗯？

上图是vue对data属性做一次检测，比如命名是否合法啊，是否跟methods和props等名字冲突啊，之类的。让我们来到proxy(vm,"_data",key) 这里。就是对 _data 做一些‘py’操作了。我们到那一行，然后跟进去，看看里面有什么。

看到这个sharedPropertyDefinition 和 Object.defineProperty 没？没错，他就是Object.defineProperty的handler！总的来讲： 就是当你要从vue实例上取属性时，实际上就是从_data上取属性！！！ 哈哈，就是这么简单，接下来，我会继续研究observe，并分享成果给大家。

一步一步分析vue之_data属性

首先，让我们先新建个vue(2.5.2)的实例。代码如下。

然后，这是生成的vue的实例如下图。

接下来 让我们分析一下这个 _data

接下来让我们分析一下这个 _data