这篇文章上次修改于 2 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。
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
。未待完续
文章标题:
文章作者:
文章链接: [复制]
最后修改时间:
商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,未经站长允许不得对文章文字内容进行修改演绎。
本文采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
亲亲留个评论再走呗
正在加载评论区...