开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情

不知道大家还记不记得vue的sologon:vue是一个渐进式Javascript框架，这里有一张经典老图，很完美的的诠释了这句话。

声明式渲染

在我之前学习的vue的各种模板语法，指令，甚至于reactive都属于最内圈，声明式渲染。其实所谓的声明式渲染就是使用类似于html的语法来表示app的样式外观，甚至jsx也是类似，只不过jsx是js语法罢了。

命令式渲染现在已经基本淘汰了，但其实js中也有命令式ui的影子,比如我们用纯js

const btn = ocument.createElement('button')
btn.style.color="#fff"
btn.onclick=()=>{}

如果我们也把布局通过这样书写，这就叫做命令式UI了，和这一比，声明式UI已经好的一批了。

组件系统

组件系统在我看来主要分2部分，一个是vue内部支不支持组件，组件的解析系统，组件的功能系统。在这方面vue3新增了Composition API,新增了Supsense(实验中)。同时对于vue2之前的功能也做了适配，同时去除了filters。

在我看来组件系统最大的改变来自于Composition API，我们需要转变之前的思路，在写一个功能，一个逻辑之前，先想一想如何最大化的封装，让代码变得更具有普适性。

客户端路由

毫无疑问，vue-router是我们的首选，它同时支持hash，history，也支持客户端或服务端。但要注意4.0的写法有些变化。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes:[]
})

同时在script setup中,也做了相应处理

import {useRouter} from 'vue-router
const router = useRouter()

可以说，vue-router也做了ESM化的处理，这样更贴合于vue3

状态管理

这个其实我并不不打算多说，因为我根据我最近写代码的思考，我觉得大部分人并不需要状态管理，我们已经几个页面，或者十几个页面，也叫大型应用？ 但是，我还是建议大家去看看pinia，这个库也就是vuex的继任者，vue3中你可以不适用vuex了，直接使用这个就好。

构建工具

构建工具其实才是vue3最大的变化，vue-cli将逐渐退出历史舞台，官方已经推荐使用vite了，以后可能不会有vite版的vue-cli了。

而vite，截至今天已经4.0.0，基本上可以用在生产了