响应式原理

Vue2响应式,defineProperty

Object.defineProperty(给哪个对象定义属性obj，定义哪个属性prop，属性配置descriptor)

vue2对对象响应式解决

<script>
methods: {
			// 添加属性
			// 当我们这样新增属性时，界面是不会有变化的
			addSex1() {
				this.obj.sex = '男'
			}
			
			// 我们要这么去添加属性，页面才会有变化
			addSex2(){
				this.$set(this.obj, 'sex', '男')
			}
			
			//同理，删除属性，当我们这样删除属性时，界面是不会有变化的
			deleteName1() {
				delete this.obj.name
			}
			// 我们要这么去删除属性，页面才会有变化
			deleteName2(){
				this.$delete(this.obj, 'name')
			}
		}
</script>

vue2对数组响应式解决

<script>
//我们需要通过调用这些方法来对数组的响应式进行实现，具体的数组方法如下所示：
//array.pop()
//array.push()
//array.shift()
//array.unshift()
//array.sort()
//arry.reverse()
//array.splice()
</script>

原理

function say() {
    var _obj = {};
    var a = 1;
    Object.defineProperty(_obj, "a",
        {
            //配置项和get/set是互斥不能同时出现
            // value: 1,
            // writable: true,
            // enumberable: true,
            // configable: true,
            get() {
                return a;
            },
            set(newVal) {
                console.log("set打印的a=" + newVal);
                a = newVal//更改值
            }
        })
    return _obj
}
var x = say()
x.a = 2
console.log(x.a);//set打印的a=2，2

Vue3响应式

• 对于基本数据类型，还是依赖于了Vue2中的object.defineProperty操作
• 对于对象和数组操作，Vue3采用了es6的proxy结合reflect对数据拦截进行响应式处理。

  const p = new proxy(person, {
    // 有人读取p 身上的某个属性
    get(target, propName) {
      console.log(`有人读取了p身上的${propName}属性`, 更新界面);
      return Reflect.get(target, propName)   //return 出去一个返回值
    }, 
    // 给p对象身上增加/ 修改某个属性时调用
    set(target, propName, value) {
      console.log(`有人修改/增加了p身上的${propName}属性`, 更新界面);
      Reflect.set(target, propName, value)
    },
 
    deleteproperty(target, propName) {
      console.log(`有人删除了p身上的${propName}属性`, 更新界面);
      return Reflect.deleteProperty(target, value)    // 删除一个属性
    }
  })