关于vue.js: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 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']
})