vue2.0响应式原理及缺点

响应式原理Object.definedProprety

VUE的有一个特性叫双向绑定！但它这个双向绑定并不是一个真正的双向绑定，而是两个单向绑定。

双向绑定大致理解图

上图，你就可以理解这是VUE的双向绑定大致图，但实际情况要比这个复杂的多。下面我们来分析一下VUE的双向绑定中重要的一个环节：变量响应式

	<div id="app">
		{
    
    {
    
    message}}
	</div>
	var app = new Vue({
    
    
	            el: '#app',
	            data: {
    
    
	                message: 'Hello Vue!'
	            }
	        });

此时页面会渲染处出 Hello vue！

体验响应式，动态的修改页面中Hello vue! 的值。
我们添加一个按钮， 绑定click事件

	 <div id="app">
 		{
    
    {
    
    message}}
        <button @click="handle">btn</button>
    </div>
    <script>
        var app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: 'Hello Vue!'
            },
            methods: {
    
    
                handle() {
    
    
               		this.message = 'HELLO VUE3.0!'
                }
            }
        });
    </script>

我们点击按钮后，在页面中会响应变化

这正是因为Object.defineProperty的作用

ES5 方法 Object.defineProperty() 会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。如下代码一个简单的响应式方法：

	<script>
        var data = {
    
    
            name: 'Tom',
            age: 19
        };
        for (var i in data) {
    
    
            var temp = data[i];
            Object.defineProperty(data, i, {
    
    
                get() {
    
    
                    console.log(`我劫持了${
      
      i}的获取`);
                    return temp;
                },
                set(val) {
    
    
                    console.log(`我劫持了${
      
      i}的设置`);
                    console.log(val);
                    temp = val;
                }
            })
        }
   	</script>

当我们在浏览器控制台中去修改data中属性值时

get劫持了值，执行了set

VUE2.0响应式数据存在的缺陷及响应式原理

从上面看下来，你已经知道了，在vue2.0中，响应式原理使用了Object.definedProprety实现了数据响应式。但是Object.definedProperty还存在了一定的缺陷。

1. 无法监听到对象属性的动态添加和删除
2. 无法监听到数组下班和length长度的变化

	<div id="app">
        <h1>{
    
    {
    
    obj.name}}-------{
    
    {
    
    obj.age}}-----------{
    
    {
    
    obj.sex}}</h1>
        <p>{
    
    {
    
    arr}}</p>
        <button @click="fn">按钮</button>
    </div>
    <script>
        var app = new Vue({
    
    
            el: '#app',
            data: {
    
    
                message: 'Hello Vue!',
                obj: {
    
    
                    name: 'Tom',
                    age: 18
                },
                arr: ['Jerry', 'Speike']
            },
            methods: {
    
    
                fn() {
    
    
                    // this.obj.sex = '男' 
                    // 无法添加新属性  且Object.definedProprety 无法监听到
                    this.$set(this.obj, 'sex', '男');
                    this.$set(this.arr,2,'Tyke')
                }
            }
        });
    </script>

如果直接使用this.obj.sex 来添加新属性

我们点击按钮后无法添加新属性 且Object.definedProprety 无法监听到。数组无法监听到下标与length长度的变化

直接使用this.obj.sex 来添加新属性是无法被Object.defineProperty监听到的，所以vue2.0中提供给了我们 $get $set $delete这些方法用来弥补不足

当我们使用this.$set(this.obj,'sex','男')时我们发现页面中就被动态的渲染出来了。