vue3笔记

1.toRefs可以把对象变成响应式对象

2.生命周期

vue2里面的beforeDestory --> beforeUnmount

​ destoryed --> unmounted

3.侦测变化-watch

watch()第一个参数是要检测变化的值，可以是数组形式同时检测多个

如果想要检测对象中的某一个属性，参数可以写成函数

watch([()=>data.count],()=>{})

可以把公共逻辑放到一个hooks文件夹下面，建立对应的ts文件

与mixin相比，很清楚数据的来源、可以设置别名

4.defineComponent

对setup函数进行封装，返回options对象

defineComponent最重要的是，在TypeScript下，给予组件正确的参数类型推断

setup(props, context) {}

这个context上面提供了三个常用的属性（vue2中挂载在this上面的）attrs、slots、emit

5.Teleport

传送组件

如果一个弹窗组件在深层的子组件中又想在最外层居中，样式不好处理

比如在深层弹窗子组件外面包裹teleport

<teleport to="#modal">
	<div id="center">
        <h2>this is a modal</h2>
    </div>
</teleport>

在外层父组件中可以添加要传送到的节点

<div id="app"></div>
<div id="modal"></div>

vue3里面的emit

export default defineComponent({
    emits:{
        'close-modal':null
    },
    setup(props, context){
        const buttonClick = () => {
            context.emit('close-modal')
        }
        return {
            buttonClick
        }
    }
})

6.Suspense

异步组件，Suspense里面也可以包裹多个组件

<Suspense>
	<template #default>
        <async-show/>
        <dog-show/>   
    </template>
    <template #fallback>
        <h1>Loading !...</h1>
    </template>
</Suspense>

在AsyncShow组件中

import { defineComponent } from 'vue'
export default defineComponent({
    setup() {
        return new Promise((resolve) => {
            setTimeout(() => {
                return resolve({
                    result:42
                })
            },3000)
        })
    }
})

捕捉suspense包裹组件的错误可以使用一个钩子函数onErrorCaptured

7.Provide/Inject

provide/inject有点像原来的bus

发送的地方

provide('名称','要传的数据')

在接收的地方

const temp = inject('名称')

8.全局API修改

vue2入口文件中是对全局vue对象上的一些属性进行修改，会产生一些问题

• 单元测试全局配置非常容易污染全局环境
• 在不同的apps中，共享一份有不同配置的Vue对象，就会变的很困难

vue3中改成从原来直接修改vue对象，改为修改vue对象的实例

import { createApp } from 'vue'
import App from './App.vue'
 
const app = createApp(App)
app.use('...')
app.mixin('...')
app.component('...')
 
app.mount('#app')

vue3相比vue2修改的api（不全）：

全局配置Vue.config -> app.config

config.productionTip被删除

config.ignoredElements改名为config.isCustomElement

config.keyCodes被删除

全局类注册API

Vue.component -> app.component

Vue.directive -> app.directive

行为扩展类API

Vue.mixin -> app.mixin

Vue.use -> app.use

tree shaking机制在es6的export导出之后，如果没有使用，webpack打包的时候就不会打包进去

vue3中全局的api改成具名的导出，就是为了打包的时候可以减少代码

9.script setup语法

优点：

更少的样板内容，更简明的代码，可以自动return出去

能够使用纯TypeScript声明props和抛出事件

更好的运行时性能

更好的IDE类型推断性能

<h1>{{hello}}</h1>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
interface IUser {
    name: string;
    age: number;
}
interface IEvents {
    (e:'change', age:number):void
}
const props = defineProps<{user: IUser}>()
const emit = defineEmits<IEvents>()
const onChange = () => {
    emit('change', props.user.age)
}
import HelloWorld from './components/HelloWorld.vue'   // 可以直接使用
const hello = 'hello world'
</script>