作者：johnYu
連結：https://juejin.im/post/6854573215969181703
前言🍊
作為深度代碼潔癖，我們都希望能寫出簡單高效的代碼，讓我們的代碼看起來更加優雅，讓我們抛棄繁雜的代碼，一起開啟簡單的旅程~~
slots 新文法向 3.0 看齊
❝
使用帶有“＃”的新命名插槽縮寫文法,在Vue 2.6.0+中可用👍
❞
舉個例子:
建構插槽時，最好規劃一下布局。這就是我的文章布局。
建構插槽與建構元件沒有什麼不同。本質上，插槽是具有超強功能的元件,讓我們細分一下上面的布局，元件的外觀如下：
動态指令參數
❝
指令參數現在可以接受動态JavaScript表達式動态參數值應該是字元串，但允許
作為一個明确訓示應該删除綁定的特殊值，那将會很友善。任何其他非字元串值都可能出錯，并會觸發警告。(僅适用于null
v-bind和v-on
)
❞
<div v-bind:[attr]="attributeName">div>
這裡的
attributeName
會被作為一個JavaScript表達式進行動态求值，求得的值将會作為最終的參數來使用。例如，如果你的 Vue 執行個體有一個 data 屬性
attributeName
，其值為
href
，那麼這個綁定将等價于
v-bind:href
同樣地，你可以使用動态參數為一個動态的事件名綁定處理函數：
"handler">button>//簡寫<button @[eventName]="handler">button>
複制代碼
當
eventName
的值為
focus
時，
v-on:[eventName]
将等價于
v-on:focus
。
同樣可以适用于插槽綁定:
<template v-slot:[slotName]>
Dynamic slot nametemplate>my-component>//簡寫<foo><template #[name]>
Default slottemplate>foo>複制代碼
動态參數預期會求出一個字元串，異常情況下值為 null。這個特殊的 null 值可以被顯性地用于移除綁定。任何其它非字元串類型的值都将會觸發一個警告。
<a v-bind:['foo' + bar]="value"> ... a>
複制代碼
變通的辦法是使用沒有空格或引号的表達式，或用計算屬性替代這種複雜表達式。
@hook那些事
處理元件内定時器的步驟。通常我們一般都是這樣操作的：