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
  • 生命周期钩子函数
相关推荐
Yaml47 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf10 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班
ZSK63 天前
【uniapp3】分享一个自己写的h5日历组件
vue·uniapp