整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
很長的一段時間中，Vue 官方都以簡單上手作為其推廣的重點。這確實給 Vue 帶來了非常大的用戶量，尤其是最追求需求開發效率， 往往不那么在意工程代碼質量的國內中小企業中，Vue 占據的份額極速增長。但是作為開發者自身，我們必須要認清一個重點，簡單易用從來不應該在技術選型中占據很大的份額，可維護性才是。
以防萬一有的同學實在不看官方文檔，我先提一嘴，SFC 就是寫 Vue 組件的時候寫的.vue文件，這一個文件就是一個 SFC，全稱 Single File Component，也即單文件組件。
在開始說我個人的觀點之前，我們先來看幾個事實：
一是：Vue3 的定義原生支持 JSX，并且 Vue3 源碼中有jsx.d.ts來便于使用 JSX。 不知道同學們看到這里會想到什么， 我的第一反應是：社區對于 JSX 的需求聲音是不小的，所以會反向推動 Vue3 官方對于 JSX 的支持。
二是：AntDesign 的 vue3 版本，基本全部都是用 JSX 開發的，而且 Vue3 現在官方的 babel-jsx 插件就是阿里的人一開始維護的， 雖然我向來不喜歡阿里系的 KPI 推動技術方式，而且現在的 JSX 語法支持也不是很符合我的期望，但至少在使用 JSX 開發是更優秀的選擇這點上，我還是很認可 AntDesign 團隊的。
OK，說這些呢，主要是先擺出一些事實作為依據，讓有些同學可以不需要拿什么：
這些觀點來批斗我，首先我都會從客觀的角度來分析為什么，至少是我是能講出優劣勢的理由的。
OK，前言差不多到這里，接下來咱給您分析分析，為什么你應該選擇 JSX 來開發 Vue。
其實第一點就已經是殺手了，對于想要使用 TypeScript 來開發 Vue3 應用的同學來說，這簡直就是 SFC 無法克服的世界難題。
一句話概括：TypeScript 原生支持 JSX 語法，而基本無望 TS 官方能支持 SFC 的 template 語法。
TS 毫無疑問在前端社區的重要性越來越大，但凡未來對于代碼質量有一定要求的前端團隊，都應該會選擇使用 TS 來進行開發。 而且現在基本上在 NPM 上都能看到包你都能找到對應的 TS 定義，現在使用 TS 開發成本已經只剩下你是不是會 TS 語法了，在這種情況下是否支持 TS 則是開發模式在未來走不走的遠的重要原因。
目前 SFC 只能通過shim讓 TS 可以引入.vue文件，但是對于所有 SFC 的組件的定義都是一樣的：
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, {}, any>
export default component
}
也就是說你引入的 SFC 組件，TS 是不知道這個組件的 Props 應該接收什么的。所以你無法享受到這些 TS 的優勢：
當然你會說既然 Vue 官方能開發處 SFC 的語法，自然會支持這些特性。我表示這當然有可能，但是這個難度是非常大的，需要很多方面的支持，甚至可能需要 TS 官方團隊愿意協助， 但是我想不到 TS 官方有什么理由來支持 SFC，因為這只是 Vue 自己創建的方言，在其他場景下是沒有使用的，TS 是面向全社區的，我覺得他們不會考慮主動來支持 SFC。
那么有同學要問了，JSX 不也是非原生的 JS 語法么，他怎么就能讓 TS 官方支持了呢，是不是 FB 和微硬之間有什么 PY 交易？
這就涉及第二點了，JSX 和靜態模板的靈活性區別。
很多人弄錯了一個問題，就是覺得 SFC 的模板語法和 JSX 是一樣的，都是一種別人發明的語法，并不是 JS 原生的。這是事實，但又有一些區別，這個區別主要是體現在對于 JSX 的認知上。
一句話概括：JSX 并沒有擴展 JS 的語法，他只是縮略了 JS 的寫法！其本質就是 JS 的語法糖
就像 es6 給增加的語法糖，比如
const a = 1
const b = 2
const obj = { a, b }
// 其實就等價于
const obj = { a: a, b: b }
這種寫法并沒有擴展 JS 的能力，只是簡便了寫法，JSX 也是一樣的。
JSX 其實就是方法調用，他和 JS 是有一對一對應關系的，我們來看一個例子：
const element = <div id="root">Hello World</div>
這里的 JSX 語法編譯之后其實就是：
const element = createElement('div', { id: 'root' }, 'Hello World')
而 JSX 就是這些了，沒有什么更多的內容，所以說 JSX 只是方便我們寫嵌套的函數調用的語法糖，而其本身沒有擴展任何其他的內容。
但是 SFC 就不一樣了。
SFC 定義的不僅是語法，更是文件。
SFC 的具體定義是單文件組件，它本身就是把一個文件看作一個單位，所以他的約束性是要大很多的，你必須具有固定的文件結構才能使用 SFC，這做了很多的限制：
我們一點點來講
這個說實話非常非常不方便，很多時候我們寫一個頁面的時候其實經常會需要把一些小的節點片段拆分到小組件里面進行復用（如果你現在沒有這個習慣可能就是因為 SFC 的限制讓你習慣了全部寫在一個文件內）。
React 生態中豐富的 css-in-js 方案就是很好的例子，我們可以通過：
const StyledButton = styled('button', {
color: 'red',
})
如果我們這個頁面需要使用特定樣式的按鈕，通過這種方式在頁面文件里面封裝一下是非常常見的。因為沒必要把這個組件拆分出去，他也不是一個可復用的組件，拆分出去了還要多一次import。
Vue 生態基本沒有 css-in-js 的成熟方案其實跟這個限制也很有關系。
再來一個例子，比如我們封裝了一個 Input 組件，我們希望同時導出 Password 組件和 Textarea 組件來方便用戶根據實際需求使用，而這兩個組件本身內部就是用的 Input 組件，只是定制了一些 props：
const Input = { ... }
export default Input
export const Textarea = (props) => <Input multiline={true} {...props} />
export const Password = (props) => <Input type="password" {...props} />
在 JSX 中可以非常簡單地實現，但是如果通過 SFC，你可能就要強行拆成三個文件，另外為了方便，你可能還要增加一個index.js來導出這三個組件，你能想象這多了多少工作量么。
我不知道有多少同學看過 Vue 的 template 編譯出來之后的代碼，以我的經驗來說看過的可能不會超過 50%（樂觀估計），建議同學們如果還不了解的，可以去嘗試看一下。
為什么要看這個呢？因為你看了之后你會發現，你在 template 里面寫的類似 HTMl 的內容，其實跟 HTML 根本沒啥關系，他們也會被編譯成類似 JSX 編譯出來的結果。
{
render(h) {
return h('div', {on: {}, props: {}}, h('span'))
}
}
類似這樣的結果，而這里面h函數調用的結果就是一個 VNode，是 Vue 中的節點的基礎單元。那么既然這些單元就是一個對象，其實理所當然的，他們是可以作為參數傳遞的。 也就是說，理論上他們是可以通過props把節點當作參數傳遞給其他組件的。
這個做法在 React 中非常常見，叫做renderProps，并且其非常靈活：
const Comp = () => <Layout header={<MyHeader />} footer={<MyFooter />} />
但是因為 SFC 模板的限制，我們很難在 SFC 里面的 props 上寫節點：
<template>
<Layout :header="<MyHeader/>"></Layout>
</template>
這樣寫是不行的，因為 SFC 定義了:header綁定接受的只能是 js 表達式，而<MyHeader/>顯然不是。
因為通過 props 傳遞不行，所以 Vue 才發明了 slot 插槽的概念
雖然我們一直再說 Vue 簡單，但是事實上ScopedSlots一度成為新手理解 Vue 的噩夢，很多同學都被這個繞來繞去的作用域整的死去活來。
我們看一個ScopedSlots的例子：
<template>
<Comp>
<template v-slot:scope="ctx">
<div>{{ctx.name}}</div>
</template>
</Comp>
</template>
這里ctx是Comp里面的屬性，通過這種方式傳遞出來，讓我們在當前組件可以調用父組件里面的屬性。這簡直就是理解的噩夢，但是如果用 JSX 實現類似功能就非常簡單：
<Comp scope={name => <div>{name}</div>} />
我們只是給一個叫做scope的 props 傳遞來一個函數，這個函數接受一個name屬性，在Comp里面會調用這個函數并傳入name。 簡單來說我們傳入的就是一個構建節點片段的函數，就是這么簡單。
這就是因為 SFC 的模板的限制，導致靈活性不足，Vue 需要去創造概念，創造關鍵字來抹平這些能力的不足，而創造的概念自然就引入了學習成本。
所以其實我一直不認可 Vue 比 React 好學的說法的，如果你真的認真研究所有用法，并且總是嘗試用最合理的方式實現功能，那么 Vue 絕對不會比 React 簡單。
這個體現在兩個方面，一個是我們定義在全局的一些固定數據如果要在組件內使用的話，就要通過this掛載到組件上。
比如我們緩存了一份城市數據，這種數據基本上是不會改的，所以也沒必要掛載到組件上讓其能夠響應式。但是在 SFC 里面這是做不到的， 因為模板的執行上下文是在編譯時綁定。你在模板里面訪問的變量，都會在編譯時自動綁定到this上，因為模板需要編譯，其本身也是字符串不具有作用域的概念。
而這在 JSX 中則不復存在：
const citys = []
const Comp = () => {
return citys.map(c => <div>{c}</div>)
}
另外一個方面則是在組件使用上，在 SFC 中，組件必須事先注冊，因為我們在模板里面寫的只能是字符串而不能是具體某個組件變量。 那么模板中的組件和真實的組件對象只能通過字符串匹配來實現綁定。這帶來了以下問題：
在 JSX 中則沒有這些問題，因為 JSX 里面直接使用組件引用作為參數：
const Comp = {...}
const App = () => <Comp />
其實上面能看出來，除了 SFC 本身的問題之外，Vue 使用字符串模板也會帶來很多的靈活性問題。 最直接的證據，就是 Vue 使用了directive來擴展功能（當然這不是 Vue 發明的，老早的模板引擎就有類似問題）。
為什么說directive是不得已的選擇呢？因為靜態模板缺失邏輯處理的能力。我們拿列表循環舉例，在 JS 中我們可以非常方便地通過map函數來創建列表：
const list = arr.map(name => <span key={name}>{name}</span>)
而因為 JSX 本身就是函數調用，所以上面的代碼和 JSX 結合起來也非常自然：
const App = () => (
<div>
<Header />
{arr.map(name => (
<span key={name}>{name}</span>
))}
</div>
)
上面的例子對應到 JS 如下：
const App = () =>
createElement('div', {}, [
<Header />,
arr.map(name => createElement('span', { key: name }, name)),
])
這仍然是因為 JSX 只是 JS 的語法糖的原因，所有能在 JS 中實現的在 JSX 里面都能實現。
而 SFC 的模板是基于字符串編譯的，其本身就是一段字符串，我們不能直接在模板里面寫map來循環節點，（當然我們可以在可以接收表達式的地方寫，比如v-on里面）。
那么我們不能循環節點，有需要這樣的功能來渲染列表，怎么辦呢？就是發明一個標志來告訴編譯器這里需要循環，在 Vue 中的體現就是v-for指令。
同學們可能要問了，既然 Vue 能實現v-for，為什么不直接實現表達式循環列表呢？他當然也可以實現，但是他肯定不會這么選，因為成本太高了。 他要這么做就相當于他要實現一個 JS 引擎，而其實里面很多內容又是不必須的，一個v-for其實就能夠適用大部分情況了。
但有了v-for就需要v-if，那么后面還會需要其他各種能力，這就是一種方言的產生和發展的過程。
當然指令也不僅僅是 JS 表達式的代替品，其本身也是增加了一些其他能力的，比如它能夠讓我們更方便地訪問 DOM 節點， 但是嘛，我們用框架的理由不就是為了能夠盡可能的屏蔽 DOM 操作嘛～
以上就是我對應該選擇使用 JSX 還是 SFC 進行開發的分析，其實歸根到底 SFC 的問題在于其沒有擁抱 JS， 他的語法是自己發明的，他需要有一個 JS 實現的 compiler 來讓其最終能在 JS 環境中運行，這本質上就是一種發明， 我們不能否認發明確實有優點，但我們也不能只看有點不看問題，沒能擁抱 JS 自然就很難完全復用 JS 社區的優勢 而 JS 社區一直在蓬勃發展，好用的工具一直在涌現，而 SFC 想要使用 JS 社區的這些工具還要自己再實現一份，我們可以細數以下 SFC 做了哪些兼容
基本上常用的工具我們都需要等待 Vue 社區或者官方開發了插件之后才能運行。而 JSX 因為有 babel 和 typescript 的官方支持， 基本上所有新的 JS 生態工具原生都是支持的。
在這 Vue3 開始預備發力的階段，我們還是希望 Vue 社區能夠使用更優秀更規范的方式來進行開發， 其實如果我們直接使用 JSX 開發 Vue3，我們會發現很多時候我們都不需要用到emit、attrs這些概念， 甚至如果 Vue3 的 JSX 插件支持，我們甚至能夠拋棄slots。
但是因為 Vue3 一定要考慮兼容 Vue2，導致本身潛力很好的 Vue3 總是顯得縮手縮腳，這不得不說是一種遺憾。
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>實際上任何HTML標簽都擁有style屬性，用來設置行內式。
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div><head>
<style type="text/CSS">
選擇器（選擇的標簽） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head><style>
div {
color: red;
font-size: 12px;
}
</style><style>
/*選擇器{屬性:值；}*/
p {
color:#06C;
font-size:14px;
} /*文字的顏色是 藍色*/
h4 {
color:#900;
}
h1 {
color:#090;
font-size:16px;
}
body {
background:url(bg2.jpg);
}
</style><head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>屬性 | 作用 |
rel | 定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。 |
type | 定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。我們都可以省略 |
href | 定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。 |
樣式表 | 優點 | 缺點 | 使用情況 | 控制范圍 |
行內樣式表 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標簽（少） |
內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |
標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 類選擇器使用“.”（英文點號）進行標識，后面緊跟類名.
命名規范： 見附件（Web前端開發規范手冊.doc）
命名是我們通俗約定的，但是沒有規定必須用這些常用的命名。
課堂案例：
<head>
<meta charset="utf-8">
<style>
.blue {
color: blue;
font-size: 100px;
}
.red {
color: red;
font-size: 100px;
}
.orange {
color: orange;
font-size: 100px;
}
.green {
color: green;
font-size: 100px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>我們可以給標簽指定多個類名，從而達到更多的選擇目的。
注意：
<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>id選擇器使用#進行標識，后面緊跟id名
id選擇器和類選擇器最大的不同在于 使用次數上。
總結他們**
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內邊距*/
}選擇器 | 作用 | 缺點 | 使用情況 | 用法 |
標簽選擇器 | 可以選出所有相同的標簽，比如p | 不能差異化選擇 | 較多 | p { color：red;} |
類選擇器 | 可以選出1個或者多個標簽 | 可以根據需求選擇 | 非常多 | .nav { color: red; } |
id選擇器 | 一次只能選擇器1個標簽 | 只能使用一次 | 不推薦使用 | #nav {color: red;} |
通配符選擇器 | 選擇所有的標簽 | 選擇的太多，有部分不需要 | 不推薦使用 | * {color: red;} |
選擇器
p {
font-size:20px;
}注意：
p{ font-family:"微軟雅黑";}p{font-family: Arial,"Microsoft Yahei", "微軟雅黑";}常用技巧：
1. 各種字體之間必須使用英文狀態下的逗號隔開。
2. 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
3. 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
4. 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。字體名稱 | 英文名稱 | Unicode 編碼 |
宋體 | SimSun | B8BF53 |
新宋體 | NSimSun | B0B8BF53 |
黑體 | SimHei | ED1F53 |
微軟雅黑 | Microsoft YaHei | FAEF6FC5ED1 |
楷體_GB2312 | KaiTi_GB2312 | 77F53_GB2312 |
隸書 | LiSu | B6E66 |
幼園 | YouYuan | E7C06 |
華文細黑 | STXihei | 4E87EC6ED1 |
細明體 | MingLiU | EC60EF53 |
新細明體 | PMingLiU | B0EC60EF53 |
屬性值 | 描述 |
normal | 默認值（不加粗的） |
bold | 定義粗體（加粗的） |
100~900 | 400 等同于 normal，而 700 等同于 bold 我們重點記住這句話 |
提倡：
我們平時更喜歡用數字來表示加粗和不加粗。
font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：
屬性 | 作用 |
normal | 默認值，瀏覽器會顯示標準的字體樣式 font-style: normal; |
italic | 瀏覽器會顯示斜體的字體樣式。 |
小技巧：
平時我們很少給文字加斜體，反而喜歡給斜體標簽（em，i）改為普通模式。font屬性用于對字體樣式進行綜合設置
選擇器 { font: font-style font-weight font-size/line-height font-family;}屬性 | 表示 | 注意點 |
font-size | 字號 | 我們通常用的單位是px 像素，一定要跟上單位 |
font-family | 字體 | 實際工作中按照團隊約定來寫字體 |
font-weight | 字體粗細 | 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數字不要跟單位 |
font-style | 字體樣式 | 記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal |
font | 字體連寫 | 1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號 和 字體 必須同時出現 |
表示表示 | 屬性值 |
預定義的顏色值 | red，green，blue，還有我們的御用色 pink |
十六進制 | #FF0000，#FF6600，#29D794 |
RGB代碼 | rgb(255,0,0)或rgb(100%,0%,0%) |
屬性 | 解釋 |
left | 左對齊（默認值） |
right | 右對齊 |
center | 居中對齊 |
一般情況下，行距比字號大7.8像素左右就可以了。
line-height: 24px;1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度
p {
/*行間距*/
line-height: 25px;
/*首行縮進2個字 em 1個em 就是1個字的大小*/
text-indent: 2em;
}text-decoration 通常我們用于給鏈接修改裝飾效果
值 | 描述 |
none | 默認。定義標準的文本。 取消下劃線（最常用） |
underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的（常用） |
overline | 定義文本上的一條線。（不用） |
line-through | 定義穿過文本下的一條線。（不常用） |
屬性 | 表示 | 注意點 |
color | 顏色 | 我們通常用 十六進制 比如 而且是簡寫形式 #fff |
line-height | 行高 | 控制行與行之間的距離 |
text-align | 水平對齊 | 可以設定文字水平的對齊方式 |
text-indent | 首行縮進 | 通常我們用于段落首行縮進2個字的距離 text-indent: 2em; |
text-decoration | 文本修飾 | 記住 添加 下劃線 underline 取消下劃線 none |
Emmet的前身是Zen coding,它使用縮寫,來提高html/css的編寫速度。
emment語法
件引用規范
先說加載的規范，這個規范主要是為了提高頁面加載速度或者是首屏的速度。
1 CSS 文件或樣式在 head 標簽中引用。頁面的渲染需要 CSS，所以盡量早的讓 CSS 文件加載出來。
2 JS 文件要放在 body 標簽尾部。頁面里加載和運行 JS 都會阻塞頁面的渲染過程，所以把 JS 放在尾部可以加快首屏顯示的速度，但對整個頁面完成加載的時間沒什么影響。
3 使用壓縮后的文件。線上使用的靜態文件，盡量都是壓縮好的，CSS 使用 .min.css 形式，JS 使用 .min.js 形式，這樣可以減少文件的體積，從而減少下載的時間。
4 減少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加載并解析后才會去請求, 會拖慢 CSS 文件的加載速度。
屬性的書寫規范
一、使用縮寫
在 CSS 中有很多屬性或屬性值可以縮寫, 在能用縮寫的地方盡量使用縮寫。
1、屬性的縮寫。CSS 中有些屬性是可以合并的, 如:
margin-top: 10px;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;上面這幾組 margin 相關的屬性占了四條樣式, 我們可以使用一條 margin 屬性代替這四個方向的 margin：
margin: 10px 5px 0 5px;一般帶有方向的屬性, 縮寫的時候各個方向的值都是按著"上 右 下 左"的順序寫的。另外如果四個方向值一樣，可以直接用一個值代替四個方向；如果左右方向的值一樣，則可以省略最后一個左側的值。
上面這條縮寫也可以寫成：
margin: 10px 5px 0;2、顏色的縮寫。在使用十六進制顏色的時候, 如果 rgb 三個顏色位置中, 每兩位的顏色值相同, 可以把六位的顏色寫成三位。
如：color: #22ffcc;
就可以寫成：
color: #2fc;這兩種寫法是等效的, 但要注意的是如果需要兼容低版本 IE 瀏覽器, 還是要用六位的顏色值。
3、數字的縮寫。在 CSS 中如果整數部分是 0 的小數, 可以忽略小數點前面的 0; 如果屬性值是 0, 則可以忽略屬性值的單位。
如: font-size: 0.8rem; padding: 0px;
這兩條屬性就可以做簡寫：
font-size: .8rem; padding: 0;二、屬性順序的規范
理論上, CSS 的屬性是一條一條解析執行的。這種情況下, 就要把能確定大小和位置的屬性寫在前面, 把對布局沒什么影響的屬性寫在后面, 避免返工。
一般說的使用順序如下:
1. 位置屬性 (position, top, right, z-index, display, float等)
2. 大小 (width, height, padding, margin)
3. 文字系列 (font, line-height, letter-spacing, color- text-align等)
4. 背景 (background, border等) 5. 其他 (animation, transition等)
注釋規范
一 文件頭注釋
/*
* @Author: zhangsan
* @Date: 2023-04-18 20:09:21
* @Last Modified by: zhangsan
* @Last Modified time: 2023-05-05 10:21:21
*/二 普通注釋
/* 頭部導航 */
.nav-top{
background: #ccc;
}CSS-Reset
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
