Vue3响应式原理及如何使用

在Vue3中的响应式与Vue2中响应式原理有着些许不一

在Vue2中，Vue实现的底层是通过Object.defineProperty()方法把数据设置为getter和setter的访问形式，这样我们就可以在数据被修改时在setter方法设置监视修改页面信息，也就是说每当数据被修改，就会触发对应的set方法，然后我们可以在set方法中去调用操作dom的方法。

在Vue3中，响应式ref(基本数据类型)中处理采用的是Object.defineProperty 中的set 和get方法，复杂数据类型采用的是proxy(内部求助了vue3.0的新函数reactive()函数)
Proxy 比Object.defineProperty 多了一个 deleteProerty 实现删除
通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）：对被代理对象的属性进行操作。

在Vue3中怎么进行响应式开发呢？
如下：

 	import {ref ,reactive} from 'vue'
 	export default {
        name: '',
 		setup(){
  		 let num =ref(30)    // 基础数据类型用ref
		 let obj = reactive({   // 复杂数据类型用reactive
    		 a:{
    		   b:{
     		    c:'嘿嘿'
    		     }
   			  }
 		  })
   return {
     num,
     obj
 
   }
 }
};