vue3.0开发手册(实用版)

Vue3.2 看一遍就会的setup语法糖

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；

Vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需return，template可直接使用。

文件结构

data

---

method

---

computed

---

watch

---

props父传子

子组件

父组件

---

emit子传父

子组件

 父组件

---

 v-model

子组件

 父组件

 nextTick

---

子组件ref变量和defineExpose

• 在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的，但在 script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
• 如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。

子组件

父组件

---

 插槽slot

子组件

父组件

---

路由useRoute和useRouter 

---

 路由导航守卫

---

store

Vue3 中的Vuex不再提供辅助函数写法

---

生命周期

• 通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。
• 下表包含如何在 Option API 和 setup() 内部调用生命周期钩子

Option API	setup中
beforeCreate	不需要
created	不需要
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

---

CSS变量注入

---

原型绑定与组件内使用

main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
 
// 获取原型
const prototype = app.config.globalProperties
 
// 绑定参数
prototype.name = 'Jerry'

组件内使用 

---

对 await 的支持

• 不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成 async setup 。

---

定义组件的name

---

provide和inject

父组件

子组件

---

Vue3中使用echarts

// 安装
cnpm i echarts --save
 
// 组件内引入
import * as echarts from 'echarts'

---

pinia的使用

概述

现有用户可能对 Vuex 更熟悉，它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好，因此 Vuex 现在处于维护模式。它仍然可以工作，但不再接受新的功能。对于新的应用，建议使用 Pinia。

事实上，Pinia 最初正是为了探索 Vuex 的下一个版本而开发的，因此整合了核心团队关于 Vuex 5 的许多想法。最终，我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容，因此决定将其作为新的官方推荐。

相比于 Vuex，Pinia 提供了更简洁直接的 API，并提供了组合式风格的 API，最重要的是，在使用 TypeScript 时它提供了更完善的类型推导。

安装

yarn add pinia
# or with npm
npm install pinia

创建一个 pinia 实例

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

定义一个store

import { defineStore } from 'pinia'

//您可以将`defineStore（）`的返回值命名为任意名称，

//但最好使用store的名称，并用“use”将其包围

//（例如`useUserStore`、`useCartStore`和`useProductStore`）

//第一个参数是应用程序中存储的唯一id
export const useStore = defineStore('main', {
  // 其他选项...
})

//定义一个完整的store
//与 Vue 的选项 API 类似，我们也可以传递带有属性的选项对象。state actions getters
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})
//您可以将 视为store的属性，也可以将其视为store的属性，
//state => data
//getters => computed
//actions => methods
//这样会更容易记忆

// 还有另一种可能的语法来定义存储。与 Vue 合成 API 的设置函数类似，我们可以传入一个函数来定义反应式属性和方法，并返回一个包含我们要公开的属性和方法的对象。
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})

使用

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
export default {
  setup() {
    const store = useCounterStore()
    //结构并赋予响应性
    const { name, doubleCount } = storeToRefs(store)
    return {
      // you can return the whole store instance to use it in the template
      store,
    }
  },
}

state

//给 state 加上类型推导
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      userList: [] as UserInfo[],
      user: null as UserInfo | null,
    }
  },
})

interface UserInfo {
  name: string
  age: number
}
//或者给整个state加上类型推导
interface State {
  userList: UserInfo[]
  user: UserInfo | null
}

export const useUserStore = defineStore('user', {
  state: (): State => {
    return {
      userList: [],
      user: null,
    }
  },
})

interface UserInfo {
  name: string
  age: number
}

访问state

const store = useStore()

store.count++

重置状态

const store = useStore()

store.$reset()

getters

定义

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})
//添加类型约束
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // automatically infers the return type as a number
    doubleCount(state) {
      return state.count * 2
    },
    // the return type **must** be explicitly set
    doublePlusOne(): number {
      // autocompletion and typings for the whole store ✨
      return this.doubleCount + 1
    },
  },
})

访问

 访问其他getter

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    doubleCountPlusOne() {
      // autocompletion ✨
      return this.doubleCount + 1
    },
  },
})

将参数传递给获取者

export const useStore = defineStore('main', {
  getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
})
//组件中使用

actions

定义

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    // 因为我们依赖“this”，所以不能使用箭头函数
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(100 * Math.random())
    },
  },
})
//与 getter 一样，操作通过完全键入（和自动完成✨）支持来访问整个商店实例。与 getter 不同，操作可以是异步的
import { mande } from 'mande'

const api = mande('/api/users')

export const useUsers = defineStore('users', {
  state: () => ({
    userData: null,
    // ...
  }),

  actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // let the form component display the error
        return error
      }
    },
  },
})

使用

export default {
  setup() {
    const store = useCounterStore()

    store.randomizeCounter()
  },
}