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