第五十二期：对Vue3.0的一些理解

2022年的第一篇文章，也不知道写点什么。近期闲下来之后，大部分时间在看Vue的一些源码，对其中的一些技术点有了一些新的心得，包括它具体能够解决的一些问题以及一些编程的思想。

渐进式框架

对渐进式框架的理解，文档上说Vue是一个渐进式的框架，但是到底什么是渐进式框架呢？我们可以这样理解，项目前期的需求非常简单，我们只需要写几个界面或者做个表单提交数据，那么我们可以直接用Vue的核心框架做完成这些工作，随着项目的不断发展，业务变得复杂起来，我们有可能会用到路由相关的库Vue-router，或者使用状态管理Vuex进行管理，或者我们又可能需要拆分出来一些基础组件，又或者我们需要在一个老旧的系统里嵌入新的功能，随着项目的发展，我们可以自由的去选择组合我们需要的插件，或者技术方案。并且这些插件使得项目的结构变得非常清晰，可维护性也有所提升。大体上渐进式框架就是这么一个逻辑。

当然，标准的渐进式框架的核心是将框架分层。对于Vue来说

最核心的部分是视图层渲染，然后是组件机制，然后基于组件有了路由机制，然后加入状态管理，最外层则是构建工具。

元编程

百科出来的概念如下：

元编程（Metaprogramming）是指某类计算机程序的编写，这类计算机程序编写或者操纵其他程序（或者自身）作为它们的数据，或者在运行时完成部分本应在编译时完成的工作。很多情况下与手工编写全部代码相比工作效率更高。编写元程序的语言称之为元语言，被操作的语言称之为目标语言。一门语言同时也是自身的元语言的能力称之为反射。

简而言之，其实就是框架的作者使用一种编程语言固有的语法特性，创造出相对新的语言特性，使得开发者可以使用新的语法进行开发，从而提升开发效率以及体验。

而Vue以及React框架本身就是一种元编程的一种很好的表现。

Vue3.0的核心变化

近期也找时间看了看Vue3.0的文档，相对于2.x来说，改动点非常多，但是总体看来，感觉有三个比较大的变化。

其一是，响应式的实现由Object.defineProperty()变成了Proxy()。之所以用proxy，其实还是因为技术发展的缘故。Object.defineProperty()的实现虽然很好，但是一直存在的问题就是它只能监听对象属性的修改，无法监听对象属性的新增和删除，而对于监听数组来说，实现的方式其实是一个曲线救国的思路，将原声的数组方法进行了重写。同时，为了弥补这些不足，在全局Api中才有了set和del。

有了proxy之后，它可以直接代理对象和数组，无需去递归遍历对象以及数组，便直接可以进行属性的拦截，同时也可以很好的支持对象的新增和删除，少了递归的过程，我们可以理解为对性能的提升有一定的帮助。

其二是，组合式API的概念，setup。组合式API解决的问题实际上还是关注点分离，或者说解耦。文档上的例子以一个列表数据请求作为demo。并且使用新的api ref进行响应式的数据设置。ref其实可以理解为react中的useState,当然setup内部也支持生命周期的注册。

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted } from 'vue'

// 在我们的组件中
setup (props) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }

  onMounted(getUserRepositories) // 在 `mounted` 时调用 `getUserRepositories`

  return {
    repositories,
    getUserRepositories
  }
}

第三个是，以往的项目当中，我们往往采用new Vue(options)的方式去创建一个新的应用。而3.0版本提供了一个createApp()来创建应用的实例。

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

最后，和2.x版本不同的是，3.0的源码全部采用了ts进行重构，如果对vue源码不熟悉的，或者对ts不熟悉的读起来可能需要花费更多的时间。

而从这些变化来看，Vue的语法似乎跟React更加接近，比如说新增的一个Teleport。