vue数据变化的监控是如何做到的

最新推荐文章于 2023-11-30 09:27:38 发布

weixin_34345560

最新推荐文章于 2023-11-30 09:27:38 发布

阅读量1.5k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dangdanghepingping/p/10582486.html

版权

mvvm框架里的数据监控对象,包括基本数据类型和对象, 对象分为对象和数组.

首先是对普通数据类型和对象的监控.其次是对数组的监控.

对对象的监控需要用到递归;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 
11 <body>
12     q请输入:<input id="oInput" type="text">
13     <div>
14         <p>我是绑定的输出框</p>
15         <div id="show"></div>
16     </div>
17 
18 
19     <script>
20         //创建一个data对象作为数据层model
21         //输入时,将input的值传给data,data接到值后,触发通知函数,并将值传给show
22         //当data的值被修改时候,触发data的set,将input的值修改,并传值给show
23         const data = {
24             value: '',
25             demo: ''
26         }
27         oInput.oninput = function () {
28             data.value = this.value;
29         }
30 
31         function observe(data) {//监控对象属性发生变化
32             if (!data || typeof data !== 'object') {
33                 return;
34             }
35             Object.keys(data).forEach(function (ele) {//对象的所有属性
36                 definePro(data, ele, data[ele]) //形成闭包;
37             })
38 
39         }
40         function definePro(data, key, value) {
41             observe(value) //用递归监控value是object的情况.
42             Object.defineProperty(data, key, {
43                 get() {
44                     getProx();
45                     return value;
46                 },
47                 set(newVal) {
48                     if(value === newVal){//判断改没改
49                         return ;
50                     }
51                     setProx();
52                     value = newVal;//这一步最重要!!!!形成闭包,返回value就可以
53                     update();
54                 }
55             })
56 
57 
58         }
59         function update(){
60             var value = data.value
61             show.innerText = value;
62             oInput.value = value;
63         }
64         function getProx() {
65             console.log('get')
66         }
67         function setProx() {
68             console.log('set')
69         }
70         observe(data)
71     </script>
72 
73 </body>
74 
75 
76 </html>

对应数组,利用defineProperty监控Array.prototype.

 1         let arr = [];
 2         let { push } = Array.prototype;//仅以push为例


 7         function update() {
 8             console.log('更新了')
 9         }
10         function observe(data) {
11             Object.defineProperty(Array.prototype, 'push', {
12                 value:  function (...arg) {
13                         update();
14                         push.apply(this, arg);
15                     }
16                
17             })
18         }
19         observe();

转载于:https://www.cnblogs.com/dangdanghepingping/p/10582486.html

weixin_34345560

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue数据变化的监控是如何做到的

mvvm框架里的数据监控对象,包括基本数据类型和对象, 对象分为对象和数组.首先是对普通数据类型和对象的监控.其次是对数组的监控.对对象的监控需要用到递归; 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> ...
复制链接

扫一扫