2023.23 使用vue3问题记录

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。有想法的同学也可以加我微信进行交流：hp1256003949。

大家使用vue3有什么感受？我使用下来除了一些方法的引入比较简单外，编写组件的方式感觉和之前没什么不同，也是一样视图和内容是上一块下一块的要一直定位来定位去的。 然后使用函数式编程的方式可能让我们的代码更加整洁一些。

• 使用数据存储pinia

//main.ts
import { createPinia } from 'pinia'
app.use(createPinia())

定义store

//store/modules/user
import { defineStore } from 'pinia'
import { getUserInfo } from '@/api/common'
import { UserState } from '@/@types/store'
​
export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    userInfo: null
  }),
​
  getters: {
    user(state) {
      return state.userInfo
    }
  },
​
  actions: {
    async getUserInfo() {
      this.userInfo = await getUserInfo()
    }
  }
})
​

使用store

import { useUserStore } from '@/store/modules/user'
  const userStore = useUserStore()//获取用户信息

• 路由跳转，页面引入路由，不使用$router，使用router.push(xxx)

import router from '@/router' 
router.push({ name: 'billInfo', params: { billCode: billCode.value } })

• 获取路由参数信息：

//路由跳转
import { useRoute } from 'vue-router'
const route = useRoute()
route.params

• 使用生命周期函数

import {  onMounted, onDeactivated, } from 'vue'
onMounted(() => {
 //xxx
})
onDeactivated(() => {
 //xxx
})

• 使用生命周期函数onMounted ts提示报错，引入onMounted使用没问题，ts提示“"vue"”没有导出的成员“onMounted”。你是否指的是“onUnmounted”

该问题暂时还没找到解决的办法。

• 使用watch，其他computed、nextTick方法类似，对比vue2没有filters方法了，filters可以用函数实现

import {  watch } from 'vue'
const refScrollTop = ref<number>(0)
watch(refScrollTop, (val) => {})

• 路由注册方式

//router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes
})
​
export default router
​
//main.ts注册
import router from '@/router'
app.use(router).mount('#app')

• 父组件给子组件传参

//父组件
<tabs :tab-list="tabList" @changeTab="changeTab"></tabs>
//子组件
const props = defineProps(['tabList'])//属性传参
const tabList = ref(props.tabList)

• 子组件给父组件传参

//父组件
<tabs :tab-list="tabList" @changeTab="changeTab"></tabs>
function changeTab(index: number) {
  activeTab.value = index
}
//子组件
const emits = defineEmits(['changeTab'])

• Vue组件使用setup+ts语法

<script setup lang="ts" name="HomePage"></script>