vue3.0 reactive

接收一个普通对象然后返回该普通对象的响应式代理,会影响对象内部所有嵌套的属性,即发生改变触发视图层变化
	内部基于es6 Proxy代理对象实现对数据的劫持,通过Reflect操作对象数据
		代理对象和源对象操作是相互同步的,但只有代理对象会引起视图更新
	

使用:
	import { reactive } from 'vue'
	
	setup()
	{
		const x = reactive(对象)
		
		(1)自动解套	
			只有当reactive的参数是{}时
				({xx:ref(xx)})时,不用解套ref
				
			传入其他对象时,需要.value解套ref
				const arr = reactive([ref(0)])
				console.log(arr[0].value)
		
		(2)失去响应性的操作
			(1)解构赋值会使得赋值内容丢失响应性
				const {name}=reactive({name:'jeff'})
				const obj={
					...reactive({name:'jeff'})
				}
			   这两种方式都会使得赋值的内容丢失响应性
			   解决方法:
			   	使用toRefs(reactive对象),将对象内部属性都转换成ref对象,属性.value进行操作
			
			(3)直接赋值会使得reactive对象失去响应性
				reactiveObj={a,b,c};
				解决方法:
					Object.assign(reactiveObj,{a,b,c})
				
				const state = reactive({ count: 0 })
				
				let n = state.count;	n失去响应性连接，不影响原始的 state
				
				callSomeFunction(state.count); 无法跟踪state.count的变化
			
			 (4)直接替换会丢失响应性
			 	let state = reactive({ count: 0 })
				state = reactive({ count: 1 })	会丢失响应性


	}