抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

Mr.wang

Time flies and people come and go

博客

归档

vue3学习笔记

Mr.wang
vue

发布于：2020年9月20日
次浏览

vue3.0来了，他改变了什么？

vue3.0正式版发布(2020-09-18)

修改了什么？

v-is 函数像一个动态的 2.x :is 绑定——因此，要按注册名称渲染组件，其值应为 JavaScript 字符串文本：

来自组件的 data() 及其 mixin 或 extends 基类被合并时，现在将浅层次执行合并：(浅拷贝对象)

Attributes(2.x 和 3.x 行为的比较)

Attributes v-bind value 2.x v-bind value 3.x HTML 输出
2.x “枚举attribute” i.e. contenteditable, draggable and spellcheck. undefined, false undefined, null removed
true, 'true', '', 1, 'foo' true, 'true' "true"
null, 'false' false, 'false' "false"
其他非布尔attribute eg. aria-checked, tabindex, alt, etc. undefined, null, false undefined, null removed
'false' false, 'false' "false"

模板上的组件将支持多根组件(片段)

由于2.X在template只能有一个根节点（Dom元素），在3.X将会支持多个组件

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>
====================================
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>
1
2
将不会再有filters包括(全局/局部) 
可使用计算属性或者方法代替 {{ 数据 |filter方法 }}=>{{ 计算方法 }}

非兼容变更：functional attribute 在单文件组件 (SFC) ` 已被移除

非兼容变更：{ functional: true } 选项在通过函数创建组件已被移除

template设置key

1
2
3
4
5
6
7
8
9
<template v-for="item in list">
  <div :key="item.id">...</div>
  <span :key="item.id">...</span>
</template>
=======================================
<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

不再支持使用数字 (即键码) 作为 v-on 修饰符

kebab-cased (短横线) 命名

1
2
3
4
5
6
<!-- 键码版本 -->
<input v-on:keyup.13="submit" />
<!-- 别名版本 -->
<input v-on:keyup.enter="submit" />
<!-- Vue 3 在 v-on 上使用 按键修饰符 -->
<input v-on:keyup.delete="confirmDelete" />

过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from(过渡动画)

由于v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自定义元素的问题。

Vue 3 中，双向数据绑定的 API 已经标准化，减少了开发者在使用 v-model 指令时的混淆并且在使用 v-model 指令时可以更加灵活。

1
2
3
4
//在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 和 input 事件：
//v-model既v-bind和v-on两者结合的语法糖
<ChildComponent v-model="pageTitle" />
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

1
2
3
4
5
6
7
//此项为默认绑定的值modelValue，注意子组件定义时不要写错
<ChildComponent v-model="pageTitle" />
<!-- 简写: -->
<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

v-model参数可自定义

1
2
3
<ChildComponent v-model:title="pageTitle" />
<!-- 简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

多个v-model

1
2
3
4
5
6
7
8
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- 简写： -->
<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

两者作用于同一个元素上时，v-if 会拥有比 v-for 更高的优先级

v-bind 的绑定顺序会影响渲染结果

1
2
3
4
<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="red"></div>

自定义指令

API重命名

bind → beforeMount

inserted → mounted

beforeUpdate:新的！这是在元素本身更新之前调用的，很像组件生命周期钩子

update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated

componentUpdated → updated

**beforeUnmount ** 新的！与组件生命周期钩子类似，它将在卸载元素之前调用。

unbind -> unmounted

vue3.0中的不同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const num = ref(0);//普通类型的定义
const data = reactive({id:1});//复杂类型的定义
ref(18) = reactive({value:18})
/*
 *reactive内的参数必须为对象
 *ref于reactive都使用递归监听，每当深度调用时，可以监听到数据的变化
 *利用开放的api可以只操作引用地址的数据，而不触发watcher，即Dom更新
 *toRaw
 *shalloeRef(非递归监听)，可以改变监听的变量的value键触发
 *主动触发Dom更新triggerRef
 *ref->复制 修改响应数据不会影响旧的数据，相反toRef是引用
 *ref数据与界面一起改变 toRef不会
 *markRaw可指定某个对象不被追踪(监听)
 *toRefs可以指定对象的多个键生成Ref对象(键名一致)
 *customRef->参数(track,trigger)=(追踪，触发更新)
*/

setup()是同步执行的，不可以使用异步

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://wang-z.gitee.io/2020/09/20/vue-vue3%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/

本页文档最后更新于：2021年4月13日

javascript

vue

评论