看完本文，你将有

Vue2 和 Vue3 中的生命周期钩子的工作方式非常相似，我们仍然可以访问相同的钩子，也希望将它们能用于相同的场景。

提示：为了大家CTRL + C方便，我文章中的所有代码全部为纯文本。如果你是前端童鞋，我还是建议你真正理解后，自己手动完成，而不是CTRL + C。

不废话，直入正题。我用的Windows系统，其它系统类似。首先，我们根据vite官网教程，在cmd窗口运行以下命令，创建一个vite + Vue3的基础项目。

前言

官网地址：https://staging-cn.vuejs.org/

vue最新版分为两个版本： Vue3.0（20年9月18日） Vue 3.2 （21年8月10日）

#Vue 3.2 +Vite+volar

Vue3.x 中文文档:https://v3.cn.vuejs.org/

Vue 2.x获取DOM

<div ref="myRef"></div>

this.$refs.myRef

介绍

Vue 是一套用于构建用户界面的渐进式框架

• Vue 3.x 官方文档 (cn.vuejs.org)
• Vue Router 4.x 官方文档 (router.vuejs.org)
• Vue 2 备忘清单

Vue 项目往往需要使用 vue-router 插件，刚开始入门 Uni-app + Vue3 项目的同学，会不会想着路由使用 vue-router V4 版本不就可以了吗？

不怕大家笑话，我就是这样想的，毕竟我是第一次使用 Uni-app ，由于孕期记性贼差，所以我决定写成笔记，加深记忆。

uni-app 页面路由为框架统一管理的，我们需要在 page.json 文件里配置每个页面路由以及页面样式，有些类似小程序中的 app.json 文件，所以 uni-app 的路由用法和写法与 vue-router 不同。

1. vue-router用过没，哪些常用的钩子函数

路由钩子的执行流程，钩子函数种类有：全局守卫、路由守卫、组件守卫。

我们在使用vue3之前，先来看看vue2中mounted，computed，watch等都是怎么用的，钩子函数、计算属性computed和监控器watch，是我们在vue2中必不可少的必学方法，我们来对比学习看在vue3中如何使用，会加深我们的印象。请看下面的代码：

Input输入框远程搜索

实现效果