10個實用技巧讓你的 Vue 代碼更優(yōu)雅
作者：johnYu
鏈接：https://juejin.im/post/6854573215969181703
前言?
作為深度代碼潔癖，我們都希望能寫出簡單高效的代碼，讓我們的代碼看起來更加優(yōu)雅，讓我們拋棄繁雜的代碼，一起開啟簡單的旅程~~
slots 新語法向 3.0 看齊
?使用帶有“＃”的新命名插槽縮寫語法,在Vue 2.6.0+中可用?
?
舉個例子:
構(gòu)建插槽時，最好規(guī)劃一下布局。這就是我的文章布局。
構(gòu)建插槽與構(gòu)建組件沒有什么不同。本質(zhì)上，插槽是具有超強功能的組件,讓我們細分一下上面的布局，組件的外觀如下：
<template>
<article-layout>
<template #articleHeader>
<h1>I am the headerh1>
template>
<template #articleContent>
<p>I am the contentp>
template>
<template #articleFooter>
<footer>I am the footerfooter>
template>
<template #side>
<aside>I am the side stuffaside>
template>
<template #banner>
<div>I am the bannerdiv>
template>
article-layout>
<template>
復(fù)制代碼動態(tài)指令參數(shù)
?指令參數(shù)現(xiàn)在可以接受動態(tài)JavaScript表達式動態(tài)參數(shù)值應(yīng)該是字符串，但允許
?null作為一個明確指示應(yīng)該刪除綁定的特殊值，那將會很方便。任何其他非字符串值都可能出錯，并會觸發(fā)警告。（僅適用于v-bind和v-on）
<div v-bind:[attr]="attributeName">div>
//簡寫
<div :[attr]="attributeName">div>
復(fù)制代碼這里的 attributeName 會被作為一個JavaScript表達式進行動態(tài)求值，求得的值將會作為最終的參數(shù)來使用。例如，如果你的 Vue 實例有一個 data 屬性 attributeName，其值為 href，那么這個綁定將等價于 v-bind:href
同樣地，你可以使用動態(tài)參數(shù)為一個動態(tài)的事件名綁定處理函數(shù)：
當 eventName 的值為 focus 時，v-on:[eventName] 將等價于 v-on:focus。
同樣可以適用于插槽綁定:
<template v-slot:[slotName]>
Dynamic slot name
template>
my-component>
//簡寫
<foo>
<template #[name]>
Default slot
template>
foo>
復(fù)制代碼動態(tài)參數(shù)預(yù)期會求出一個字符串，異常情況下值為 null。這個特殊的 null 值可以被顯性地用于移除綁定。任何其它非字符串類型的值都將會觸發(fā)一個警告。
<a v-bind:['foo' + bar]="value"> ... a>
復(fù)制代碼變通的辦法是使用沒有空格或引號的表達式，或用計算屬性替代這種復(fù)雜表達式。
@hook那些事
處理組件內(nèi)定時器的步驟。通常我們一般都是這樣操作的：
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>