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
  • 生命周期钩子函数
相关推荐
killsime32 分钟前
uniapp前端开发,基于vue3,element plus组件库,以及axios通讯
elementui·uni-app·vue·axios
yun_shuo3 小时前
文件内容扫描工具
electron·node.js·vue
years_GG17 小时前
【Git多人开发与协作之团队的环境搭建】
spring boot·深度学习·vue·github·团队开发·个人开发
木子七1 天前
vue2-路由Router
前端·vue
zwm_yy1 天前
docker创建vue镜像
docker·vue
小阿鑫1 天前
最全ECharts 实战大全(速记版+资源)
vue·echarts
ygl61503731 天前
Vue3+SpringBoot3+Sa-Token+Redis+mysql8通用权限系统
java·spring boot·vue
三金121382 天前
VUE 的前置知识
vue
Cloud孙文波2 天前
个人开源项目 Smart 工单系统
golang·vue·开源软件·工单系统
白水4652 天前
基于官网的Vue-router安装(2024/11)
前端·vue.js·vue