1200字范文 > web前端面试高频考点——Vue3.x升级的重要功能（emits属性生命周期多事件 Fragme

web前端面试高频考点——Vue3.x升级的重要功能（emits属性生命周期多事件 Fragme

时间：2024-04-02 01:01:43

系列文章目录

文章目录

系列文章目录一、三连问（为什么）1、为什么需要用 ref ？2、为何需要 .value ？3、为什么需要 toRef 和 toRefs ？二、Vue3 升级了哪些重要的功能1、createApp2、emits 属性3、生命周期4、多事件5、Fragment 组件模板6、移除 .async7、异步组件的写法8、移除 filter9、Teleport10、Suspense11、Composition API

一、三连问（为什么）

1、为什么需要用 ref ？

返回值类型，会丢失响应式如在 setup、computed、合成函数，都有可能返回值类型Vue 如不定义 ref，用户将自造 ref，反而混乱

whyRef.vue 组件

值类型无处不在vue3 是通过 proxy 实现的响应式，但只对引用类型（数组，对象）有效为使得值类型也实现响应式，ref 便出现了

<template><p>why ref demo {{state.age }} - {{age1 }}</p></template><script>import {toRefs, reactive, computed } from "vue";function useFeatureX() {const state = reactive({x: 1,y: 2,});return toRefs(state);}export default {name: "whyRef",setup() {const {x, y } = useFeatureX();const state = reactive({age: 20,name: "杂货铺",});const age1 = computed(() => {return state.age + 1;});setTimeout(() => {console.log(x.value, y.value);state.age = 25;}, 1000);return {state,age1,};},};</script>

2、为何需要 .value ？

ref 是一个对象（不丢失响应式），value 存储值通过.value属性的 get 和 set 实现响应式用于模板、reactive 时，不需要.value，其他情况都需要

3、为什么需要 toRef 和 toRefs ？

初衷：不丢失响应式的情况下，把对象数据分散/扩展（解构）前提：针对的是响应式对象（reactive 封装的）非普通对象注意：不创造响应式，而是延续响应式

二、Vue3 升级了哪些重要的功能

1、createApp

vue2.x 对比 vue3.0

// vue2.xconst app = new Vue({...})// vue3const app = Vue.createApp({...})

vue2.x 使用对比 vue3.0

// vue2.xVue.use(...)Vue.mixin(...)ponent(...)Vue.directive(...)// vue3app.use(...)app.mixin(...)ponent(...)app.directive(...)

2、emits 属性

App.vue 父组件

父组件的子组件标签绑定 onSayHello 自定义事件info，是子给父要传递的参数注意绑定的时候必须是@onXxx的格式，更容易识别出是监听事件（规则）

<template><HelloWorld @onSayHello="sayHello" /></template><script>import HelloWorld from "./components/HelloWorld.vue";export default {methods: {sayHello(info) {console.log('hello', info);}},components: {HelloWorld },};</script>

HelloWorld.vue 子组件

setup里面传两个参数第一个参数 props，获取属性第二个参数是一个对象，对象解构之后是 emit 属性之后通过 emit 调用自定义事件，后面用来传参

<template><p>emits 的使用</p></template><script>export default {name: 'HelloWorld',emits: ['onSayHello'],setup(props, {emit }) {emit('onSayHello', 'vue3')}};</script>

3、生命周期

参照上一篇文章

4、多事件

在 methods 里定义 one two 两个函数

<button @click="one($event), two($event)">Submit</button>

5、Fragment 组件模板

vue2.x 组件模板：多个 html 标签必须包裹起来

<template><div><h3>Hello Vue3</h3><p>前端杂货铺</p></div></template>

vue3.x 组件模板：不需要包裹

<template><h3>Hello Vue3</h3><p>前端杂货铺</p></template>

6、移除 .async

async 可以实现父子组件数据之间的双向绑定，与 v-model 类似

在 Vue2 中一个组件上只能有一个 v-model，而 .sync 修饰符可以有很多个

// vue2.x<MyComponent v-bind:title.sync="title" />

// vue3.x<MyComponent v-model:tilte="title">

7、异步组件的写法

Vue2.x 写法

new Vue({components: {'my-component': () => import('./xxx.vue')}})

Vue 3.x 写法

import {createApp, defineAsyncComponent } from 'vue'createApp({components: {AsyncComponent: defineAsyncComponent(() => import('./components/AsyncComponent.vue'))}})

8、移除 filter

以下 filter 在vue3 中不可用

{{message | capitalize}}<div v-bind:id="rawId | formatId"></div>

9、Teleport

详细参考链接

是一种能够将我们的组件 html 结构移动到指定位置的技术data 中设置modalOpen: false

<button @click="modalOpen = true">打开全屏模式（使用 teleport）</button><teleport to="body"><div v-if="modalOpen" class="modal"><div>telePort 弹窗（父元素是 body）<button @click="modalOpen = false">关闭弹窗</button></div></div></teleport>

10、Suspense

详细参考链接

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

<Suspense><Test1 /> <template #fallback>Loading...</template></Suspense>