详解Vue2.0的响应式原理 上_vue2.0响应式原理作用

一、什么是Vue的响应式

PS：最近朋友问我关于Vue的响应式的问题，我说这玩意网上一堆文章，自己搜好了，他说讲的迷迷糊糊的很多地方不理解，我也问了下哪里不懂，确实好多文章都讲的乱七八糟的，尤其是很多文章因为Dom这一块太复杂还是怎么回事干脆不讲如何对Dom节点产生影响这一块最重要的东西，懂得看了没啥用，不懂的看了迷迷糊糊XD，当然还是有很多大神的文章讲解的很棒，结束废话正题如下。

首先区分一下响应式布局和Vue的响应式（也叫双向绑定）是不一样的，虽然都叫响应式。

Vue的响应式意思就是数据在改变的时候，Dom层，也就是视图也会跟着更新，这也是mvc框架和mvvm框架最大的区别之一，省去了Controler对视图view，数据model的复杂处理，而替换成了View-Model，让我们写起代码行云流水，丝滑柔畅。

---

二、响应式详解

在咱们每一个vue项目中都有非常重要的这么一个文件main.js中，初始化了Vue类，下附代码。

new Vue({
  render: h => h(App),
}).$mount('#app')
1
2
3

在new Vue()中的执行vm._init()初始化的时候，在执行initState(vm)的时候就初始化一些State(状态)，像是props、data、watch、methods等，其中的data就是用户定义的数据，这时data就会被初始化（执行 initData(vm) 函数）

---

1.首先咱们先写一个响应式的最基本结构，Vue2.0是依靠Object.defineProperty() JS标准内置函数来实现的，后续Vue3.0有可能会使用new Proxy()来代替2.0的写法，现在来看期望不高，ES6语法的普及程度还没到百分之百，估计九十都够呛。

	//Dom层
	<div id="name"></div>
    <div id="birthday"></div>
    <div id="carrying"></div>
1
2
3
4

下面这里使用了Object.defineProperty函数来达到了一个监听data对象的效果。

下面这两个函数get，set需要讲解一下

1. 这里的set是监听data下辖属性的变化，如果data的属性变了就会触发set函数，注意不会监听属性增删，数组的变化。

2. 而get是监听data下辖属性的使用，这里的使用是读取使用，意思就是只要你读取了data的属性就会触发get函数，console.log(data.name)也算读取，datas.name.familyname = 'Alice'也是读取，但是datas.name= 'Alice · Ben'就不是了，细品一下有啥不同。

//逻辑层
	let _defined;
    let datas = {};
    //---------------------------------------
    //使用Object.defineProperty()函数监听datas.one
    Object.defineProperty(datas,"one",{
    	set:_new=>{
			//datas.one被改变时触发
            _defined = _new;
            
        },
        get:()=>{
            //datas.one被读取时触发
            document.getElementsByTagName('span')[0].innerHTML = _defined
            return _defined;
        },
	  	enumerable: true, //可枚举，但是不会被监听到
        configurable:true // 可删除，同上
    });
    //--------------------------------------
    
    datas.one = 1 //这个操作触发了set函数
    console.log(datas.one) //这个操作触发了get函数
    //点击让datas.one加一
    document.getElementsByTagName('button')[0].onclick=function(){
        datas.one+=1 //这个操作先触发了get函数，后触发了set函数
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

上述代码就完成了对data对象的一个基本的双向绑定，这一套花里胡哨的操作就是叫reactive化（响应化），经过变身之后，严谨来说data下辖的数据就叫响应式数据，（data本身不是），data下辖属性的任何修改都可以被监听到，但是还算不上完全的响应式数据，因为有诸多不足，属性的删除操作，新增的数据，数组变化都是监听不到的。