一、vue3

1、生命周期

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

beforeDestroy -> beforeUnmount
destroyed -> unmouted

2、全局变量

Vue.prototype.$http = ''//vue3const app = createApp({});app.config.globalProperties.$http = ''

3、vue实例化

//vue3 通过createApp创立vue实例化createApp(App, {}).use(store).use(router).mount('#app')//vue2const 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、自定义指令

// vue2Vue.directive('focus',{    bind()//初始调用一次    update()//    unbind()//解绑调用    inserted: function(e){        e.focus();    }})//vue3const 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:visiblethis.$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用于调试的办法

APIHook inside setup
beforeCreateNot needed*
createdNot needed*
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted
errorCapturedonErrorCaptured
renderTrackedonRenderTracked
renderTriggeredonRenderTriggered
activatedonActivated
deactivatedonDeactivated

应用：

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 绑定到了以后的实例。

// vue2this.nextTick(() => {})Vue.nextTick(() => {})// vue3import {nextTick} from 'vue';nextTick(() => {})

二、vite