JohnsonGH
JohnsonGH

Vue3语法变化

视频课地址
https://www.bilibili.com/vide...

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接收属性和自定义事件为：
app.component('comp', {
  template: '
{{modelValue}}
',
  props: ['modelValue']
})

2、子组件传值命名双向绑定

语法糖展开为：

子组件comp接收属性和自定义事件为：
app.component('comp', {
  template: '
{{counter}}
',
  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中