Vue 3 迁移策略笔记
文章平均质量分 91
杰~JIE
WEB开发半桶水工程师,记录日常开发经历!如有技术问题,可私信!(注,需要互关注,不互关注只能发三条消息)
展开
-
Vue 3 迁移策略笔记—— 序言
《Vue 3 教程》全面细致的介绍了 Vue 3.x。因为 Vue 3.x 是 Vue 2.x 的迭代,所以其中也涵盖了大量 Vue 2.x 已有的知识。因此,如果你之前完全没接触过 Vue,同样可以直接学习 Vue 3.x。《v3 迁移指南》详细列举了 Vue 2.x 和 Vue 3.x 的不同点,同时为我们提供如何将 Vue 2.x 的代码转为 Vue 3.x 的指南。原创 2021-01-27 15:30:29 · 546 阅读 · 1 评论 -
Vue 3 迁移策略笔记—— 第31节:scoped styles 的变化
前言本笔记主要基于官方文档《0023-scoped-styles-changes.md》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。一个改变: 深度选择器在Vue3.中,Vue 2.x 的深度选择器 >>>、/deep/已经被弃用了。::v-deep 作为组合器的写法同样被弃用。<style scoped>/* 以下三种写法被弃用 */.a >>> .b {原创 2021-04-25 16:24:51 · 863 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第30节:新增功能——Teleport
前言本笔记主要基于官方文档《Vue 3 教程-Teleort》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。什么是 Teleport ?Teleport 是 Vue 3.x 新增自定义元素,借助 Teleport 可以控制 Teleport 内部的内容挂载到具体的元素中。场景模拟我们先看这样的一个场景在一个多层嵌套的组件中,我们构建了一个模态框。我们想要这个模态框相对于最顶层的元素显示,该怎么做呢?原创 2021-04-18 16:52:12 · 460 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第1节:v-for 中的 Ref 数组
前言本笔记主要基于官方文档《迁移策略—— v-for 中的 Ref 数组》汇总而来。Vue 2.x v-for 中的 Ref 数组的问题在 Vue 2 中,在 v-for 语句中使用ref属性时,会生成refs数组插入$refs属性中。如下:<div v-for="item in 5" :key="item" :ref="item"> {{ item }}</div>$refs的结果如下:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(原创 2021-01-27 15:32:11 · 7036 阅读 · 1 评论 -
Vue 3 迁移策略笔记—— 第2节:Async Components 异步组件
前言本笔记主要基于官方文档《迁移策略——异步组件》汇总而来。如有理解出入,请以官方文档为主。知识储备:异步组件概述Vue 3.x 中,对异步组件的使用跟 Vue 2.x 不同了。变化主要有三点:异步组件声明方法的改变:Vue 3.x 新增一个辅助函数defineAsyncComponent,用来显示声明异步组件;异步组件高级声明方法中的 component 选项更名为loader;loader绑定的组件加载函数不再接收resolve和reject参数,而且必须返回一个Promise原创 2021-01-27 15:32:41 · 7923 阅读 · 2 评论 -
Vue 3 迁移策略笔记—— 第3节:Attribute Coercion Behavior (属性强制行为)
前言本笔记主要基于官方文档《迁移策略——attribute 强制行为》汇总而来。如有理解出入,请以官方文档为主。知识储备:HTML 属性内容属性与IDL属性的区别布尔属性与枚举属性的区别如果对上面知识点不了解,可先查看一下文章做初步了解:《IDL 属性与内容属性、布尔值属性与枚举属性傻傻分不清楚?》《MDN: Web 开发技术>HTML(超文本标记语言)>HTML 属性参考》当然,本笔记做了初步说明。概述删除枚举属性的内部概念,并将枚举属性视为普通的非布尔属原创 2021-01-27 15:40:14 · 2665 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第4节:$attrs 包括class&style
前言本笔记主要基于官方文档《迁移策略——$attrs包括class&style》汇总而来。如有理解出入,请以官方文档为主。概述Vue 3.x 中, $attrs将包含传递给组件的所有属性,包括class和styleVue 2.x 的$attrs在 Vue 2.x 中,关于父组件使用子组件有这样一个原则:默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件原创 2021-01-27 15:40:05 · 5061 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第5节:移除 $children
前言本笔记主要基于官方文档《[迁移策略——移除 $children》汇总而来。如有理解出入,请以官方文档为主。概述在 Vue 3.x 中,将移除且不再支持 $children 。Vue 2.x 中的 $children官方描述:vm.$children类型:Array<Vue instance>只读详细:当前实例的直接子组件。**需要注意 $children 并不保证顺序,也不是响应式的。**如果你发现自己正在尝试使用 $children 来进行数据绑定,考原创 2021-01-27 15:39:58 · 4347 阅读 · 2 评论 -
Vue 3 迁移策略笔记—— 第6节:自定义指令
前言本笔记主要基于官方文档《迁移策略——自定义指令》汇总而来。如有理解出入,请以官方文档为主。概述为了更好的与组件生命周期保持一致,Vue 3.x 对自定义指令的钩子函数进行了重命名。Vue 2.x 自定义指令的声明周期bind——指令绑定到元素时触发,只触发一次;inserted——绑定元素被插入父DOM时触发update——当元素更新而子元素还没有更新时触发;componentUpdated——组件和子组件更新完成后触发;unbind——接触绑定时触发,只触发一次;Vue 3原创 2021-01-27 15:39:51 · 2641 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第7节:自定义元素交互
前言本笔记主要基于官方文档《迁移策略—— 自定义元素交互》汇总而来。如有理解出入,请以官方文档为主。概述自定义元素(Vue 之外)白名单变为在模板编译期间执行;而且白名单应该通过编译器option配置而不是通过运行时的config来配置;Vue 2.x is 的用法,现只在 Vue 保留标签component中有效。新增v-is来实现在普通的 HTML 元素渲染组件添加 Vue 外的自定义元素如果我们想要将 Vue 外部定义的自定义元素(例如使用 Web 组件 API)添加到 Vue原创 2021-01-27 15:39:44 · 3686 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第8节:Data 选项
前言本笔记主要基于官方文档《迁移策略—— Data 选项》汇总而来。如有理解出入,请以官方文档为主。概述data选项的不再接受 JS 对象,只接受函数形式的声明。当合并来自 mixin 或 extend 的多个 data 返回值时,data现在变为浅拷贝形式(只合并根级属性)。Vue 2.x data Option 的声明在 Vue 2.x ,声明data有两种方式:对象形式(常用于 Vue 根实例)const app = new Vue({ data: { ap原创 2021-01-27 15:39:38 · 2421 阅读 · 1 评论 -
Vue 3 迁移策略笔记—— 第9节:新增 emits 选项
前言本笔记主要基于官方文档《迁移策略—— emits 选项》汇总而来。如有理解出入,请以官方文档为主。概述Vue 3.x 新增了一个emits 组件选项,用来定义组件可以向父组件 emit 的事件。其类似于 props。Vue 2.x 的 emit在 Vue 2.x , 我们可以定义组件接收的props,但是我们不能声明组件可以emit哪些event。<template> <div> <p>{{ text }}</p> &l原创 2021-01-27 15:39:24 · 3025 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第10节:事件 API
前言本笔记主要基于官方文档《迁移策略—— 事件 API》汇总而来。如有理解出入,请以官方文档为主。知识储备4个事件 API:Vue 3.x 的 emitsOption概述Vue 3.x 移除了$on、$off和$once这三个事件相关的API。在 Vue 3.x 中,不再支持事件发射器接口(the event emitter interface).Vue 2.x 的四个 Events APIVue 2.x 可以通过 event emitter(事件发射器) api 强制附加事件触发原创 2021-01-27 15:39:18 · 2512 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第11节:移除过滤器
前言本笔记主要基于官方文档《迁移策略—— 过滤器》汇总而来。如有理解出入,请以官方文档为主。概述Vue 3.x 将移除且不再支持 filters。Vue 2.x 的 filters在 Vue 2.x 中,我们可以借助filters来处理通用文本格式。如下:<template> <h1>Bank Account Balance</h1> <p>{{ accountBalance | currencyUSD }}</p>&l原创 2021-01-27 15:39:12 · 2413 阅读 · 1 评论 -
Vue 3 迁移策略笔记—— 第12节:片段
前言本笔记主要基于官方文档《迁移策略—— 片段》汇总而来。如有理解出入,请以官方文档为主。概述Vue 3.x 支持组件内多个根节点,也就是片段!Vue 2.x 组件写法在 Vue 2.x,组件不支持多根节点。所以,组件的写法只能如下:<template> <div> <header>...</header> <main>...</main> <footer>...</foot原创 2021-01-27 15:39:06 · 2092 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第13节:函数式组件
前言本笔记主要基于官方文档《迁移策略—— 函数式组件》汇总而来。如有理解出入,请以官方文档为主。知识储备渲染函数 & JSX函数式组件概述Vue 3.x 对有状态组件的性能进行了提升,与函数式组件的性能相差无几。所以,建议只使用有状态组件。函数式组件的介绍 函数式组件是一种比较简单,没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法的组件(与之相反的是有 stateful components状态组件)。实际上,它只是一个接受一些 prop 的函数。在原创 2021-01-27 15:38:41 · 3092 阅读 · 4 评论 -
Vue 3 迁移策略笔记—— 第14节:全局 API
前言本笔记主要基于官方文档《迁移策略—— 全局 API》汇总而来。如有理解出入,请以官方文档为主。概述新增一个新的 API createApp,调用其返回一个 app 实例。createApp返回的实例之间相互独立。Vue 2.x 全局 api 的举例Vue 2.x 拥有许多 全局 api 和 全局配置。在全局范围内,这些 API 和配置改变了 Vue 的行为。例如,创建一个全局组件:Vue.component('button-counter', { data: () =>原创 2021-01-27 15:38:53 · 2698 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第15节:全局 API 的 tree shaking
前言本笔记主要基于官方文档《迁移策略—— 全局 API Treeshaking》汇总而来。如有理解出入,请以官方文档为主。概述Vue 3.x 对 部分全局 API 实现了 tree shacking 功能。知识储备:什么是 tree shaking?tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。这个术语和概念实际上是兴起于 ES2原创 2021-01-27 15:38:35 · 2306 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第16节:Inline Template 属性
前言本笔记主要基于官方文档《迁移策略—— Inline Template 属性》汇总而来。如有理解出入,请以官方文档为主。概述Vue 3.x 不在支持inline-template属性。什么是 Inline Template?当 inline-template 这个特殊的 attribute 出现在一个子组件上时,这个组件将会使用其里面的内容作为模板,而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。不过,inline-template 会让模板的作用域变得更加难以理解。所以作为最原创 2021-01-27 15:38:28 · 3117 阅读 · 1 评论 -
Vue 3 迁移策略笔记—— 第17节:Key 属性
前言本笔记主要基于官方文档《迁移策略—— key attribute》汇总而来。如有理解出入,请以官方文档为主。概述Vue 3.x 给 v-if/v-else/v-else-if 分支添加 key 属性不再是必须的了。因为在 Vue 3.x 中,Vue 会自动生成唯一 key。对 <template v-for> 的 key 应该添加到 <template> 标签中,而不是放在其子标签中。Key 属性的介绍key 属性主要用在 Vue 的虚拟 DOM 算法,在新原创 2021-01-27 15:38:19 · 2484 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第18节:按键修饰符
前言本笔记主要基于官方文档《迁移策略—— 按键修饰符》汇总而来。如有理解出入,请以官方文档为主。知识储备弃用 KeyboardEvent.keyCode概述不再支持使用 keyCodes (即键码) 作为 v-on 修饰符;不再支持 config.keyCodes;Vue 2.x 中的 keyCodes 修饰符在 Vue 2.x 中,允许使用 keyCodes 作为v-on 的修饰符:<!-- keyCode version --><input v-on:k原创 2021-01-27 15:38:09 · 2797 阅读 · 3 评论 -
Vue 3 迁移策略笔记—— 第19节:移除 $listeners
前言本笔记主要基于官方文档《迁移策略—— 移除$listeners》汇总而来。如有理解出入,请以官方文档为主。概述Vue 3.x 已经弃用$listeners 对象。而是将事件监听器并入$attrs ,作为attrs 的一部分。$listeners 简介vm.$listeners2.4.0 新增类型:{ [key: string]: Function | Array<Function> }只读详细:包含了父作用域中的 (不含 .native 修饰器的)原创 2021-01-27 15:37:57 · 7906 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第20节:Props 的默认值函数不能访问this
前言本笔记主要基于官方文档《迁移策略—— Props 的默认值函数不能访问this》汇总而来。如有理解出入,请以官方文档为主知识储备provide / injectProps 默认值的工厂函数不再具有访问this的权限。取而代之的是:组件接收到的原始props将作为参数传递给默认值的函数inject 可以在默认函数内部使用import { inject } from 'vue'export default { props: { theme: { def原创 2021-01-27 15:37:48 · 3072 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第21节:渲染函数 API
前言本笔记主要基于官方文档《迁移策略——渲染函数 API》编写。如有理解出入,请以官方文档为主。知识储备:《渲染函数 & JSX》《组合式 API》概述渲染函数的变动不会影响到使用<template> 编写的组件。本次更改概括如下:h现在全局导入,而不是作为参数传递给渲染函数在有状态组件和功能组件之间更一致的呈现函数参数vnode 现在有一个扁平的 prop 结构render 函数参数在 Vue 2.x ,render 函数自动接收 h 函数(它是 c原创 2021-01-27 15:37:33 · 2224 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第22节:Slots 的统一
前言本笔记主要基于官方文档《迁移策略—— Slot 统一》汇总而来。如有理解出入,请以官方文档为主。知识储备如果你并不属性 Vue 的渲染函数,需先了解一下知识:《渲染函数 & JSX——基础》《渲染函数&JSX——createElement 参数》《vm.$slots》《this.$scopedSlots 》概述Vue 3.x 统一了$slots 和 $scopedSlots:this.$slots 作为函数对位暴露移除 this.$scopedSlots原创 2021-01-27 15:37:24 · 4633 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第23节:Transition Class 的变化
前言本笔记主要基于官方文档《迁移策略——过渡的 class 名更改》汇总而来。如有理解出入,请以官方文档为主。概述过渡类名的改变:v-enter重命名为v-enter-fromv-leave重命名为v-leave-fromVue 2.x 的过渡类在进入/离开的过渡中,会有 6 个 class 切换。v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素原创 2021-01-27 15:37:14 · 2420 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第24节:Transition Group 不再需要设置根元素
前言本笔记主要基于官方文档《迁移策略——Transition Group 根元素》汇总而来。如有理解出入,请以官方文档为主。概述<transition-group> 不再默认渲染根元素,但仍可以使用 tag prop创建一个根元素。Vue 2.x 的<transition-group>Vue 2.x <transition-group> 跟自定义组件一样,需要一个根元素。我们可以通过tag prop 来进行手动设定。如果我们不进行手动的设定,Vue 会默认原创 2021-01-27 15:36:58 · 843 阅读 · 0 评论 -
Vue 3 迁移策略笔记—— 第25节:v-on.native修饰符被移除
前言本笔记主要基于官方文档《迁移策略—— 移除v-on.native修饰符》汇总而来。如有理解出入,请以官方文档为主。知识储备将原生事件绑定到组件emitsOption概述在 Vue 3.x v-on 的 .native 修饰符将被移除。Vue 2.x 的 .native 修饰符在 Vue 2.x,如果想要在一个组件的根元素上直接监听一个原生事件,需要使用v-on 的 .native 修饰符。<base-input v-on:focus.native="onFocus">原创 2021-01-27 15:36:46 · 19145 阅读 · 6 评论 -
Vue 3 迁移策略笔记—— 第26节:在组件上使用 v-model 的变化
前言本笔记主要基于官方文档《迁移策略—— v-model》汇总而来。如有理解出入,请以官方文档为主。知识储备:在阅读本文前,您最好熟知一下知识:自定义组件的 v-model.sync 修饰符概述v-model 的 prop 和 event重命名:prop: value -> modelValue;event: input -> update:modelValue;v-bind.sync和model选项被移除同一组件实现添加多v-modelv-model 可原创 2021-01-27 15:35:16 · 926 阅读 · 1 评论 -
Vue 3 迁移策略笔记—— 第27节:v-if 和 v-for 的优先级
本笔记主要基于官方文档《迁移策略——v-if 与 v-for 的优先级对比》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。在 Vue 3.x,如果在一个元素上同时使用v-for和v-if,v-if的优先级高于v-for。原创 2021-01-27 15:35:01 · 1042 阅读 · 2 评论 -
Vue 3 迁移策略笔记—— 第28节:v-bind 合并行为
前言本笔记主要基于官方文档《迁移策略——v-bind 合并行为》编写。如有理解出入,请以官方文档为主。知识储备:《Vue api —— v-bind 》概述Vue 3.x 中,v-bind=“object” 的绑定顺序会影响渲染结果。Vue 2.x 的 v-bind 合并行为在 Vue 2.x,如果一个元素同时定义了 v-bind="object" 和一个相同的单独的 property (属性),那么这个单独的 property 总是会覆盖 object 中的绑定。如下:<tem原创 2021-01-27 15:33:38 · 1489 阅读 · 2 评论 -
Vue 3 迁移策略笔记—— 第29节:数组的监听
前言本笔记主要基于官方文档《迁移策略——Watch on Arrays》汇总而来。如有理解出入,请以官方文档为主。知识储备:《Vue api —— vm.$watch》概述当侦听一个数组时,只有当数组被替换时才会触发回调。如果你需要在数组改变时触发回调,必须指定 deep 选项。Vue 3.x 用法展示在 Vue 3.x 当我们监听一个数组时,只有在数组被整体替换时才会触发回调。也就是说,如果我们只对数组进行增删改查操作时,是不会被 Vue 捕捉到的。如果想要在数组在发生改变时被 Vue原创 2021-01-27 15:33:29 · 1812 阅读 · 0 评论