动态属性名

<my-component
	:[prop1]="data1"
    @[event1]="fun1"></my-component>

v-bind和v-on可通过中括号接收表达式，动态计算属性名，推荐使用计算属性作为属性名。不过表达式强制string | null，null为忽略该属性。

响应数组变化

不同于2.x，proxy实现的响应式可以检测到数组元素修改，如this.arr1[0] = 'true'。

多事件监听

<my-component @click="one($event), two($event)"></my-component>

同一事件后可接收多个监听函数。 #v-is 在2.x是is，对table、select、ul、ol等元素限制内嵌元素，v-is可消除内嵌组件时的提示。

<ul>
	<li v-is="'my-component'"></li>
</ul>

非props属性

首先Vue3.0支持了组件可存在多个根节点。在单根节点时，Vue将自动把未声明props的自定义属性挂载在根节点上。而在多根节点时，需手动指定对$attr的处理，否则会有警告。

v-model

与2.x相比，v-model的默认值由value变为modelValue，更新事件由change变为update:modelValue。新增多具名v-model:name以及自定义修饰符。对新支持的多个v-model，需用update:name事件更新。

新增自定义修饰符在默认v-model由modelModifiers接收，多具名v-madel用nameModifiers接收。

provide响应

provide/inject用于将数据穿透到后代组件，3.0的CompositionApi可以实现后代的接收组件响应数据的变化。

provide() {

  return {todoLength: Vue.computed(() => this.todos.length)}

 }

异步组件

在3.0中Vue.defineAsyncComponent包裹可以返回一个异步组件，接收一个返回传入options的Promise，这样可以从服务端加载一个组件。

const app = Vue.createApp({})

const AsyncComp = Vue.defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<div>I am async!</div>'
      })
    })
)

app.component('async-example', AsyncComp)

用webpack实现的动态import代替Promise也可以。

Vue3.0的新特性（一）