vue3.0学习笔记

---

前言

Vue3.0的步伐越来越近了，是时候了解起来了，虽然嘴上喊着学不动了，但是，身体还得诚实起来，接着学。。。

---

vue进阶之路

一、vue 3.0之钩子函数

setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（以后用到再讲，不好展现）。

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

二、Vue3.0 之路由传参

1.使用路由必须要引入 useRouter 和 useRoute

import {
    useRoute, useRouter } from 'vue-router'

2.传递参数和获取参数

承谁长谁先死,Router 长 所以他负责跳转,Route 负责接收数据

代码如下（示例）：

function useHooks() {
   
  const Router = useRouter() //跳转
  const Route = useRoute() //获取到值
  const Routeid = computed(() => {
   
    return Route.query.id
  })
  const gotourl = () => {
   
    console.log('执行了')
    Router.push({
   
      path: '/about',
      query: {
   
        id: '6666',
      },
    })
  }
  return {
   
    gotourl,
    Routeid,
  }
}

三、Vue3.0 之 vuex

Vue3.0 使用 vuex 必须用 useStore,发射数据用 commit

import {
    useStore } from 'vuex'
const store = useStore()
store.state.content
store.commit('changeContent', e.target.value)

举例：

<template>
  <div>
    <input type="text" v-model="InputContent" @change="changevalue" />
    <button @click