关于前端:vue3-typescript

一、vue3

1、生命周期

生命周期的钩子函数增加了前缀on，销毁组件的办法更换了名字

beforeDestroy -> beforeUnmount
destroyed -> unmouted

2、全局变量

Vue.prototype.$http = ''

//vue3
const app = createApp({});
app.config.globalProperties.$http = ''

3、vue实例化

//vue3 通过createApp创立vue实例化
createApp(App, {}).use(store).use(router).mount('#app')

//vue2
const app = new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

4、插槽

//vue2
<div>
    <slot :data="data" name="test"></slot>//具名 作用域
    <slot></slot>//默认插槽
</div>
//应用
<div>
    <template>
        <div>默认</div>
        <div slot="test" slot-scope="{data}">具名 作用域</div>
    </template>
    
</div>

//vue3  应用v-slot  简写#
<div>
    <slot :data="data" name="test"></slot>//具名 作用域
    <slot></slot>//默认插槽
</div>
//应用
<div>
    <template #default>
        <div>默认</div>
    </template>
    <template #test="{data}">
        <div>具名 作用域{{data.a}}</div>
    </template>
</div>

//同一个组件有多个插槽时，须要带上名称，避免插槽作用域凌乱

5、自定义指令

// vue2
Vue.directive('focus',{
    bind()//初始调用一次
    update()//
    unbind()//解绑调用
    inserted: function(e){
        e.focus();
    }
})

//vue3
const app = createApp({});
app.directive('focus',{
    mounted(el){
        el.focus()
    }
})

//调用
<input v-focus/>

6、v-model降级

变更：自定义组件应用v-model，事件及名称发生变化，v-bind.async去掉了async
新增：同一组件可配置多个v-model
新增：可自定义v-model修饰符

// vue2
<div>
    <input v-model="username"/>//默认绑定在value属性上
    <input :value="username" @input="username=$event"/>
</div>

// 如果须要对一个prop进行双向绑定，如dialog，内部能够管制组件显示或暗藏，组件外部敞开visible属性暗藏，同时将visible同步给内部，能够通过update:visible

this.$emit('update:visible', false)

// 父组件通过事件进行监听@update:visible/:visible.sync
<input :visible="isVisible" @update:visible="isVisible=$event"/>
<input :visible.sync="isVisible">

// vue3
// 须要绑定多个v-model，只须要给v-model传递一个参数
<input v-model:visible="isVisible" v-model:name="name"/>

7、异步组件

vue3应用defineAsyncComponent定义异步组件，配置选项component替换为loader，loader函数自身不接管resolve和reject，且必须返回一个promise

<template>
    <!-- 应用 -->
    <HelloWorld>
</template>

<script>
import {defineAsyncComponent} from 'vue'

export default {
    // 无配置
    HelloWorld: defineAsyncComponent(() => import('./HelloWord.vue')),
    
    //有配置异步组件
    HelloWorld: defineAsyncComponent({
        loader: () => import('./HelloWorld.vue'),
        delay: 200,
        timeout: 3000,
        errorComponent: () => import('./error.vue'),
        loadingComponent: () => import('./loading.vue')
    }),

};
</script>

8、组合式API

组合式API：
生命周期钩子函数、computed、watch、watchEffect
reactive、ref、toRefs

（1）setup

vue3新增的选项，组件应用组合式API的入口

setup执行在beforeCreate之前。

接管两个参数：props、context

// props传入的属性，响应式的，因而不能用es6解构
setup(props) {
    const {name} = props;
    const t = reactive({count: 0})

    return {
        t
    }
}

（2）ref、toRefs、readonly、reactive

vue3通过ref、reactive定义数据
vue2在data外面定义数据

reactive 用于解决对象的双向绑定
ref 解决js或对象的双向绑定

在应用的时候person.name…，有时候会感觉很繁琐，能够通过解构后应用数据
toRefs用于将reactive对象转化为ref对象的一般对象
readonly用于避免数据被批改

setup(props) {
    const {name} = props;
    // 申明根本类型
    const num = ref(0);
    const test = readonly(num);// 只读

    // 申明对象
    const person = ref({name: 'haha'})
    
    // 应用reactive申明对象
    const t = reactive({count: 0})

    return {
        num,
        person,
        ...toRefs(t)
    }
}

// 应用

<p>{{t.count}}</p>
<p>{{person.name}}</p>
<p>{{count}}</p>

（3）生命钩子

vue3的生命钩子须要通过vue引入
注：breforeCreate、create被setup代替，然而vue也可能兼容应用。
同时vue新增了onRenderTracked、onRenderTriggered用于调试的办法

应用：

setup(props) {
    onMounted(() => {})
}

（4）watch和watchEffect

watch：用于监听数据源、并在回调中执行的作用

// source数据源 callback回调函数，option执行回调函数的选项（deep、immediate、flush）
 watch(source, callback,[options])

watchEffect：不须要手动传入依赖、会先执行一次主动收集依赖，只能获取更新后的值，无奈获取到变动前的值

watchEffect(() = {console.log('123')})

9、Hooks

vue2应用mixin引入可复用的性能，当组件应用混入对象时，混入对象会注入组件的自身选项
vue3引入新的vue-hooks

引入起因：

• 跨组件难以复用
• 大组件、保护艰难、颗粒度不好管制、组件嵌套档次太多影响性能
• 类组件、this不可控、不易了解
• mixins 逻辑互相嵌套、mixin之间不易生产

劣势：

• 容许hooks之前相互传值
• 组件之前重用状态逻辑
• 明确表明逻辑出处

10、数据响应

vue2是通过Object.defineProperty只能劫持对象的属性
给数组和对象新增属性时，须要应用$set能力保障新增的属性也是响应式。如果遍历的属性也是对象，则须要深度遍历

vue3是Proxy 是间接代理对象、不须要遍历

11、Teleport

应用Teleport标签，能够指定dialog等组件渲染到特定的地位

<Teleport to="#app">
  ----
</Teleport>

12、片段（Fragment）

vue3 多个根节点

13.Tree-Shaking变动

nextTick是vue全局的api，vue3须要通过具名的形式引入。
Vue.nextTick() 是一个从 Vue 对象间接裸露进去的全局 API，其实 $nextTick() 只是 Vue.nextTick() 的一个繁难包装，只是为了不便而把后者的回调函数的 this 绑定到了以后的实例。

// vue2
this.nextTick(() => {})
Vue.nextTick(() => {})

// vue3
import {nextTick} from 'vue';
nextTick(() => {})

二、vite