含有动态指令参数内容（2.6.0新增）

Event Handling

Multiple Event Handlers

指定多个事件处理函数

<!-- both one() and two() will execute on button click -->
<button @click="one($event), two($event)">
  Submit
</button>

Components In-Depth

Non-Prop Attributes

Attribute Inheritance on Multiple Root Nodes
vue3允许多个根节点的组件了，所以attribute继承在多根节点的情况下，需要在组件内指明由哪个根节点继承。

Custom Events

Definning Custom Events
emits option
文档给了一个校验事件返回值的例子。

app.component('custom-form', {
  emits: ['in-focus', 'submit']
})

usage for Validate Emitted Events:

app.component('custom-form', {
  emits: {
    // No validation
    click: null,

    // Validate submit event
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm() {
      this.$emit('submit', { email, password })
    }
  }
})

v-model arguments & Multiple v-model bindings
一个组件可以使用多个v-model了。

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

app.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName'],
  template: `
    <input 
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
})

Handling v-model modifiers
可以自定义v-model修饰符了，文档给了一个首字母大写的例子。

v-model带入修饰符生成的用于检查的prop为modelModifiers
v-model:argument带入修饰符生成的用于检查的prop为argument+"Modifiers"
话说，要是v-model:model会是个什么情况呢？

Slots

Dynamic Slot Names

Composition API

按照官方文档的说法，以前的option API 配置式的写法会使组件中处理一个任务的逻辑分散在各处option中，如果组件不大，还不至于影响开发，组件变大之后，各个任务的处理逻辑相互交叉，会使代码维护变得痛苦。
新的Composition API可以将处理同一任务的逻辑集中。

ref，赋予值响应特性

In Vue 3.0 we can make any variable reactive anywhere with a new ref function

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

转换后会在包裹一层对象，是为了保证始终引用调用，可以保证不丢失值的响应特性。

引用与传值

setup

arguments: props, context
prop: props是响应式对象，对于props不能使用es6解构写法，否则破坏其响应特性。替代方法时使用toRefs方法，该方法只能使必须的prop保持响应性，在非必须prop又想保持其响应性的情况下可以使用toRef。
context: context是一个普通对象，没有被vue处理，可以安全地使用es6结构写法。有attrs、slots、emit三个成员对应三个组件属性。
setup执行时，组件实例并没有被建立，所以在setup内没有this，只能通过context的四个属性值获取组件的一些情况，同理，由于组件实例没有被创建，也不能访问data、computed、methods。
setup的返回值可以在组件的任何地方访问到。返回值会被automatically unwrapped-自动展开？，所以不用对做过ref包装的值手动取出其value再返回。
对于beforeCreate和created的钩子的处理

setup is run around the beforeCreate and created lifecycle hooks
setup在beforeCreate和created之间运行？（不知道翻译是否准确）

意思就是需要在这两个周期里执行的逻辑直接写道setup就行了。

在setup中注入相应生命周期要执行的函数

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

对应列表:

Options API	Hook inside `setup`
`beforeCreate`	Not needed*
`created`	Not needed*
`beforeMount`	`onBeforeMount`
`mounted`	`onMounted`
`beforeUpdate`	`onBeforeUpdate`
`updated`	`onUpdated`
`beforeUnmount`	`onBeforeUnmount`
`unmounted`	`onUnmounted`
`errorCaptured`	`onErrorCaptured`
`renderTracked`	`onRenderTracked`
`renderTriggered`	`onRenderTriggered`

使用Provide/Inject

Provide的数据应该式可响应的
使用reactive，ref
Provide的数据对于inject来说应该是只读的
使用readonly

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, readonly, ref } from 'vue'
import MyMarker from './MyMarker.vue

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    const updateLocation = () => {
      location.value = 'South Pole'
    }

    provide('location', readonly(location))
    provide('geolocation', readonly(geolocation))
    provide('updateLocation', updateLocation)
  }
}
</script>

Template Syntax

Dynamic Arguments

v-bind

<!-- full syntax -->
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument -->
<a :[key]="url"> ... </a>

v-on

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument -->
<a @[event]="doSomething"> ... </a>

value constraint

Dynamic arguments are expected to evaluate to a string, with the exception of null. The special value null can be used to explicitly remove the binding. Any other non-string value will trigger a warning.

只接受string，null用于明确解除绑定，除此外的值触发警告

expression constraint

Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names.

recommend using with computed property
syntax

access to global method

https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3

vue3新发现