Vue3语法变化

视频课地址
https://www.bilibili.com/vide...
杨村长课堂笔记：https://juejin.cn/post/686637...

P5:Global API改为应用程序实例调用
vue2中有很多全局api可以改变vue的行为，比如Vue.component，
这样的话所有创建的Vue实例共享相同的全局配置。
vue3中使用createApp返回app实例，由它暴露一系列全局api。

例举如下： Vue.config --> app.config Vue.config.productionTip --> removed Vue.config.ignoredElement --> app.isCustomElement Vue.component --> app.component Vue.directive --> app.directive Vue.mixin --> app.mixin Vue.use --> app.use Vue.filter --> removed

P6:
Vue2中不少global-api是作为静态函数直接挂在构造函数上的，例如Vue.nextTick()，如果我们从未在代码中用过它们，就会形成所谓的dead code。
Vue3把全局API抽取成独立函数，这样打包工具的摇树优化可以将这些dead code排除掉。

受影响api： Vue.nextTick Vue.observablee(replaced by Vue.reactive) Vue.version Vue.compile (only in full builds) Vue.set (only in compat builds) Vue.delete (only in compat builds)

P7:
.sync语法糖被移除，统一为v-model参数形式。
语法糖：指计算机语言添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。

1、子组件传值未命名双向绑定 <comp v-model="data"></comp> 语法糖展开为： <comp :modelValue="data" @update:modelValue="data=$event"></comp> 子组件comp接收属性和自定义事件为： app.component('comp', { template: '<div @click="$emit('update:modelValue', modelValue++)">{{modelValue}}</div>', props: ['modelValue'] }) 2、子组件传值命名双向绑定 <comp v-model:counter="data"></comp> 语法糖展开为： <comp :counter="data" @update:counter="counter=$event"></comp> 子组件comp接收属性和自定义事件为： app.component('comp', { template: '<div @click="$emit('update:counter', counter++)">{{counter}}</div>', props: ['counter'] })

P8：渲染函数API修改
渲染函数变得更简单好用了，修改主要有以下几点：
不再传入h函数，需要我们手动导入。便于摇树。
拍平的props结构。如: on:{ click() {}} --> onClick(){}。
scopedSlots删掉了，统一到slots。

渲染函数h(约定为createElement函数的别名)使用: h(标签, [标签props属性,] 标签文本字符串/子元素数组) import { h } from 'vue' //手动导入渲染函数 app.component('comp', { render() { this.$slots.default() //执行函数拿到插槽内容 this.$slots.content() //以前是this.$scopedSlots.content() const emit = this.$emit return h('div', [ h('div', { onClick() { emit('update:modelValue', 'new value') } }, 'I am RenderTest'), h('div', { onClick() {} }, 'I am RenderTest'), ]) } })

P9: 函数式组件仅能通过简单函数方式创建，functional选项废弃
函数式组件变化较大，主要有以下几点：
函数式组件性能提升在vue3中可忽略不计，所以vue3中推荐使用状态组件。
函数式组件仅能通过纯函数形式声明，接收props和context两个参数。
SFC中<template>不能添加functional特性声明函数式组件。
{ functional: true }组件选项移除。

 <script> // vue3中函数式组件只能用函数方式声明 function Heading(props, context) { console.log(context) return h(`h${props.level}`, context.attrs, context.slots) } Heading.props = ['level'] // 通过静态方式声明组件属性 export default Heading </script>

P10:异步组件使用变化
异步组件必须明确使用defineAsyncComponent包裹。
component选项重命名为loader。
Loader函数不再接受resolve和reject且必须返回一个Promise。

定义一个异步组件 import { defineAsyncComponent } from 'vue' // 不带配置的异步组件 const asyncPage = defineAsyncComponent(() => import('./NextPage.vue')) // 异步组件会被分割成单独文件，需要时再加载 //带配置的异步组件，loader选项是以前的component import ErrorComponent from './components/ErrorComponent.vue' import LoadingComponent from './components/LoadingComponent.vue' const asyncPageWithOptions = defineAsyncComponent({ loader: () => import('./NextPage.vue'), delay: 200, timeout: 3000, errorComponent: ErrorComponent, loadingComponent: LoadingComponent })

P11:
组件data选项总是声明为函数。
自定义组件白名单。vue3中自定义组件检测发生在模板编译时，如果要添加一些vue之外的自定义元素，需要在vue-loader的编译选项中设置isCustomElement放过检测，避免控制台报警告。
vue3设置动态组件时，is属性仅能用在component标签上，dom内模板解析使用v-is替代。

P12:自定义指令API和组件保持一致
vue3中指令api和组件保持一致，具体表现在：

bind --> beforeMount inserted --> mounted beforeUpdate: new!元素自身更新前调用，和组件生命周期钩子很像 update,componentUpdated --> updated beforeUnmount --> new!元素将要被移除之前调用，和组件生命周期钩子很像 unbind --> unmounted

P13:动画transion类名变更
v-enter --> v-enter-from 对应v-enter-to
v-leave --> v-leave-from 对应v-leave-to
组件watch选项和实例$watch方法不再支持点分隔符字符串路径，但可以使用计算函数作为$watch参数实现。

this.$watch(() => this.foo.bar, (v1, v2) => { console.log(this.foo.bar) })

vue2中应用程序根容器的outerHTML(如 <div id='app'></div>)会被根组件的模板替换，或被编译成template；vue3现在使用根容器的innerHTML取代。

P14:$on,$off,$once被移除，改由第三方库提供

P15:一个案例通关Vue3核心特性