Vue3的学习
create-vue创建vue3项目
create-vue是官方新的脚手架工具，底层切换到了vite（下一代构建工具），为开发提供急速响应
- 前提环境条件：控制面板输入node -v，显示的是安装了16.0或更高版本的Node.js
- 创建一个Vue应用：npm init vue@latest
- vite.config.js --- 项目的配置文件基于vite的配置
- package.json --- 项目包文件核心依赖项是vue3
- main.js --- 入口文件createApp函数创建应用实例
- app.vue --- 根组件SFC单文件组件script-template
- 脚本script和模板template顺序调整
- 模板template不再要求唯一根元素
- 脚本script添加setup表示支持组合式API
- index.html --- 单页入口，提供id为app的挂载点
创建项目和yun：
创建一个Vue应用：npm init vue@latest
接下来会需要输入项目名，此时输入的项目名是：vue_project
接下来输入执行下面的语句（之后如果要打开项目也是指令，终端要进入项目所在的目录）
cd vue_project
npm install
npm run dev（之后打开项目使用这条语句）
组合式API
setup
执行时，比beforeCreate还要早
setup函数中，获取不到this（this是underfined）
vue2的完整写法：
（定义数据+函数 然后以对象方式return）
<script>export default {setup(){console.log('setup函数')const message='hello'const logMessage=()=>{console.log(message)}return{message,logMessage}},beforeCreate() {console.log('beforeCreate函数')}}
</script>
<template><div>{{ message }}</div><button @click="logMessage">按钮</button>
</template>
vue3的语法糖可以简化return：
（使用组合式API）
<script setup>
//数据
const message='this is a message'
const logMessage=()=>{console.log(message)
}
</script>
<template><div>{{ message }}</div><button @click="logMessage">按钮</button>
</template>
reactive()和ref()
reactive()
接收一个对象类型的数据，返回一个响应式的对象
<script setup>import {reactive} from "vue";const state=reactive({count:100})const setCount=()=>{state.count++}
</script><template><div>{{state.count}}</div><button @click="setCount">++</button>
</template>ref()
接收简单类型或复杂类型，返回一个响应式对象
本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型
底层：保存复杂类型之后，再借助reactive实现的响应式
注意：
- 脚本中访问数据，需要通过.value
- 在template中，.value不需要加（帮我们扒了一层）
<script setup>import {ref} from 'vue'const count =ref(简单类型或者复杂类型数据)
</script>
<script setup>// import {reactive} from "vue";// const state=reactive({// count:100// })// const setCount=()=>{// state.count++// }import {ref} from "vue";const count=ref(0)const setCount=()=>[count.value++]
</script><template><div>{{count}}</div><button @click="setCount">++</button>
</template>computed
步骤：
- 导入computed函数
- 执行函数在
- 回调参数中return基于响应式数据做计算的值，用变量接收
只读写法：
可写方法：
watch函数
监听一个或多个数据的变化，数据变化时执行回调函数
监听单个数据
- 导入watch函数
- 执行watch监听传入要监听的咸阳市数据（ref对象）和回调函数
监听多个数据
不管哪个数据变化都需要监听
1.其中第三个参数可以写immediate:true，可以立刻执行（例如在打开页面时）
2.deep深度监视，默认watch进行的是浅层监视
- const ref1=ref(简单类型)可以直接监视
- const ref2=ref(复杂类型)监视不到复杂类型内部数据的变化
3.对于对象中的单个属性，进行监视
组合式API下的数据传递
父传子
由于写了setup，所以无法直接配置props，此处借助于“编译器宏”函数defineProps接收传递的数据
defineProps原理
就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换
子传父
- 父组件中给子组件标签通过@绑定事件
- 通过defineEmits编译器宏生成emit方法
- 子组件内部通过emit方法触发事件
模板引用
概念：通过ref标识获取真实的都没对象或者组件实例对象
- 通过ref函数，生成一个ref对象
- 通过ref标识，进行绑定
- 通过ref对象，value即可访问到绑定的元素
defineFxpose()
在默认情况下<script setup>语法糖组件内部的属性和方法是不开放给父组件访问的，可以通过defineFxpose编译宏指定哪些属性和方法可以访问
defineExpose({testMessage
})project&inject
跨层组件通过provide函数提供数据
底层组件通过inject函数获取数据
新特性defineOptions
1.在vue2中用的<script>标签，其中setup，props，emits等是平级属性
2.在vue3中是用的<script setup>标签，setup属性已经没有了，无法添加与其平行的属性，所以引入了defineProps和defineFmits这两个宏。
如果要定义组件的name或其他自定义属性，还是得回到最原始的用法——再添加一个普通的<script>标签
所以引用了defineOptions宏，只要是用来定义Options API选项，可以定义defineOptions任意选项，props，emit，expose，slots除外（这些可以使用defineXXX来实现）
defindModel
要使用，在vite.config.js中加入配置，接着要重启项目
Pinia
Pinia是Vue的最新的状态管理工具，是Vuex的替代品
可以在创建Vue项目时Pinia那一栏选择Yes，也可以在该项目的终端输入指令：yarn add pinia 或者使用 npm install pinia