Vue3升级了哪些重要的功能

createApp

javascript 复制代码
// vue2.x
const app = new Vue({ .... });

//vue3.x
const app = Vue.createApp({ ... });

emits属性

javascript 复制代码
// 父组件
`<HelloWorld :msg="msg" @sayHello="onSayHello" />
javascript 复制代码
export default {
	name: 'HelloWorld',
	props: {
		msg: String
	},
	emits: ['onSayHello'],
	setup(props, {.emit }) {
		emit('onSayHello', 'aaa');
	}
}

生命周期

javascript 复制代码
// 组合式api
setup() {
    onBeforeMount(() => {
        console.log('onBeforeMount')
    })
    onMounted(() => {
        console.log('onMounted')
    })
    onBeforeUpdate(() => {
        console.log('onBeforeUpdate')
    })
    onUpdated(() => {
        console.log('onUpdated')
    })
    onBeforeUnmount(() => {
        console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
        console.log('onUnmounted')
    })
    
    return {
        
    }
},

// 选项式api
beforeCreate() {
    console.log('beforeCreate')
 },
 created() {
     console.log('created')
 },
 beforeMount() {
     console.log('beforeMount')
 },
 mounted() {
     console.log('mounted')
 },
 beforeUpdate() {
     console.log('beforeUpdate')
 },
 updated() {
     console.log('updated')
 },
 beforeUnmount() {
     console.log('beforeUnmount')
 },
 unmounted() {
     console.log('unmounted')
 }

多事件

javascript 复制代码
// 在methods里定义 one two 两个函数
<button @click="one($event), two($event), ">
submit
</button>

Fragment

在vue2.x中必须有根节点,按vue3.x这种写法会直接报错。vue3.x中会自动创建fragment,类似react的<></>。

javascript 复制代码
// vue2.x
<template>
	<div class="blog-test">
		<p>test</p>
		<p>test</p>
	</div>
</template>

// vue3.x
<template>
	<p>test</p>
	<p>test</p>
</template>

移除.sync

javascript 复制代码
// vue2.x
<MyComponent v-bind:title.sync="title" />

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

异步组件的写法

javascript 复制代码
// vue2.x
components: {
    'my-component': () => import('./myComponent.vue')
},
// vue3.x
components: {
   'my-component': defineAsyncComponent(() => import('./my-component.vue'))
},

移除filter

javascript 复制代码
// vue2.x 

// 双花括号中
{{ message | filterProp }}
//v-bind中
<div v-bind:id="rawId | formateId" />

vue3.x中去除了该功能

Teleport

javascript 复制代码
<teleport to="body">
    <div style="width: 100vh; height: 100vh; background: #000; color: #fff">teleport</div>
</teleport>

Suspense

可以帮我控制显示和隐藏,在组件加载时显示fallback插槽内容。

javascript 复制代码
<Suspense>
 <template>
     <div>
         测试
     </div>
 </template>

 <!-- #fallback就是一个具名插槽。即suspense组件内部,有两个slot,其中一个具名为fallback -->
 <template #fallback>
     loading...
 </template>
</Suspense>

Composition API

  • reactive
  • ref相关
  • readonly
  • watch和watchEffect
  • setup
  • 生命周期钩子函数
相关推荐
蜚鸣7 小时前
Vue的快速入门
vue
吃饭最爱1 天前
⽹络请求Axios的概念和作用
vue
魂尾ac1 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐2 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞2 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52143 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦3 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君3 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手4 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO4 天前
分类别柱状图(Vue3)
typescript·vue·echarts