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
  • 生命周期钩子函数
相关推荐
百锦再2 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code2 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16882 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员2 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_2 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte3 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj12 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D12 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说12 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说13 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画