Vue3升级了哪些重要的功能

createApp

// vue2.x
const app = new Vue({ .... });

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

emits属性

// 父组件
`<HelloWorld :msg="msg" @sayHello="onSayHello" />

export default {
	name: 'HelloWorld',
	props: {
		msg: String
	},
	emits: ['onSayHello'],
	setup(props, {.emit }) {
		emit('onSayHello', 'aaa');
	}
}

生命周期

// 组合式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')
 }

多事件

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

Fragment

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

// 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

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

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

异步组件的写法

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

移除filter

// vue2.x 

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

vue3.x中去除了该功能

Teleport

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

Suspense

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

<Suspense>
 <template>
     <div>
         测试
     </div>
 </template>

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

Composition API

• reactive
• ref相关
• readonly
• watch和watchEffect
• setup
• 生命周期钩子函数