vue3.0 响应式工具集

使用
	import {unref,toRef,toRefs,isRef,isProxy,isRefs,isReactive,isReadonly} from 'vue'

	(1)unref
		判断是否是ref对象,是返回ref对象.value值,不是返回参数本身
		const xx=unref(x)
		
	(2)toRef
		为一个reactive对象的属性创建一个ref,并返回该ref,即可通过返回值和reactive对象操作属性
			const x = reactive({xx:xxx})
			const y=toRef(x,xx);
			
			y.value和x.xx都可以操作xx属性

	(3)toRefs
		把一个响应式对象转换成普通对象,该普通对象的每个属性都是一个ref对象
			const x = reactive({xx:xxx})
			const y=toRefs(x);
			
			y.xx.value和x.xx都可操控属性
	
	(4)isRef
		检查一个参数是否为一个 ref 对象。
	
	(5)isProxy
		检查一个对象是否是由reactive或者readonly方法创建的代理。
	
	(6)isReactive
		检查一个对象是否是由reactive创建的响应式代理
	
	(7)isReadonly
		检查一个对象是否是由readonly创建的只读代理。
	
	(8)markRaw
		显式标记一个对象为“永远不会转为响应式代理”,函数返回这个对象本身。
		即使在响应式对象中作属性，也依然不是响应式的
			const foo = markRaw({})
			console.log(isReactive(reactive(foo)))  false
			
			const bar = reactive({ foo })
			console.log(isReactive(bar.foo))  false
			若
			 const obj3=markRaw({name:{}}); 		 单独的name是不可代理的
			 const obj4=reactive({obj3:obj3.name})   obj4.obj3是可代理的
			 	即是浅层转换,即当markRaw对象的属性有对象时,放到其他对象中,是可代理的

				
	(9)shallowReactive
		为对象第一层属性创建浅层响应式代理,不会深层代理(如第一层属性是个对象)
			const x=shallowReactive({x:'xx',xx:{xxx:'xxx'}})
				x.x是可代理的
				x.xx是不可代理的
				x.xx.xxx是非响应式
				
	(10)shallowReadonly
			为对象第一层属性创建浅层只读响应式代理,不会深层代理(如第一层属性是个对象)
			const x=shallowReactive({x:'xx',xx:{xxx:'xxx'}})
				x.x是只读的
				x.xx不是只读的
				
	(11)shallowRef
		创建一个 ref,将会追踪它的.value更改操作,但是并不会对变更后的.value做响应式代理转换(即变更不会调用 reactive).
		const foo = shallowRef({})  会追踪foo的变更
		foo.value = {}
		上面新赋的这个对象并不会变为响应式对象
		isReactive(foo.value)  false

	(12)toRaw
		返回由reactive或readonly方法转换成响应式代理的普通对象,是原始对象的引用
		const foo = {}
		const reactiveFoo = reactive(foo)
		
		console.log(toRaw(reactiveFoo) === foo) true

代码示例:

<template>
  <div>
      <img src="./logo.png">
    <h1>Hello Vue 3!</h1>
    {{name}}{{obj.sex}}{{data}}
    <button @click="inc" ref='btn'>Clicked {{ count }} times.</button>

    <ul>
      <li v-for='(item,index) in 3' :key=index :ref="el=>{divs[index]=el}">
          {{item}}
      </li>
    </ul>
  </div>

</template>

<script>
import { ref,reactive,computed,readonly,watchEffect,watch,onMounted, onUpdated, onUnmounted,onRenderTracked,onRenderTriggered,
    inject,provide,render, onBeforeUpdate,unref,toRef,toRefs,isRef,isProxy,isRefs,isReactive,isReadonly
} from 'vue'
const ThemeSymbol = Symbol()



export default {

  setup() {
    let count = ref(0)
    let count2=ref(2);
    let normal='123'
    let name = ref('jeff')
    const obj=reactive({sex:'male'})
    const robj=readonly(obj); 
    const divs = ref([])
    let timer;

    const btn =ref(null);

    console.log(unref(normal));
  
    const inc = () => {

       count.value++;
       name.value='jak'

    }


    onMounted(()=>{
     
    })

    return {
      count,
      inc,
      name, //在setup返回对象中自动解套
      obj,
      btn,
      divs
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
</style>