这篇文章上次修改于 5 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
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
未待完续

亲亲留个评论再走呗

正在加载评论区...