关于前端: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