海南省建设银行官方网站招聘,营销的主要目的有哪些,南京网站制作服务商,凡客诚品官方商城文章目录 :tiger: 单组件的编写:rainbow:全新的 setup 函数:rocket: setup 的含义:rocket:setup 的参数使用:rocket: defineComponent 的作用 :rainbow: 组件的生命周期:rocket: 升级变化:rocket: 使用 3.x 的生命周期 :rainbow: 组件的基本写法:rocket: 回顾 Vue 2:rocket: 了… 文章目录 :tiger: 单组件的编写:rainbow:全新的 setup 函数:rocket: setup 的含义:rocket:setup 的参数使用:rocket: defineComponent 的作用 :rainbow: 组件的生命周期:rocket: 升级变化:rocket: 使用 3.x 的生命周期 :rainbow: 组件的基本写法:rocket: 回顾 Vue 2:rocket: 了解 Vue 3 单组件的编写
项目搭好了第一个需要了解的是 Vue 组件的变化由于这部分篇幅会非常大所以会分成很多个小节一部分一部分按照开发顺序来逐步了解。
因为 Vue 3 对 TypeScript 的支持真的是太完善了并且 TypeScript 的发展趋势和市场需求度越来越高所以接下来都将直接使用 TypeScript 进行编程。 对 TypeScript 不太熟悉的开发者建议先阅读 快速上手 TypeScript 一章有了一定的语言基础之后再一边写代码一边加深印象。 全新的 setup 函数
在开始编写 Vue 组件之前需要了解两个全新的前置知识点
全新的 setup 函数关系到组件的生命周期和渲染等问题写 TypeScript 组件离不开的 defineComponent API setup 的含义
Vue 3 的 Composition API 系列里推出了一个全新的 setup 函数它是一个组件选项在创建组件之前执行一旦 props 被解析并作为组合式 API 的入口点。
说的通俗一点就是在使用 Vue 3 生命周期的情况下整个组件相关的业务代码都可以放在 setup 里执行。
因为在 setup 之后其他的生命周期才会被启用。
基本语法
// 这是一个基于 TypeScript 的 Vue 组件
import { defineComponent } from vueexport default defineComponent({setup(props, context) {// 在这里声明数据或者编写函数并在这里执行它return {// 需要给 template / 用的数据或函数在这里 return 出去}},
})可以发现在这段代码里还导入了一个 defineComponent API 也是 Vue 3 带来的新功能下文的defineComponent 的作用 将介绍其用法。
在使用 setup 的情况下请牢记一点不能再用 this 来获取 Vue 实例也就是无法和 Vue 2 一样通过 this.foo 、 this.bar() 这样来获取实例上的数据或者执行实例上的方法。 在使用 setup 的情况下 , 不能再用 this 来获取 Vue 实例; 在使用 setup 的情况下 , 不能再用 this 来获取 Vue 实例’; 在使用 setup 的情况下 , 不能再用 this 来获取 Vue 实例; setup 的参数使用
setup 函数包含了两个入参
参数类型含义是否必传propsobject由父组件传递下来的数据否contextobject组件的执行上下文否
第一个参数 props
它是响应式的当父组件传入新的数据时它将被更新。 ⭐️ ⭐️⭐️ 请不要解构它这样会让数据失去响应性一旦父组件发生数据变化解构后的变量将无法同步更新为最新的值。 可以使用 Vue 3 全新的响应式 API toRef / toRefs 进行响应式数据转换下文将会介绍全新的响应式 API 的用法。 第二个参数 context
context 只是一个普通的对象它暴露三个组件的 Property
属性类型作用attrs非响应式对象未在 Props 里定义的属性都将变成 Attrsslots非响应式对象组件插槽用于接收父组件传递进来的模板内容emit方法触发父组件绑定下来的事件
因为 context 只是一个普通对象所以可以直接使用 ES6 解构。
平时使用可以通过直接传入 { emit } 即可用 emit(xxx) 来代替使用 context.emit(xxx)另外两个功能也是如此。
但是 attrs 和 slots 请保持 attrs.xxx、slots.xxx 的方式来使用其数据不要进行解构虽然这两个属性不是响应式对象但对应的数据会随组件本身的更新而更新。
两个参数的具体使用可查阅 组件之间的通信 一章详细了解。 defineComponent 的作用
defineComponent 是 Vue 3 推出的一个全新 API 可用于对 TypeScript 代码的类型推导帮助开发者简化掉很多编码过程中的类型声明。
比如原本需要这样才可以使用 setup 函数
import { Slots } from vue// 声明 props 和 return 的数据类型
interface Data {[key: string]: unknown
}// 声明 context 的类型
interface SetupContext {attrs: Dataslots: Slotsemit: (event: string, ...args: unknown[]) void
}// 使用的时候入参要加上声明 return 也要加上声明
export default {setup(props: Data, context: SetupContext): Data {// ...return {// ...}},
}每个组件都这样进行类型声明会非常繁琐如果使用了 defineComponent , 就可以省略这些类型声明
import { defineComponent } from vue
// 使用 defineComponent 包裹组件的内部逻辑
export default defineComponent({setup(props, context) {// ...return {// ...}},
})代码量瞬间大幅度减少只要是 Vue 本身的API , defineComponent 都可以自动推导其类型这样开发和在编写组件的过程中只需要维护自己定义的数据类型就可以了可专注于业务。 组件的生命周期
在了解了 Vue 3 组件的两个前置知识点后不着急写组件还需要先了解组件的生命周期这个知识点非常重要只有理解并记住组件的生命周期才能够灵活的把控好每一处代码的执行使程序的运行结果可以达到预期。 升级变化
从 Vue 2 升级到 Vue 3 在保留对 Vue 2 的生命周期支持的同时Vue 3 也带来了一定的调整。
Vue2 的生命周期写法名称是 Options API (选项式API) Vue3 的生命周期写法名称叫 Composition API (组合式API) 。
Vue 3 组件默认支持 Options API 而 Vue 2 可以通过 vue/composition-api 插件获得 Composition API 的功能支持其中 Vue 2.7 版本内置了该插件 2.6 及以下的版本需要单独安装。
为了减少理解成本笔者将从读者的使用习惯上使用 “ Vue 2 的生命周期” 代指 Options API 写法用 “ Vue 3 的生命周期” 代指 Composition API 写法。
关于 Vue 生命周期的变化可以从下表直观地了解
Vue 2 生命周期Vue 3 生命周期执行时间说明beforeCreatesetup组件创建前执行createdsetup组件创建后执行beforeMountonBeforeMount组件挂载到节点上之前执行mountedonMounted组件挂载完成后执行beforeUpdateonBeforeUpdate组件更新之前执行updatedonUpdated组件更新完成之后执行beforeDestroyonBeforeUnmount组件卸载之前执行destroyedonUnmounted组件卸载完成后执行errorCapturedonErrorCaptured当捕获一个来自子孙组件的异常时激活钩子函数
可以看到 Vue 2 生命周期里的 beforeCreate 和 created 在 Vue 3 里已被 setup 替代。
熟悉 Vue 2 的开发者应该都知道 Vue 有一个全局组件 KeepAlive / 用于在多个组件间动态切换时缓存被移除的组件实例当组件被包含在 KeepAlive / 组件里时会多出两个生命周期钩子函数
Vue 2 生命周期Vue 3 生命周期执行时间说明activatedonActivated被激活时执行deactivatedonDeactivated切换组件后原组件消失前执行 ⭐️ 虽然 Vue 3 依然支持 Vue 2 的生命周期但是不建议混搭使用前期可以继续使用 Vue 2 的生命周期作为过度阶段慢慢适应但还是建议尽快熟悉并完全使用 Vue 3 的生命周期编写组件。 使用 3.x 的生命周期
在 vue3 的 Composition API 写法里 每个生命周期函数都要先导入才可以使用并且所有的生命周期函数统一放在 setup 里面运行。
如果需要达到vue2 的 beforeCreate 和 created 生命周期的执行时机。 直接在 setup 里执行函数即可。
以下是几个生命周期的执行顺序对比
import { defineComponent, onBeforeMount, onMounted } from vueexport default defineComponent({setup() {console.log(1)onBeforeMount(() {console.log(2)})onMounted(() {console.log(3)})console.log(4)},
})最终将按照生命周期的顺序输出
// 1
// 4
// 2
// 3组件的基本写法
如果想在 Vue 2 里使用 TypeScript 编写组件需要通过 Options API 的 Vue.extend 语法或者是另外一种风格 Class Component 的语法声明组件其中为了更好的进行类型推导 Class Component 语法更受开发者欢迎。
但是 Class Component 语法和默认的组件语法相差较大带来了一定的学习成本对于平时编写 JavaScript 代码很少使用 Class 的开发者适应时间应该也会比较长。
因此 Vue 3 在保留对 Class Component 支持的同时推出了全新的 Function-based Component 更贴合 JavaScript 的函数式编程风格这也是接下来要讲解并贯穿全文使用的 Composition API 新写法。
Composition API 虽然也是一个变化比较大的改动但其组件结构并没有特别大的变化区别比较大的地方在于组件生命周期和响应式 API 的使用只要掌握了这些核心功能上手 Vue 3 非常容易
看到这里可能有开发者心里在想 “这几种组件写法加上视图部分又有 Template 和 TSX 的写法之分生命周期方面 Vue 3 对 Vue 2 的写法又保持了兼容在 Vue 里写 TypeScript 的组合方式一只手数不过来在入门时选择合适的编程风格就遇到了困难可怎么办” 不用担心笔者将九种常见的组合方式以表格的形式进行对比 Vue 3 组件最好的写法一目了然 回顾 Vue 2
下三种写法声明 TypeScript 组件
适用版本基本写法视图写法Vue 2Vue.extendTemplateVue 2Class ComponentTemplateVue 2Class ComponentTSX
使用 TypeScript 来声明三种不同的组件可以按照以下方式编写
使用 Vue.extend 和模板Template的基本写法
import Vue from vue;const MyComponent: Vue Vue.extend({template: div{{ message }}/div,data() {return {message: Hello, Vue!};}
});export default MyComponent;使用 Class Component 和模板Template的写法
为了更好地获得 TypeScript 类型推导支持通常使用 Class Component 的写法这是 Vue 官方推出的一个装饰器插件需要单独安装
import Vue from vue;
import Component from vue-class-component;// Component 修饰符注明了此类为一个 Vue 组件
Component({// 所有的组件选项都可以放在这里template: div{{ message }}/div
})// 使用 Class 声明一个组件
export default class MyComponent extends Vue {// 初始数据可以直接声明为实例的 propertymessage: string Hello, Vue!;// 组件方法也可以直接声明为实例的方法onClick(): void {window.alert(this.message)}
}使用 Class Component 和 TSX 的写法
import Vue, { VueConstructor } from vue;
import Component from vue-class-component;// Component 修饰符注明了此类为一个 Vue 组件
Component
export default class MyComponent extends Vue {message: string Hello, Vue!;render(h: VueConstructor[createElement]) {return div{this.message}/div;}
}可在 Vue 2 官网的 TypeScript 支持 一章了解更多配置说明。 了解 Vue 3
Vue 3 从设计初期就考虑了 TypeScript 的支持其中 defineComponent 这个 API 就是为了解决 Vue 2 对 TypeScript 类型推导不完善等问题而推出的。
在 Vue 3 至少有以下六种写法可以声明 TypeScript 组件
适用版本基本写法视图写法生命周期版本官方是否推荐Vue 3Class ComponentTemplateVue 2×Vue 3defineComponentTemplateVue 2×Vue 3defineComponentTemplateVue 3√Vue 3Class ComponentTSXVue 2×Vue 3defineComponentTSXVue 2×Vue 3defineComponentTSXVue 3√
其中 defineComponent Composition API Template 的组合是 Vue 官方最为推荐的组件声明方式本书接下来的内容都会以这种写法作为示范案例也推荐开发者在学习的过程中使用该组合进行入门。
下面看看如何使用 Composition API 编写一个最简单的 Hello World 组件
!-- Template 代码和 Vue 2 一样 --
templatep classmsg{{ msg }}/p
/template!-- Script 代码需要使用 Vue 3 的新写法--
script langts
// Vue 3 的 API 需要导入才能使用
import { defineComponent } from vue// 使用 defineComponent 包裹组件代码
// 即可获得完善的 TypeScript 类型推导支持
export default defineComponent({setup() {// 在 setup 方法里声明变量const msg Hello World!// 将需要在 template / 里使用的变量 return 出去return {msg,}},
})
/script!-- CSS 代码和 Vue 2 一样 --
style scoped
.msg {font-size: 14px;
}
/style可以看到 Vue 3 的组件也是 template / script / style / 的三段式组合上手非常简单。
其中 Template 沿用了 Vue 2 时期类似 HTML 风格的模板写法 Style 则是使用原生 CSS 语法或者 Less 等 CSS 预处理器编写。 ⭐️ 需要注意的是在 Vue 3 的 Composition API 写法里数据或函数如果需要在 template / 中使用就必须在 setup 里将其 return 出去而仅在 script / 里被调用的函数或变量不需要渲染到模板则无需 return 。
