1.Vue3定义响应式数据(ref/reactive)import{reactive,toRefs}from'vue'exportdefault{setup(){constdata=reactive({title:'Hellozbw',todoList:[{id:1,name:'kyrie',age:18},{id:2,name:'wen',age:18}]})//1.toRefs:将普通对象转换为响应对象constrefData=toRefs(data)//2、也可以用ref定义constname=ref('kyrie')//取ref定义的数据时,需要获取其值conosle.log(name.value)//'kyrie'//修改name.value='wen'return{...refData}}}2.Vue3定义和使用全局属性(方法)vue.prototype替换为config.globalProperties//main.js全局定义import{createApp}from"vue";importAppfrom"./App.vue";constapp=createApp(App);//定义去抖动方法constdebounce=(fn,delay)=>{lettimer;return(...args)=>{if(timer)clearTimeout(timer);timer=setTimeout(()=>{fn.apply(this,args);},delay);};};//将debounce方法挂载到原型app.config.globalProperties.$debounce=debounce;//在.vue组件中使用import{getCurrentInstance}from'vue'//通过getCurrentInstance获取当前实例,取出debounceconst{proxy:{debounce}}=getCurrentInstance()//可以在组件中使用onMounted(()=>{data.onSubmit=debounce(data.onSubmit,500)})3.Vue3自定义指令(全局)import{createApp}from"vue”;从“./App.vue”导入应用程序;constapp=createApp(App);//全局注册一个命令来高亮文本app.directive("highlight",{//vue3修改了hook的名字,更加语义化beforeMount(el,binding,node){el.style.color=binding.value;},});//在.vue组件中使用自定义指令
