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核心特性