vue源码分析参考---2、数据代理

一、总结

一句话总结：

vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作

  const vm = new MVVM({
    el: "#test",
    data: {
      name: '张三2'
    }
  })
  console.log(vm.name)  // 读取的是data中的name,  vm代理对data的读操作
  vm.name = '李四2' // 数据保存到data中的name上, vm代理对data的写操作
  console.log(vm.name, vm._data.name)

1、vue数据代理好处？

通过vm对象就可以方便的操作data中的数据

2、vue数据代理实现步骤？

a、通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性

b、所有添加的属性都包含get/set方法

c、在get/set方法中去操作data中对应的属性

二、数据代理和模板解析

博客对应课程的视频位置：

1. 说明

1) 分析 vue 作为一个 MVVM 框架的基本实现原理数据代理
模板解析
数据绑定
2) 不直接看 vue.js 的源码
3) 剖析 github 上某基友仿 vue 实现的 mvvm 库
4) 地址: https://github.com/DMQ/mvvm

2. 准备知识

1) [].slice.call(lis): 将伪数组转换为真数组
2) node.nodeType: 得到节点类型
3) Object.defineProperty(obj, propName, {}): 给对象添加/修改属性(指定描述符) configurable: true/false 是否可以重新 define
enumerable: true/false 是否可以枚举(for..in / keys())
value: 指定初始值
writable: true/false value 是否可以修改
get: 回调函数, 用来得到当前属性值
set: 回调函数, 用来监视当前属性值的变化
4) Object.keys(obj): 得到对象自身可枚举的属性名的数组
5) DocumentFragment: 文档碎片(高效批量更新多个节点)
6) obj.hasOwnProperty(prop): 判断 prop 是否是 obj 自身的属性

3. 数据代理

1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)
2) vue 数据代理: 通过 vm 对象来代理 data 对象中所有属性的操作
3) 好处: 更方便的操作 data 中的数据
4) 基本实现流程
a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符
b. 所有添加的属性都包含 getter/setter
c. getter/setter 内部去操作 data 中对应的属性数据

数据代理示例代码

vue中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>02_数据代理_vue</title>
 6 </head>
 7 <body>
 8 
 9 <div id="test"></div>
10 <script type="text/javascript" src="js/vue.js"></script>
11 <script type="text/javascript">
12   const vm = new Vue({
13     el: "#test",
14     data: {
15       name: '张三'
16     }
17   })
18   console.log(vm.name)  // 读取的是data中的name,  vm代理对data的读操作
19   vm.name = '李四' // 数据保存到data中的name上, vm代理对data的写操作
20   console.log(vm.name, vm._data.name)
21 
22 
23 </script>
24 </body>
25 </html>

mvvm中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>02_数据代理</title>
 6 </head>
 7 <body>
 8 
 9 <!--
10 1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作
11 2. 好处: 通过vm对象就可以方便的操作data中的数据
12 3. 实现:
13   1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性
14   2). 所有添加的属性都包含get/set方法
15   3). 在get/set方法中去操作data中对应的属性
16 -->
17 <div id="test"></div>
18 
19 <script type="text/javascript" src="js/mvvm/compile.js"></script>
20 <script type="text/javascript" src="js/mvvm/mvvm.js"></script>
21 <script type="text/javascript" src="js/mvvm/observer.js"></script>
22 <script type="text/javascript" src="js/mvvm/watcher.js"></script>
23 <script type="text/javascript">
24   const vm = new MVVM({
25     el: "#test",
26     data: {
27       name: '张三2'
28     }
29   })
30   console.log(vm.name)  // 读取的是data中的name,  vm代理对data的读操作
31   vm.name = '李四2' // 数据保存到data中的name上, vm代理对data的写操作
32   console.log(vm.name, vm._data.name)
33 
34 
35 </script>
36 </body>
37 </html>