Vue3.0+TypeScript+Vite+VueRFCTemplate

事前准备 vite官网传送门 Vue3 vscode推荐插件:volar 项目创建(推荐使用yarn包管理器) yarn: $ yarn create @vitejs/app <project-name> --template=vue-ts $ cd <project-name> $ yarn $ yarn dev 项目结构 main.ts 在个人想法上,我觉得createApp()是vue应用的实例,createApp支持链式调用 App.vue: 这是兼容vue2.0的语法,下面是vue3.0 rfc写法(还处于实验性阶段)。 rfc官方说明 setup volar提供了快速转换rfc模板的按钮 setup是结合了vue2.0的created生命周期函数和data还有methods(后面会提到)。上图变换后的代码是会在运行时报错的,只需要将下方的export default去掉即可。 Composition API ref(ref sugar2) 使用 ref sugar2 需要在vite.config.ts中开启 声明: $ref是语法糖,可将一些基本属性变成响应式,需要注意的是refSugar形式的ref不能使用const关键字来定义 ref、reactive、computed 上图是reactive、ref和computed混合使用,至于效果,请各自复制下方代码体验 <template> <div id="app"> <div v-for="(item, index) in state.persons" :key="index"> {{ item.name }}是{{ item.age }}岁 </div> <div> <h3>修改zhangsan的年龄</h3> <input type="text" v-model="zAge"> </div> </div> </template> <script lang="ts" setup> import { reactive, watch, computed } from 'vue' let zAge = $ref(12) const state = reactive({ persons: [ { name: 'zhangsan', age: computed(() => zAge) }, { name: 'lisi', age: 20 } ] }) </script> watch watchEffect 声明: 效果: 组件系统 全局注册 App.