Vue 3 终于在 2020.9.18 发布了第一个正式版「One Piece」，到现在已经一周了。终于有时间来体验一把正式版的 Vue 3 是什么样子了。

这次，我不再使用 vite 来建立项目，而使用 vue-cli。

注意在选择 vue 版本的时候选择 vue3-preview

首先打开 App.vue，清理一下默认的模板，如下

注：除了这个文件使用 .vue 后缀之外，其他一律文件采用 tsx 编写。

在 src 目录新建一个 router.ts，写入如下代码

写法略微和 vue2-router 有点不同。

接下来来写一个视图(view)。新建一个目录views，新建home/index.tsx。

写如下代码。

执行yarn serve之后，应该会显示如下。

如果使用 vue 3 composition api 的写法，所有的数据操作都发生在 setup 函数。写法类似于 react hooks。

接下来我以调用 api 获取文章标题，渲染一个列表为例，填一填遇到的坑。

代码如下

api 的部分暂时忽略，返回为的 response 为一个 data 的数组。包括了 title 的字段。像上面的写法是可以达到预期效果的。

但是有几个达不到预期的写法，在这里也提一下。

首先是数据的更改的时候。

如果用了 reactive 包裹了 data，如：

那么，想要在获取数据之后改变 posts 中的值，貌似只能用 posts.push() 的方式，以下方式会失去响应式。

但是如果用 ref。那就可以这样写了。

注意，ref 需要通过 .value 获取被 proxy 的值。

个人认为，一般的对象可以用 reactive wrap，而 array 以及原始类型可以用 ref wrap。reactive 的好处是不用多写一个 .value。