关于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']
})