vue3.0梳理之响应式数据原理-CFANZ编程社区

vue2.0的defineProperty

2.0响应式原理在使用中其实理解与否区别不大，但是使用肯定是不但要知其然，也要知其所以然的，简单概述一下2.0的数据响应式原理

defineProperty内的参数有以下属性

值	释义
obj	要定义属性的对象。
prop	要定义或修改的属性的名称或 Symbol 。
descriptor	要定义或修改的属性描述符。

descriptor内的参数也较为简单

属性	描述	默认值
configurable	描述符能否被改变	false
enumerable	能否被枚举	false
value	该属性对应的值。	undefined。
writable	能否被改写	false
get	当访问该属性时调用	undefined
set	当属性值被修改时调用。该方法接受一个被赋予的新值	undefined

observe的极简实现如下

     var obj = {};
     Object.defineProperty(obj, 'key1', {
     //key1在这里实际上就是循环绑定时传入的prop
         get: function () {
             return val;
         },
         set: function (newVal) {
             val = newVal;
             //一般我们用到的也就是此处的set，这个set被触发的时候，就可以在此处进行逻辑
             //vue2.0在逻辑中进行了runder函数的触发
         }
     });
     document.addEventListener('keyup', function (e) {
         obj.key1= e.target.value;
     });

vue3.0的Proxy

值	描述
target	要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler	一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

3.0内的更加简单明了，但是总结在handler内的代理操作更加的完善，很多，十三个拦截方式，想要知道的可以去搜一下Proxy的handler内的能力都有哪些，在我们自己用到及需要了解的其实还是getter和setter操作，升级版的get和set

     var obj = {};
     var obj1 = new Proxy(obj, {
         get: function (target, key, receive) {
             return target[key];
         },
         set: function (target, key, newVal, receive) {
             target[key] = newVal;
         }
     })
     document.addEventListener('keyup', function (e) {
         obj1[0] = e.target.value;
     });

修改对象内属性等离谱的操作也变得可以触发set，再也不用深拷贝之类的操作来达到触发更新的目的

结尾放一下暴漏弊端的2.0的defineProperty使用代码，助于理解

	observe.prototype.observe = function(obj){
		var val;
		var that = this;
		for(let key in obj){//遍历所有属性，依次设置监听
			val = obj[key];
			if(typeof val ==='object'){
				this.observe(val)	//如果是对象的话进行递归
			}else{
				Object.defineProperty(this.$data,key,{
					get:function(){
						return val;
					},
					set:function(newVal){
						val = newVal;
						that.render();
					}
				})
			}
		}
	}
	vue.prototype.render = function(){}//完成渲染的方法