文章已同步到微信公众号和个人博客：因卓诶
一个风和日丽的下午，我用了3个小时写了一个Vue3的小应用，这个应用小到不足为奇，但是Vue3的开发体验最值得我吹一波，这个小应用在登录我用了Vuex4，路由管理用到了最新的VueRouter4，而UI框架选择的是Vant3，有赞团队的Vant3最新版也是目前为止Vue3支持度最高的移动UI库，放一个项目预览GIF图
Github地址：
main.js
新版的vue一改以前的构造函数去挂载，而是把函数风格贯彻到底了，在入口文件中我们使用链式调用，一直use一直爽。
import { createApp } from "vue";import App from "./App.vue";import Router from "./router";import Vuex from "./store";import Vant from "vant";import "vant/lib/index.css";createApp(App).use(Router).use(Vant).use(Vuex).mount("#app");Router
import { createRouter, createWebHistory } from "vue-router";import Login from "../pages/Login/Index.vue";import Index from "../pages/Index/Index.vue";const routerHistory = createWebHistory();const Router = createRouter({ history: routerHistory, routes: [ { name: "Index", path: "/", component: Index }, { name: "Login", path: "/Login", component: Login } ]});export default Router;可以看到Router还是保留了vueRouter3的路由配置，但是创建路由的方式改为了createRouter，原先的路由模式也从原来的mode: "history"也改为了通过函数引入：
"history"：createWebHistory()"hash"：createWebHashHistory()"abstract"：createMemoryHistory()Vuex
import Vuex from "vuex";export default Vuex.createStore({ state: { user: null, planList: [] }, mutations: { // 删除一个计划 deletePlan(state, index) { state.planList.splice(index, 1); }, // 新增一个计划 addPlan(state, plan) { state.planList.push(plan); }, setUser(state, user) { state.user = user; } }, actions: {}, modules: {}});我们通过vuex4中的createStore创建了实例，其中我们定义了一些方法和state，这些我们在登录和添加删除计划时会用到，下来我们再看看如何在页面中使用Vue3的组合API以及路由和状态管理。
登录页面
import { reactive } from "vue";import { useRouter } from "vue-router";import { useStore } from "vuex";import { Toast } from "vant";export default { name: "App", setup() { const store = useStore(); const router = useRouter(); // 用户名和密码 const Form = reactive({ username: "", password: "", }); // 登录 function handelLogin() { store.commit("setUser", { username: Form.username, password: Form.password, }); Toast(`登录成功，你好: ${Form.username}, 请添加你的计划吧~`); // 跳转到首页 router.push({ path: "/", }); } return { Form, handelLogin, handelNavBack, }; }我们使用路由以及状态管理需要从2个包中引入对应的hook去调用
调用vuex中的mutation：
store.commit(fnName, args);路由也沿用了VueRouter3中一些老API，replace, go, back等方法都基本不变
const router = useRouter(); router.push({ path: "/", });如果从来没有使用过组合API的开发者，应该需要了解一下前置知识，例如在老版本中，我们定义变量和方法是这样：
data(){ return { count: 0 }},methods: { back(){ return "It is back" }}{{count}} //在template中这样渲染我们在vue3中需要把这些东西写到setup这个函数中，包括变量，函数，监听，计算属性，生命周期等等，然后把变量return出去供模板使用，很显然我们在登录时候用了reactive这个API，它可以传入一个普通对象，返回一个响应式的代理，我们用这个对象中的用户名和密码与视图绑定最后调用vuex的方法即可让全局状态管理知道此时 “计划APP” 是有身份进入的。
const Form = reactive({ username: "", password: "",});// 调用vuex登录方法store.commit("setUser", { username: Form.username, password: Form.password,});首页
import { ref, reactive, computed, watchEffect } from "vue";import { useStore } from "vuex";import { useRouter } from "vue-router";import { Toast, Dialog } from "vant";export default { name: "Index", setup() { const store = useStore(); const router = useRouter(); const planList = store.state.planList; const addPlanForm = reactive({ title: "", remark: "", }); // 添加的弹出层 const addPopup = ref(false); // 计算计划的个数 const planCount = computed(() => store.state.planList.length); // 如果没登录重定向到登录 if (store.state.user === null) { Toast("未登录，请先登录"); router.replace("Login"); } const handelNavBack = () => { router.go(-1); }; const handelAddPlan = (e) => { store.commit("addPlan", { ...e, id: Math.random().toString(36).substr(2), date: new Date().toDateString(), }); Toast("添加计划成功"); addPopup.value = false; addPlanForm.title = ""; addPlanForm.remark = ""; }; const handelDeletePlan = (index) => { Dialog.confirm({ title: "提示", message: "您缺点要删除此计划吗？", }).then(() => { store.commit("deletePlan", index); Toast("删除计划成功"); }); }; return { handelNavBack, planList, addPopup, addPlanForm, handelAddPlan, handelDeletePlan, planCount, }; },};引入了vuex和router的hook之后，我们导出了vuex和router的实例，从这个实例中我们可以获得到vuex中的state，则可以判断APP是否有登录用户，如果没有登录就重定向到登录页面。
const store = useStore();if (store.state.user === null) { Toast("未登录，请先登录"); router.replace("Login");}添加计划额外传递id和时间
store.commit("addPlan", { ...e, // Form表单的回调，是计划标题和计划备注 id: Math.random().toString(36).substr(2), date: new Date().toDateString(), });使用refAPI将传入的参数返回其响应式代理
// 控制弹窗显示/隐藏的变量const addPopup = ref(false);如果传入的是一个对象，那么Vue内部自动会调用reactive，值得注意的是如果需要更改此响应变量，需要对响应式对象中的value属性进行更改。
响应式变量在template渲染时我们不需要写.value
计划APP的全部代码都已经梳理完毕，我们可以在这个APP中学到，状态管理，路由，组合常用的API的简单应用，在组合API中还有一些我们以前经常用到的API，比如计算属性，生命周期，watch等等在组合API拓展阅读中有简单的总结。
组合API拓展阅读
- computed
计算属性在vue3中非常简单和vue2中如出一辙，在新版本中计算属性需要从vue引入：
import { computed } from "vue"setup(){ const planList = computed(() => state.list);}计算属性默认传入一个get函数，当然可以像以前一样传入一个set函数
const planList = computed({ get(){ return state.list }, set(list){ state.list = list }})planList.value = []; // 重新set值- watchEffect
这个Hook非常简单，如果使用过reactHook的useEffect应该非常好理解，如果这个函数所依赖的内容变化，它会重新执行这个函数。
const countEffect = watchEffect(() => { console.log(count); // 定义的响应式变量，如果该变量有变更，将会重新打印count});当组件卸载或者调用返回中的stop方法即可停止监听，这个机制和vue2中的watch是一样滴。
watchEffect我们称之为副作用函数，我们的业务场景中如果有好友列表，鼠标移动上去能异步获取好友详情，那么如果在鼠标在移动新好友之后，上一次好友详情的请求还没结束，这可能会造成数据混淆的Bug，所以我们副作用函数支持我们这样清除副作用：
watchEffect((onInvalidate) => { const detail = getFriendDetail(id.value) onInvalidate(() => { // id 改变时 或 停止侦听时 detail.cancel() // 取消请求 })})第一遍看文档时感觉这样清除副作用很麻烦，React是这样清除的：
useEffect(() => { // do something return () => { // 清除副作用 }})Vue设计副作用返回是通过传入一个回调注册清除函数，是因为使用effect钩子往往是异步请求，而异步请求返回的是Promise，所以清除函数一定要在被resolve之前注册，当然文档还说这样的好处还有可以自动帮助我们处理Promise潜在的错误（这个就是后话了嘻嘻）。
下面就是重头戏了，大胆预测一波，未来关于Vue3面试题必将有它的一席之地：watchEffect的刷新时机是什么？
第一次看文档就有猜测过这样傻白甜的问题，副作用监听了依赖它的变量，是如何很好的控制多个变量触发的机制呢，是每个变量触发都会快速的执行一次吗？
用户自定义的副作用函数会在全局缓存一遍会异步地刷新它们，Vue组件的更新函数也是一个副作用函数，刷新机制是在更新函数之后去一遍一遍走自定义的副作用函数
- watch
watch和Vue2一样，只不过和watchEffect的区别就是：
1. 仅在依赖数据源变化才会回调副作用函数
2. 可以访问到变化前和变化后的值
3. 可以自由设置哪些值是需要监听的
共同点就是:
1. 清除副作用和停止监听
2. 副作用刷新机制也是一样的哟
const star = ref(0);watch(star, (star, prevStar) => { // do something});// 监听多个watch([star, rose, flower], ([star, rose, flower], [prevstar, prevrose, prevflower]) => { // do something});结语
这段时间拖得太久，Vue系列还有一个Vite的浅析还没发，也基本差亿点就结束了，因为是国庆节写的，也希望大家多多支持呀，冲鸭！
