一步一步分析vue之_data属性

最新推荐文章于 2024-06-21 09:43:57 发布

转载最新推荐文章于 2024-06-21 09:43:57 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a2b335c6fb9a0450a6744e0

文章标签：

#javascript #ViewUI

本文通过一个简单的Vue实例，深入解析了Vue中数据绑定的工作原理，包括_data的作用及其实现方式，以及Vue如何通过代理和Object.defineProperty实现数据响应式。

首先，让我们先新建个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，并分享成果给大家。