Vue3 typescript vite入门

前言:vite esbuild esmodule，速度快 劫持http 替换所有module
webpack 构建代码解构template不同版本有所区别
volar 3.0vscode插件 禁用vuter
webpack commonjs逻辑 vite esmodule
1.ref 单个元素数据 const count = ref(1); reactive对象 让它们具有监听特性，...toRefs()解构
2.templateRefs ref="root" const root = ref(null) html泛型
onMounted(()=>) 指代具体html元素内容
3.computed 值变化计算 独立成api，const plus = computed(()=> count.value + 1)，返回readonly value:T,修改在set:(val)处理
4.watch(()=> state.count,(count,prevCount)=>,{
deep:true,
immediate: false
});
5.const stop = watchEffect((onInvalidate)=>{
onInvalidate(()=>{
//清除副作用
})
},{
onTrigger(e){

}
});
stop()
6.inject provider
export default defineComponent({
name:"child",
setup(){
const theme = inject("test","yd");
watchEffect(()=>{
console.log((theme as unknown as Ref).value)
})
return
}
})

import DemoChild from "./Child.vue";
const = useContext();
const themeRef = ref("dark");
provide("test",themeRef);
function changeTheme()
expose()
7.组件间传递函数 父组件ref onMounted拿到函数 子组件expose组件内的函数和数据