vue3中的各种知识点

1，ref(获取DOM元素)

<div ref="aaa"></div>
setup(){
	const main = ref(null);
	onMounted(()=>{
       console.log(main.value);
    })
}

2，vuex的使用

//这里的是store/index.js的封装
import { createStore } from "vuex";
import axios from 'axios';

export default createStore({
  // 声明变量
  state: {
    "name": 'xxxxx',
  },
  // 修改变量（state不能直接赋值修改，只能通过mutations）
  mutations: {
    // 参数一：state，参数二：新值
    getname(state, newValue){
      state.name = newValue
    },
  },
  // mutations的值由actions传入
  actions: {
	// 参数一：自带属性，参数二：新值
    setName(context, value){
      // 修改getname的值
      context.commit('getname',value)
    },
  },
  modules: {},
});

//这里是main.js文件的
...
import store from './store'
...
app.use(store)

//这里是使用的页面的
import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()  // 该方法用于返回store 实例
console.log(store.state.name);

3，跳转页面

import { useRouter } from 'vue-router'
const router = useRouter()
router.push("/index")
router.replace("/")

4，生命周期

//! 因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。
import { onBeforeMount } from 'vue'
onBeforeMount(()=>{})
onMounted(()=>{})
onBeforeUpdate(()=>{})
onUpdated(()=>{})
onBeforeUnmount(()=>{})
onUnmounted(()=>{})
//这里不常用的
onErrorCaptured(()=>{})//捕获错误
onRenderTracked(()=>{})//未渲染完成
onRenderTriggered(()=>{})//已渲染完成
activated(()=>{})//激活
deactivated(()=>{})//解散

5，自定义事件+传参

//父组件
<StudentDetail  @aaa="aaa"/>

setup(){
	aaa(num){
	   console.log(num);
	},
}
//子组件
<span @click="setStep(1)">彭于晏</span> >
emits: ['stepChange'],
setup(props,{emit}){
	setStep(num){
		emit("aaa",num)
	}
}

6，组件传参

//父组件
<StudentDetail aaa="123" />

//子组件
props:["aaa"],
setup(props){
	console.log(props.aaa);
}