入门

前序

自从工作之后就一直用React，从class到function，但一直都对vue情有独钟，vue3已经出现了一段日子了，已经有前人进行了踩bug，所以来吧，开始我们的vue3！

git项目地址：gitee.com/wongest/vue…

脚手架

vue有官方的脚手架vue-cli，现在的版本已经到4.5了，首先确保你安装vue-cli，好开始：

执行命令vue create project-name 然后就出现下面的选项：

直接选第二项，cli会自动下载依赖，然后我们进入project-name目录，这样vue3的脚手架就安装好了。

配置

上面安装脚手架的步骤与cli3.0并没有什么不同，接下来开始探索了：

vue-router

按照以前2.0的思想，肯定是先npm i vue-router --save下载vue-router依赖，然后创建一个router文件配置一下router:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@components/Home.vue'

Vue.use(Router)

export default new Router({
router: [
    ...
    ]
})

再修改一下main.js文件：

const app = new Vue({
    ...App,
    router
})
app.$mount()

然后问题来了，main.js里并没有Vue这个这个东西，取而代之的是：

createApp(App).mount('#app')

那我就改成createApp(App).use(router).mount('#app')，Ctrl + s运行，object is：not function。看了vue3改了，去看看vue的官方文档，发现安装插件可以同命令vue add，那好办，直接运行vue add vue-router，好家伙直接404，看了这样也不行，那去看vue-router的官方文档吧，原来使用vue add是对的，只不过是用vue add router，按回车，系统一顿操作，就安装好了，连页面也配置好。好这就去看代码，router.js文件的结构变成这样了:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

连路由都默认history路由了，让url看起来好看了好多有木有。如果你想用hash路由，可以用createWebHashHistory，其中process.env.BASE_URL就应该设置为默认值是"/"，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，而如果你的单页应用服务在/app/下，那么你的BASE_URL就应该设置为/app/。

vuex

这里就不进行那么多套路了，直接上代码：

store.js

import { createStore } from 'vuex'
import mine from '../pages/mine/store'

export default createStore({
  state: {
    id: 666
  },
  mutations: {
    setId(state, payload) {
      state.id = state.id + payload.count;
    },
  },
  actions: {
  },
  modules: {
    mine
  }
})

可以看到以前的Vue.use(Vuex)取消了，取而代之的是createStore

mine/index.vue

<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "Mine",
  setup() {
    const store = useStore();
    const count = computed(() => store.state.mine.count);
    const id = computed(() => store.state.id);
    return {
      count,
      id,
      handleAdd: () => {
        store.commit("setId", { count: 8 });
        store.dispatch("mine/setCount", { count: 8 });
      },
    };
  },
};
</script>

这里可以看到一个新的生命周期函数setup（下面详细介绍），并且不再采用以前的this.$store（当然你也可以继续用），但既然是vue3，那我们当然是用新的方法啦，vuex会暴露一个useStore，我们通过它创建一个实例store，然后就可以像以前一样使用state、commit、dispatch。

生命周期函数

vue3取消了beforeCreate和created，使用setup在beforeCreate和created之前执行。创建的是data和method。

setup：组件创建前执行，可以进行数据定义与初始化和方法的定义；并且其他生命周期函数也是在这个setup函数里面；
onBeforeMount（beforeMount）
onMounted（mounted）一般在页面初始化完之后，对dom进行操作；
onBeforeUpdate
onUpdated
onBeforeUnmount 组件卸载之前执行的函数;
onUnmounted 组件卸载完成后执行的函数；
onActivated 被包含在中的组件（相当于components中的组件），被激活时执行；
onDeactivated 比如从 A组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured 当捕获一个来自子孙组件的异常时激活钩子函数。

setup

什么是setup？前面说了setup是一个生命周期函数，并且是个特别的生命周期函数，相当于在react hook中 const widget = () => {}（当然只是类比，两个是完全不同的东西），vue3不再有methods，方法都在setup中定义

数据

vue3之前定义数据全都在data()中，vue3提供了几种数据类型：

ref 定义基本数据类型的变量，在setup读取和修改是用 .value；
reactive 定义复杂数据如数据、JSON等；
readOnly 传入普通数值或字符串或者是reactive，不能改变只读；
shallowReadonly 浅响应，浅层只读，深层可修改

初识Vue3.0

入门

前序

脚手架

配置

vue-router

vuex

生命周期函数

setup

数据