Vu3
简述: 快速上手,开发即用,具体知识参考官方文档
具备知识
Vite
了解即可,使用时按需配置,更多参考官方文档( https://cn.vitejs.dev)
简述: 极速响应工具 (构建、启动、更新、插件使用等)
核心思想: 依赖 和 源码
工作原理:
引入rollup: 灵活,相比webpack速度快,适配 、esbulid(预构建依赖):打包速度快,兼容性差
HMR(动态模块热更新、热替换)
原生模块化提供源码,部分浏览器优化处理及按需加载
vite对于浏览器缓存处理: 源码(304协商缓存) ,依赖(强缓存)
TS
https://www.tslang.cn/index.html
通用写法
单文件组件(通过构建使用)
单组件
选项aip写法
组合api写法
可通过引入cdn
Composition API
ref
给源码传值,框架自动响应数据更新视图
支持参数: string、number、object、symbol、array
但若对数据不可修改,返回通过Object原型生成数据格式 RefImpl ,可通过value拿值
xxx.value
有一种情况可修改其数据
setup() {let obj = { name: 'vue3' };let data = ref(obj);data.value.name = 'aaa'; // ref不可修改值,但传入的是对象,源码自动判断为reactive,因此可修改值,return {data}}
reactive
响应式数据更新视图
支持参数: object
可修改原数据值
setup () {let obj = {name:'vue3'};let data = reactive(obj);data.name = 'haha'; // 可对值修改return {data }}
toRef
setup () {let obj = {name:'vue3'};let data = reactive(obj);data.name = 'haha'; // 可对值修改return {data }}
// 待更新