创建项目
使用vue-cli创建
使用vite创建
工程结构
main.js中
- 在模板中vue3中是可以没有根标签了，这也是比较重要的改变
- 应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。
组合式API
setup函数
-
理解：Vue3.0中一个新的额配置项，值为一个函数
-
setup是所有Composition API(组合api) “表演的舞台”
-
组件中所用到的：数据、方法等等，均要配置在setup中
-
setup函数的两种返回值:
- 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注）
- 若返回一个渲染函数：则可以自定义渲染内容。
- 注意点：尽量不要与Vue2.x配置混用
- Vue2.x配置（data ,methos, computed…）中访问到setup中的属性，方法
- 但在setup中不能访问到Vue2.x配置（data.methos,compued…）
- 如果有重名，setup优先
- setup不能是一个async函数，因为返回值不能是return的对象，而是promise，模板看不到return对象中的属性
ref函数
- 作用：定义一个响应式的数据
- 语法： const xxx = ref(initValue)
-
- 创建一个包含响应式数据引用对象（reference对象）
-
- JS中操作数据：xxx.value
-
- 模板中读取数据：不需要.value，直接：{{xxx}}
备注：
- 接收的数据可以是：基本类型、也可以是对象类型
- 基本类型的数据：响应式依然靠的是Object.defineProperty()的get和set完成的(VUE2中的数据代理)
- 对象类型的数据： 内部”求助“了Vue3.0中的一个新的函数——reactive函数
