一、简介
1、简介
Vue3是新的默认版本，拥有更快的速度，更好的语法
二、使用create-vue搭建Vue3项目
1、创建项目
1、介绍
create-vue是Vue官方新的脚手架工具，底层切换为了vite，为开发提供极速响应
2、使用
2.1、确定环境条件
2.1.1已安装16.0或更高版本的Node.js
node -v
2.2、创建一个Vue应用
npm init vue@latest
2、认识文件
1、vite.comfig.js —— 基于vite的配置
2、main.js —— createApp函数创建应用实例
//将创建进行了封装，保证了每个实例的独立封闭性
//如：
// 路由：createRouter 仓库：createStore
//注：
// createApp(App).mount('#app')中
// mount('#app')指，设置挂载点为id = app的位置
3、app.vue
//script加上setup，允许在script中直接编写组合式API
//模板template不再要求唯一根元素
//组件不再需要单独注册，导入即可使用
4、assets
//图片、样式文件的目录
5、components
//组件目录
三、组合式API
1、setup
1、介绍
setup是组合式API的入口
2、用法
setup(){
//语句，执行时机在beforeCreate之前
//注：setup中，获取不到this
//注：在setup中可以提供数据和函数，但若要在template中使用，需要return
//如：
const message = 'Hello Vue3!'
const logMessage = () =>{
console.log(message)
}
return{
message,
logMessage
}
},
2、<script setup>语法糖
1、介绍
当使用了<script setup>后，就不再需要
export default{
setup(){
return{
...
}
}
}
而是可以直接快捷的编写
2、示范：
<script setup>
const message = "This is message"
const logMessage = () =>{
console.log(message);
}
</script>
<template>
<div class="index">
{{ message }}
</div>
<button @click="logMessage">logMessage</button>
</template>
3、reactive
1、作用
接受对象类型数据的参数传入，并返回一个响应式的对象
2、使用
2.1、导入
import { reactive } from 'vue'
2.2、执行函数
const state = reactive(对象类型数据)
//注：只可以接受对象类型
4、ref —— 建议只用这个
1、作用
接受简单类型或对象类型的数据，并返回一个响应式的对象
2、使用
import { ref } from 'vue'
2.2、执行函数
const state = ref(简单或对象类型数据)
//本质上是在将简单类型包装为复杂类型后，再借助reactive实现的响应式
2.3、示例
let kg = ref({
count:100,
like:50
})
3、注
3.1、在脚本中访问数据，需要通过.value
3.2、在template中，不需要通过.value
5、computed
1、作用
与vue2基本一致，只是修改了写法
2、使用
2.1、导入
import { computed } from 'vue'
2.2、执行函数
const computedState = computed(() => {
return 计算后的值
})
3、扩展使用
//computed默认只读，可以通过get和set语法创建可写的ref
//但默认情况应该避免修改计算属性的值
//如：
const computedList = computed({
get: () => count.value + 1,
set: (val) => {
count.value = val + 1
}
})
6、watch
1、作用
侦听一个或多个数据的变化，数据变化时执行回调函数
2、基本使用
import { watch } from 'vue'
2.2、执行函数
watch(count, (newValue,oldValue) => {
console.log(`count发生了变化，老值为${oldValue}，新值为${newValue}`)
})
3、侦听多个数据
watch([count,name],([newCount,newName],[oldCount,newCount]) =>{
console.log('count或者name变化了',[newCount,newName],[oldCount,oldName])
})
4、配置项
4.1、immediate
//在侦听器创建时立即触发一次回调，响应式数据变化后继续执行回调
4.2、deep
//进行深度监视，watch默认进行的是 浅层监视，无法监测到复杂类型内部数据的变化
4.3、精确监听
//在不开启deep的前提下，对精确的数据进行监听，只有数据变化时才执行回调
4.3.1、语法
() => 数据,
(newValue,oldValue) => 执行事件
三、生命周期API
