Vue底层数据绑定视图的原理

2024-03-20 20:05:58

这是一个含有字符串类型属性 profile 的对象：

  let obj = {
    profile:''
  }

不过，身为对象属性的 profile 仅仅只是个字符串吗？在控制台中使用 Object API 中的 getOwnPropertyDescriptor 方法将其 “ 内在“ 打印出来，如图所示。

原来，对象属性内藏乾坤，我们甚至可以使用 Object API 的 defineProperty 方法对其配置，属性配置项（描述符）如表所示。

在这里可以停顿一下，想一想，对象属性被赋值时调用的 set 有何妙用呢？

下面来看一段有关 defineProperty 的代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Title</title>
 6 </head>
 7 <body>
 8 <span id="harry"></span>
 9 <input id="trigger" type="text">
10 <script>
11   let harry = document.getElementById('harry')
12   let trigger = document.getElementById(('trigger'))
13   let key = 'profile' //对象属性键名
14   let store = {} // 辅助get取值
15   let obj = {
16     profile:''
17   }
18   // 使用object api的defineProperty方法对其属性进行配置
19   Object.defineProperty(obj,key,{
20     set(value) { /// 函数类型，属性被赋值时调用
21       harry.innerText = value // 重点：修改DOM节点视图,将修改的值传递给span标签
22       store[key] = value // 将值传递给store
23     },
24     get() { // 返回值将作为属性值
25       return store[key]
26     }
27   })
28   trigger.addEventListener('keyup',function () {
29     // obj[key] = this.value
30     obj.profile = this.value
31     console.log(obj[key]);
32   })
33 </script>
34 </body>
35 </html>

上述代码中，在对象属性的 setter 函数中修改文本节点的值，所以当 obj.profile被重新赋值时，节点视图也会同步更新；然后对输入框添加事件监听 (addEventListener),当用户事件触发时，输入值将被赋于 obj.profile。以此方式，我们实现了数据与视图之间的“双向绑定”，这也是 Vue 数据与视图绑定的实现原理。

代码运行如图所示

在 Vue 中，当我们把普通的 JavaScript 对象传给 Vue 实例的 data 选项时， Vue 将遍历对象属性，并使用 0bject. defineProperty 将其全部转化为 getter/setter, 并在组件渲染时将属性记录为依赖。之后当依赖项的 setter 函数被调用时，会通知 watcher 重新计算并更新其关联的所有组件。由于 Object.defineProperty 是 ES5 中一个无法 shim （自定义拓展）的特性，所以 Vue应用无法运行在不支待 Object.defineProperty 的 IE8 及其以下版本浏览器上。

码农公寓

相关文章