创建项目：
https://primarycolor.blog.csdn.net/article/details/112239661
一、定义响应式数据和事件方法。
代码：
<template>
<!--vue3不需要写根组件了-->
<div>{{num}}</div>
<div>{{name}}</div>
<div>{{arr}}</div>
<div>{{obj.age}}</div>
<div>{{username}}</div><!--username是data对象的属性，但是return的时候使用了...toRefs方法，也就不需要通过data来访问username。
<div>
<button @click="add"></button>
</div>
<div>{{num1}}--{{num2}}--{{num3}}</div>
</template>
<script>
Home.vue:
//编写js内容的
import {defineComponent,ref,reactive,toRefs,watchEffect,watch,computed} from 'vue'
export default defineComponent({
name:'Home',//组件名称
//接收父组件的数据
props:{},
//定义子组件
components:{},
setup(props,ctx){ //所有定义的数据在这里面
let num=ref(1) //定义数据，方式一。
let data=reactive({username:'jack'});//定义数据，方式二。
let name=ref('jack')
let arr=ref([2,23,0,18,0])
let obj=ref({
age:20
})
//谁用了谁，被调用的方法必须写在调用的前面，不然无法调用，如果是function的定义函数就不会出现先后问题。
let fn=()=>{
console.log('这是fn')
}
//定义方法
const add=()=>{
//访问定义的数据
//ref定义的数据，数据名.value
num.value++;
//reactive定义的数据，直接访问。
data.username='tom'
fn();//可以直接调用另一个方法，不需要加this
}
//监听ref或者reactive定义的数据
//只要数据变化就会重新执行watchEffect
//需要用到监听的数据
//watchEffect返回一个停止监听的函数
let stopWatchEffect=watchEffect({
console.log(num.value)
console.log(data.name)
if(num.value==5){
stopWatchEffect();//当num的值为5时，停止监听器
}
});
//watch是监听某一个或者某几个数据，需要制定数据源
watch(()=>num.value,(val,oldVal)=>{
console.log('旧值新值：',oldVal,val);
});
watch(()=>data.name,(val,oldVal)=>{
console.log('旧值新值：',oldVal,val);
});
//一次性监听多个值
//deep是深度监听，如果监听的是对象或者数组，需要设置deep为true
//immediate是立即监听，页面已进入，就会执行一次watch。
let stopWatch=watch(()=>[nu m.value,data.name],(val,oldVal)=>{
console.log('旧值新值：',oldVal,val);//最后输出的形式：[num.value,data.name]
if(val[0]==5){
stopWatch();//停止watch
}
},{deep:true,immediate:true});//{deep:true,immediate:true}跟vue2相似，是否深度监听和是否立即执行
//计算属性
let num1=ref(10)
let num2=ref(20)
let num3=computed(()=>{
//必须return一个具体的值
return num1.value+num2.value;
});
return{
...toRefs(data),通过reactive定义的需要调用toRefs
num,
name,
arr,
obj,
add,
fn,
num1,
num2,
num3
}
}
})
</script>
<style scoped lang='scss'>
</style>相关函数： //跟react类似，需要调用函数来声明响应式函数。
defineComponent：定义组件
ref：定义数据
二、路由。
router/index.js文件内容说明：
import {createRouter,createWebHistory} from 'vue-router'//createRouter：创建路由，
相关知识：
1.createWebHistory：创建路由模式。
2.除了首页和父路由之外，其他路由都通过懒加载路由的方式。注意父路由不要用懒加载哈。
其他内容跟vue2相同。
3.history模式链接路径没有“#”，hash模式有“#”。
跳转路由的方式：
import {useRouter} from 'vue-router'
//...省略部分代码
setup(){
//useRouter会返回全局的路由对象
let router=useRouter()
let goto=()=>{
//跳转路由
//1.push跳转
router.push('/about');
router.push({
path:'/about',//也可以使用name:'About'方式
//跳路由传参数。
query:{
}
})
//2.replace替换页面
router.replace('/about')
router.replace({
path:'/about',//也可以使用name:'About'方式
})
//后退
router.back();
//前进
router.forward();//很少用，只有回退后的页面可以调用
//前进到哪一个缓存页面
router.go(1);//router.go(-1)等于回退一级页面。
}
}三、跳转路由方式和传参。
1.跳路由传参方式。
query：参数会显示到浏览器链接中
router.push({
path:'/about',//也可以使用name:'About'方式
//跳路由传参数。
query:{
id:'1',//跟vue2相似。
}
})
param：参数不会显示到浏览器链接中
router.push({
name:'About',//params只能使用name方式
//跳路由传参数。
params:{
id:'1',//跟vue2相似。
}
})
2.获取传递的参数。
import {useRoute} from 'vue-router'
setup(){
//当前路由对象
let route=useRoute();
console.log(route.query);//获取query传参方式的参数
console.log(route.params);//获取params传参方式的参数
}
四、路由守卫。
1.路由守卫：
router/index.js：
//路由守卫
//全局进入路由的守卫函数
//to：要进入的路由
//from：从哪个路由来
//next：是一个函数，必须要调用它，否则程序就会阻塞。
router.beforeEach((to,from,next)=>{
next();
});
//全局离开的。
router.afterEach((to,from,next)=>{
next();
});2.组件内守卫：
import {onBeforeRouteLeave} from 'vue-router'
setup(){
onBeforeRouteLeave((to,from)=>{
console.log(to,from);
});
}五、状态管理。
1.定义数据。
store/index.js:
import {createStore} from 'vuex'
export default createStore({
//如何定义状态管理数据
state:{
name:'jack111'
},
//同步修改state的值
mutations:{
setName(state,val){
state.name=val
}
},
actions:{
},
modules:{
}
})2.获取数据。
import {defineComponent,computed,ref} from 'vue'
import {useStore} from 'vuex'
setup(){
let store=useStore();
//获取vuex中数据
let name=computed(()=>store.state.name);
console.log('vuex中的数据：',name)
//修改vuex中的数据
store.commit('setName','tom')//commit调用mutation中的方法。
}