含有動(dòng)態(tài)指令參數(shù)內(nèi)容（2.6.0新增）

Event Handling

Multiple Event Handlers

指定多個(gè)事件處理函數(shù)

<!-- 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允許多個(gè)根節(jié)點(diǎn)的組件了猫牡，所以attribute繼承在多根節(jié)點(diǎn)的情況下摆马，需要在組件內(nèi)指明由哪個(gè)根節(jié)點(diǎn)繼承。

Custom Events

• Definning Custom Events
  emits option
  文檔給了一個(gè)校驗(yàn)事件返回值的例子迎变。

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
  一個(gè)組件可以使用多個(gè)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修飾符了氛谜，文檔給了一個(gè)首字母大寫的例子君账。

v-model帶入修飾符生成的用于檢查的prop為modelModifiers
v-model:argument帶入修飾符生成的用于檢查的prop為argument+"Modifiers"
話說，要是v-model:model會(huì)是個(gè)什么情況呢瞎饲？

Slots

• Dynamic Slot Names

Composition API

按照官方文檔的說法口叙，以前的option API 配置式的寫法會(huì)使組件中處理一個(gè)任務(wù)的邏輯分散在各處option中，如果組件不大嗅战，還不至于影響開發(fā)妄田，組件變大之后，各個(gè)任務(wù)的處理邏輯相互交叉，會(huì)使代碼維護(hù)變得痛苦疟呐。
新的Composition API可以將處理同一任務(wù)的邏輯集中脚曾。

ref，賦予值響應(yīng)特性

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

轉(zhuǎn)換后會(huì)在包裹一層對象萨醒，是為了保證始終引用調(diào)用斟珊，可以保證不丟失值的響應(yīng)特性苇倡。

引用與傳值

setup

• arguments: props, context
  prop: props是響應(yīng)式對象富纸，對于props不能使用es6解構(gòu)寫法，否則破壞其響應(yīng)特性旨椒。替代方法時(shí)使用toRefs方法晓褪，該方法只能使必須的prop保持響應(yīng)性，在非必須prop又想保持其響應(yīng)性的情況下可以使用toRef综慎。
  context: context是一個(gè)普通對象涣仿，沒有被vue處理，可以安全地使用es6結(jié)構(gòu)寫法示惊。有attrs好港、slots、emit三個(gè)成員對應(yīng)三個(gè)組件屬性米罚。
• setup執(zhí)行時(shí)钧汹，組件實(shí)例并沒有被建立，所以在setup內(nèi)沒有this录择，只能通過context的四個(gè)屬性值獲取組件的一些情況拔莱，同理，由于組件實(shí)例沒有被創(chuàng)建隘竭，也不能訪問data塘秦、computed、methods动看。
• setup的返回值可以在組件的任何地方訪問到尊剔。返回值會(huì)被automatically unwrapped-自動(dòng)展開？菱皆，所以不用對做過ref包裝的值手動(dòng)取出其value再返回赋兵。
• 對于beforeCreate和created的鉤子的處理

setup is run around the beforeCreate and created lifecycle hooks
setup在beforeCreate和created之間運(yùn)行？（不知道翻譯是否準(zhǔn)確）

意思就是需要在這兩個(gè)周期里執(zhí)行的邏輯直接寫道setup就行了搔预。

在setup中注入相應(yīng)生命周期要執(zhí)行的函數(shù)

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

對應(yīng)列表:

使用Provide/Inject

• Provide的數(shù)據(jù)應(yīng)該式可響應(yīng)的
  使用reactive霹期，ref
• Provide的數(shù)據(jù)對于inject來說應(yīng)該是只讀的
  使用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用于明確解除綁定拯田，除此外的值觸發(fā)警告

• 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