Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
2301_76266857
unidocs-zh
提交
36583b8e
U
unidocs-zh
项目概览
2301_76266857
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
36583b8e
编写于
12月 15, 2021
作者:
F
fasttian
提交者:
Gitee
12月 15, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs/migration-to-vue3.md.
上级
c36294bf
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
97 addition
and
32 deletion
+97
-32
docs/migration-to-vue3.md
docs/migration-to-vue3.md
+97
-32
未找到文件。
docs/migration-to-vue3.md
浏览文件 @
36583b8e
...
...
@@ -59,7 +59,10 @@
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
/>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<title></title>
<!--preload-links-->
<!--app-context-->
...
...
@@ -118,9 +121,9 @@
> 而 Vue3 中,v-if 总是优先于 v-for 生效。以上写法将会在 Vue3 中与预期不符合,由于语法上存在歧义,建议避免在同一元素上同时使用两者([更多](https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html#%E6%A6%82%E8%A7%88))。
-
生命周期的适配
在
Vue3
中组件卸载的生命周期被重新命名
在
Vue3
中组件卸载的生命周期被重新命名
-
`destroyed`
修改为
`unmounted`
-
`beforeDestroy`
修改为
`beforeUnmount`
...
...
@@ -130,7 +133,6 @@
**强烈建议使用`emits`记录每个组件发出的所有事件。**
这一点特别重要,因为去除了
`.native`
修饰符。
`emits`
现在在未使用声明的事件的所有侦听器都将包含在组件的中
`$attrs`
,默认情况下,该侦听器将绑定到组件的根节点。
```
html
...
...
@@ -138,14 +140,14 @@
<button
@
click=
"onClick"
>
OK
</button>
</template>
<script>
export
default
{
emits
:
[
'
click
'
],
methods
:
{
onClick
()
{
this
.
$emit
(
'
click
'
,
'
OK
'
)
}
}
}
export
default
{
emits
:
[
"
click
"
],
methods
:
{
onClick
()
{
this
.
$emit
(
"
click
"
,
"
OK
"
);
},
},
};
</script>
```
...
...
@@ -161,37 +163,36 @@
props: {
// value:String,
// 替换 value 为 modelValue
modelValue:
String
}
}
modelValue:
String,
}
,
}
;
```
-
事件返回
将之前的
`this.$emit('input')`
修改为
`this.$emit('update:modelValue')`
,vue3 中将省略这一步骤
将之前的
`this.$emit('input')`
修改为
`this.$emit('update:modelValue')`
,vue3 中将省略这一步骤
自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:
```
html
<ChildComponent
v-model=
"pageTitle"
/>
<!-- 是以下的简写: -->
<ChildComponent
:modelValue=
"pageTitle"
@
update:modelValue=
"pageTitle = $event"
/>
```
<ChildComponent
v-model=
"pageTitle"
/>
<!-- 是以下的简写: -->
<ChildComponent
:modelValue=
"pageTitle"
@
update:modelValue=
"pageTitle = $event"
/>
```
若需要更改 model 名称,作为组件内 model 选项的替代,现在我们可以将一个 argument 传递给 v-model:
```
html
<ChildComponent
v-model:title=
"pageTitle"
/>
<!-- 是以下的简写: -->
<ChildComponent
:title=
"pageTitle"
@
update:title=
"pageTitle = $event"
/>
<ChildComponent
v-model:title=
"pageTitle"
/>
<!-- 是以下的简写: -->
<ChildComponent
:title=
"pageTitle"
@
update:title=
"pageTitle = $event"
/>
```
-
插槽的适配
...
...
@@ -218,4 +219,68 @@
</uni-nav-bar>
```
-
从 Vue 3.0 开始,过滤器已删除,不再支持,建议用方法调用或计算属性替换它们。
[
更多
](
https://v3.cn.vuejs.org/guide/migration/filters.html#%E6%A6%82%E8%A7%88
)
\ No newline at end of file
-
从 Vue 3.0 开始,过滤器已删除,不再支持,建议用方法调用或计算属性替换它们。
[
更多
](
https://v3.cn.vuejs.org/guide/migration/filters.html#%E6%A6%82%E8%A7%88
)
-
Vue3 的 API
`Promise 化`
调用结果处理与 Vue2 不同。
[
更多
](
https://uniapp.dcloud.io/api/README?id=api-promise-%e5%8c%96
)
-
Vue3 中,调用成功会进入 then 方法,调用失败会进入 catch 方法
-
Vue2 中,调用无论成功还是失败,都会进入 then 方法,返回数据的第一个参数是错误对象,第二个参数是返回数据
-
Vue 2 写法转 Vue 3 写法
```js
// 在 main.js 中写入以下代码即可
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
uni.addInterceptor({
returnValue(res) {
if (!isPromise(res)) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (res[0]) {
reject(res[0]);
} else {
resolve(res[1]);
}
});
});
},
});
```
-
Vue 3 写法转 Vue 2 写法
```js
// 在 main.js 中写入以下代码即可
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
uni.addInterceptor({
returnValue(res) {
if (!isPromise(res)) {
return res;
}
const returnValue = [undefined, undefined];
return res
.then((res) => {
returnValue[1] = res;
})
.catch((err) => {
returnValue[0] = err;
})
.then(() => returnValue);
},
});
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录