含有动态指令参数内容（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