Vue-如何实现响应式

写在前面：总算在今天仔仔细细的看了一遍双向数据绑定的帖子，其实之前也看了很多，都是自己理解能力不太够，再一个静不下心（哭）。看完之后进行一下总结。如有理解不到位的欢迎指正，谢谢。

Vue的响应式：其实就是通过数据的改变去驱动DOM视图的变化。这里是Vue最核心的内容。初始化时通过Object.defineProperty进行绑定，设置通知的机制。当编译生成的渲染函数被实际渲染的时候，就会触发getter进行依赖收集，在数据变化的时候，触发setter进行更新。

首先一个小小入门例子。假设<p>标签的内容会随着obj中数据的改变而变化.。

1 <div id="app">
2         <p id="name"></p>
3     </div>
4     <script>
5         var obj={}
6         obj.name="软软"//操作Object.defineProperty来使得name数据的改变影响p标签
7     </script>

通过Object.defineProperty(obj, prop, descriptor)来实现。 obj:要在其上定义属性的对象。prop：要定义或修改的属性的名称。descriptor：将被定义或修改的属性描述符。

 1 <div id="app">
 2         <p id="name"></p>
 3 </div>
 4 <script>
 5      var obj={};
 6      Object.defineProperty(obj,'name',{
 7             get(){
 8                 return document.querySelector('#name').innerHTML;
 9             },
10             set(newVal){
11                 document.querySelector('#name').innerHTML=newVal
12             }
13       })
14    obj.name="软软"//操作Object.defineProperty来使得name数据的改变影响p标签
15 </script>

接下来创建一个新的newVue.js。通过使用new NewVue(.....)来实现vue的响应式

 1 class NewVue{
 2     constructor(options){//接收所想要配置的对象就像是new Vue({data:{...}})
 3         this.$options=options;//先缓存一下options一会其他的类要用到
 4         //数据响应化
 5         this.$data=options.data;//拿出{data：{}}的数据
 6         this.observe(this.$data);//对data中的数据进行观察.
 7     }
 8     observe(value){
 9         //为了语句健壮性，先判断是否存在这个value，不存在就返回了
10         if(!value||typeof value !='object'){
11             return;
12         }
13         //遍历该对象
14         Object.keys(value).forEach(key=>{
15             
16             this.defineReactive(value,key,value[key])
17         })
18     }
19     //定义数据响应式函数
20     defineReactive(obj,key,val){
21         this.observe(val)//为了递归实现类似{data:{foo.bar:"xxx"}}中的foo.bar这种数据嵌套的问题
22         Object.defineProperty(obj,key,{
23             get(){
24                 return val;
25             },
26             set(newVal){
27                 if(newVal==val){
28                     return;
29                 }
30                 val=newVal;
31                 console.log(`${key}属性更新了：${val}`)
32             }
33         })
34     }
35 }

创建一个index.html实现这个响应式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="newVue.js"></script>
    <script>
        const app=new NewVue({
            data:{
                test:"fjs是粑粑",
                foo:{
                    bar:"bar"
                }
            }
        });
        app.$data.test="hello fjs";
        app.$data.foo.bar="oh bar"
    </script>
</body>
</html>

最终实现的结果：

依赖收集

 1 class NewVue{
 2     constructor(options){
 3         this.$options=options;
 4         this.$data=options.data;
 5         this.observe(this.$data);
 6         //模拟一下watcher创建
 7         new Watcher();
 8         this.$data.test;
 9         new Watcher();
10         this.$data.foo.bar;
11     }
12     observe(value){
13         if(!value||typeof value !='object'){
14             return;
15         }
16         Object.keys(value).forEach(key=>{
17             this.defineReactive(value,key,value[key])
18         })
19     }
20 
21     defineReactive(obj,key,val){
22         this.observe(val)
23         const dep=new Dep()
24         Object.defineProperty(obj,key,{
25             get(){
26                 Dep.target&&dep.addDep(Dep.target)
27                 return val;
28             },
29             set(newVal){
30                 if(newVal==val){
31                     return;
32                 }
33                 val=newVal;
34                 dep.notify();//通知所有的watcher进行更新
35             }
36         })
37     }
38 }
39 
40 class Dep{//订阅器
41     constructor(){
42         this.deps=[];//在deps中存放若干依赖，也就是watcher(订阅者).这个依赖其实就是属性值发生改变的属性
43     
44     }
45     addDep(dep){//增加依赖
46         this.deps.push(dep)
47     }
48     notify(){//通知所有的依赖(watcher)去做更新
49         this.deps.forEach(dep=>dep.update())
50     }
51 }
52 
53 class Watcher{//订阅者其实就是用来做具体更新的那个对象
54     constructor(){
55         //将当前这个Watcher实例指定到Dep的静态属性target
56         Dep.target=this;//这个target只有一个，当有第二个watcher出现时就会覆盖成第二个watcher
57     }
58     update(){
59         console.log('属性更新了！！！')
60     }
61 }