vue3.0尝鲜-帮我起床学习组合API（五）

时间：2023-03-31 21:34:26 vue.js

背景续前四篇：vue3.0尝鲜-从ToDoList说起（一）vue3.0尝鲜-理解变化(2)vue3.0尝鲜-tyepscript开发组件(3)vue3.0尝鲜-看完就开始(4)看完以上其实可以自己开发vue3.0了，不过这里是vue组合API介绍。setup不多作为组件使用CompositionAPI的入口传入参数：props,{slot,emit,attr}时机：创建组件实例=>初始化props=>调用setup（在beforeCreatehook之前调用）setup返回的ref会自动解析到模板上，不用写。valuethis在设置函数中不可用//html//clickcount+1//ts相同逻辑jsx编写（demo.vue组件）相同逻辑使用renderAPI（demo.vue组件）defineComponent（demo.ts组件）响应式系统APIreactive和reactive接收一个普通对象，然后返回普通对象的响应代理，类似2.0Vue.observable()ref接受一个参数值，返回一个responsive和changeable的ref对象打印ref对象而reactiveobjectcomputedconstcount=ref(1)//也可以只传入一个constplusOne=computed(()=>count.value+1)//传入get或set属性，constplusOne=computed({get:()=>count.value+1,set:(val)=>{count.value=val-1},})readonly（传入一个对象（reactive或normal）或ref，返回原始对象的只读代理）watchEffect立即执行传入的函数，并在a中跟踪其依赖关系反应式方式，当它的依赖改变时重新运行该函数//在组件挂载之前执行初始化。它会在初始化时执行一次。建议写在onMountedhook中watchEffect(()=>console.log(count.value))可以传入optioninterfaceWatchEffectOptions{//设置函数在组件更新前需要同步或重新运行，默认post冲洗？：'预'|'发布'|'sync'//onTrack和onTrigger选项可用于调试调试器的行为。//当响应式对象属性或ref作为依赖被跟踪时，onTrack会被调用//当依赖变化导致副作用被触发时，onTrigger会被调用:(event:DebuggerEvent)=>void}停止监听行为并停止回调conststop=watchEffect((onInvalidate)=>{console.log(count.value)onInvalidate(()=>{console.log('watchEffectends')})})stop()//停止watch//与watchEffect相比1.延迟执行回调函数2.更清楚哪些状态变化会触发监听器重新运行副作用3.访问之前的值以及监听状态改变后4.在2.03.0beforeCreateusingsetup()createdusingsetup()beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmountederrorCapturedonErrorCaptured依赖注入函数类似于2.xprovide/response/between两者之间可以调用。作者：constthemeRef=ref('dark')provide(ThemeSymbol,themeRef)//用户：consttheme=inject(ThemeSymbol,ref('light'))watchEffect(()=>{console.log(`themesetto:${theme.value}`)})Templaterefs类似于vue2.0中的this.$refs，但是用法变了//html{{count}}--{{countObject.count}}

//setupconstdemo=ref(null)onMounted(()=>{//console.log(demo.value)只能在渲染初始化后访问})//获取列表的引用{divs[i]=el}">{{item}}

反应式系统utilsisRef和unref//isRef检查一个值是否是一个ref对象。//unref是val=isRef(val)?val.value:valtoRef和toRefs的语法糖在介绍setup中，props是作为参数传入的，这里的props不能通过解构得到，否则会失去响应性//toRef可以用来创建reffor反应对象的属性constcountObject=reactive({count:0})c??onstcountinObject=toRef(countObject,'count')//props获取单独的数据并保持响应constpropsCount=toRef(props,'count')//toRefs将反应对象转换为refsconststate=reactive({foo:1,bar:2,})conststateAsRefs=toRefs(state)/*stateAsRefs的类型如下：{foo:Ref,bar:Ref}*/isProxy,isReactive,isReadonlyisProxy判断对象是否为reactive或readonly方法创建的代理isReactive判断对象是否为reactive创建的响应式代理isReadonly判断对象是否为readonly创建的只读代理高级响应式系统APIcustomRef：自定义ref，显式控制依赖跟踪和触发响应markRaw和shallowXX//markRow和后面的shallowXXX这些特性只停留在根层（即对象的第一层，深层不影响）//1.markRaw：将一个对象标记为“从未转换成响应式代理”，该函数返回对象本身constfoo=markRaw({})console.log(isReactive(reactive(foo)))//false//如果被标记通过markRaw，即使在响应式对象中作为属性使用，仍然没有响应式constbar=reactive({foo})console.log(isReactive(bar.foo))//false//2.shallowReactive:只为对象的私有（第一层）属性创建一个浅响应代理//3.shallowReadonly:只为对象自己的（第一层）属性创建一个shallowread-onlyresponsiveproxy//4.shallowRef:Createaref//注意：shallowRef不会对改变的.value进行响应式代理转换constfoo=shallowRef({})//改变操作会触发响应foo.value={}//但上面新赋值的对象不会变成响应式对象isReactive(foo.value)//false//5.reactive或readonly方法返回的toRow被转换为响应式代理的普通对象。最后，vue3.0是一个很好的尝鲜者。喜欢就点个赞，走吧！github代码地址