目录
1. createApp
2. emits 属性
- 子组件通过 emits 声明自定义事件名称，类似 props（如果子组件有根标签，可不写）
- 自定义事件名称最好是 onxxx
<!--父组件-->
<template>
<div>
<HelloWorld @onSayHello="sayHello" />
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
components: {
HelloWorld
},
methods: {
sayHello(info) {
console.log('sayHello', info)
}
}
}
</script>
<!--子组件-->
<!--1.没有根标签，必须定义 emits-->
<template>HelloWorld</template>
<!--2.有根标签可不定义 emits-->
<template>
<div>HelloWorld</div>
</template>
<script>
export default {
emits: ['onSayHello'],
setup(props, { emit }) {
emit('onSayHello', 'vue3')
}
}
</script>3. 生命周期
// setup 相当于 beforeCreate 和 created
setup() {
onBeforeMount(() => {
console.log('compositionAPI----onBeforeMount')
})
onMounted(() => {
console.log('compositionAPI----onMounted')
})
onBeforeUpdate(() => {
console.log('compositionAPI----onBeforeUpdate')
})
onUpdated(() => {
console.log('compositionAPI----onUpdated')
})
onBeforeUnmount(() => {
console.log('compositionAPI----onBeforeUnmount')
})
onUnmounted(() => {
console.log('compositionAPI----onUnmounted')
})
},4. 多事件
<template>
HelloWorld
<button @click="one($event), two($event)">多事件处理</button>
</template>
<script>
export default {
methods: {
one() {
console.log('one')
},
two() {
console.log('two')
}
}
}
</script>5. Fragment
- Vue2 组件模板内必须单一根节点
- Vue3 组件内可有多个节点
6. 移除 .sync
- 语法糖
- 父组件通过 props 向子组件传递数据
- 子组件通过 $emit 触发事件，改变父组件数据
// 父组件
<template>
<p>{
{ name }} -- {
{ age }}</p>
<UserInfo v-model:name="name" v-model:age="age" />
</template>
<script>
import { reactive, toRefs } from 'vue'
import UserInfo from './UserInfo.vue'
export default {
name: 'VModel',
components: { UserInfo },
setup () {
const state = reactive({
name: 'zhangsan',
age: '23'
})
return toRefs(state)
}
}
</script>
// 子组件
<template>
<input :value="name" @input="$emit('update:name', $event.target.value)" />
<input :value="age" @input="$emit('update:age', $event.target.value)" />
</template>
<script>
export default {
name: 'UserInfo',
props: {
name: String,
age: String
}
}
</script>
父组件向子组件
7. 异步组件的写法
defineAsyncComponent
8. 移除 filter
9. Teleport
把组件某些元素直接挂到其他dom元素上
10. Suspense
等待异步组件时渲染一些额外内容，让应用有更好的用户体验
#fallback 就是一个具名插槽
<Suspense>
<!-- 具有深层异步依赖的组件 -->
<Dashboard />
<!-- 在 #fallback 插槽中显示 “正在加载中” -->
<template #fallback>
Loading...
</template>
</Suspense>
11. Composition API
- reactive
- ref 相关
- readonly
- watch 和 watchEffect
- setup
- 生命周期钩子函数