美的空調吸頂機故障p6(美的空調吸頂機故障e9是什么意思)

前沿拓展：

美的空調吸頂機故障p6

美的中央空調:LSQWRF60M/A為美的中央空調模塊式風冷熱泵機組，顯示P6故障為：系統A冷凝器高溫保護。

---

作者：天澤

轉發鏈接：https://mp.weixin.qq.com/s/QoI9Jdb6phoFsZEjU-P6lw

前言

“別再更新了，學不動了”。這句話不知道出了多少開發者的辛酸。在過去的一年中，Vue 團隊一直都在開發 Vue.js 的下一個主要版本，就在 6 月底，尤大大更新同步了 Vue 3 及其周邊生態的狀態：《「速圍」尤雨溪詳細介紹 Vue 3 的最新進展》。

if (isTrue("I am planning to use Vue 3 for a new project")) {   if (isTrue("I need IE11 support")) {     await IE11CompatBuild() // July 2020   }   if (isTrue("RFCs are too dense, I need an easy-to-read guide")) {     await migrationGuide() // July 2020   }   if (isTrue("I'd rather wait until it's really ready") {       await finalRelease() // Targeting early August 2020   })   run(`npm init vite-app hello-vue3`)   return }

我們可以看到，如果一切順利的話，預計在 8 月份，Vue 3 的正式版本就可以和我們見面了，目前距離發布正式版還有一定的差距，還要做一些兼容性的工作。同時還會提供對 IE11 的支持。

Vue 3 為了達到更快、更小、更易于維護、更貼近原生、對開發者更友好的目的，在很多方面進行了重構：

全面擁抱 TypeScript重構 complier重構 Virtual DOM......寫在前面

這是該系列文章的第一篇，后續會持續更新，覆蓋 Vue 3 生態常用庫。JSX 是一個小眾群體使用開發方式，第一篇以 JSX 為切入點，目標是讓大多數開發 Vue 的同學也對 JSX 有一定的認知，在用 Vue 開發復雜應用時，也能有更加靈活的方式。

比如剛開始寫一個只能通過 level prop 動態生成標題 (heading) 的組件時，你可能很快想到這樣實現：

<script type="text/x-template" id="anchored-heading-template">  <h1 v-if="level === 1">     <slot></slot>   </h1>   <h2 v-else-if="level === 2">     <slot></slot>   </h2>   <h3 v-else-if="level === 3">     <slot></slot>   </h3></script>

這里用模板并不是最好的選擇，在每一個級別的標題中重復書寫了 <slot></slot>，不夠優雅。

如果嘗試用 JSX 來寫，代碼就會變得簡單很多。

const App = {   render() {     const tag = `h${this.level}`     return <tag>{this.$slots.default}</tag>   } }

看過 Ant Design Vue (https://github.com/vueComponent/ant-design-vue) 源碼 (下面簡稱為 antdv) 的同學應該知道， antdv 的底層是基于 JSX 來實現的，也是 Vue 生態中使用 JSX 的深度用戶。antd 為了盡快的兼容 Vue 3，和 Vue 官方展開合作，于是一起開發了 @ant-design-vue/babel-plugin-jsx(https://github.com/vueComponent/jsx)

Vue JSX 簡介

對于使用 React 的開發者來說，JSX 再熟悉不過了，但是如果你是一個 Vue 的重度用戶，可能對 JSX 不是特別熟悉，甚至聽到有同學說沒有 template 的 Vue 項目沒有靈魂。

先來看下面一段代碼：

const el = <p>Vue 3</p>;

這段代碼既不是 HTML 也不是字符串，被稱之為 JSX，是 JavaScript 的擴展語法。JSX 可能會使人聯想到模板語法，但是它具備 Javascript 的完全變成能力。

看到這里可能會有疑問，不少同學可能會以為 JSX 是 React 中特有的，其實不然。大多數同學都知道，我們平常在 .vue 文件中開發的代碼，實際上會被 vue-loader 處理，但可能少數同學去看過我們手把手寫出的代碼，會變變譯成啥樣。有興趣的同學可以戳這個地址來看下。vue-template-explorer (https://vue-template-explorer.netlify.app/) (因為眾所周知的原因，可能訪問略慢)

<p id="app">{{ msg }}</p>function render() {   with(this) {     return _c('p', {       attrs: {         "id": "app"       }     }, [_v(_s(msg))])   } }

觀察上述代碼我們發現，到運行階段實際上都是 render 函數在執行。Vue 推薦在絕大多數情況下使用 template 來創建你的 HTML。然而在一些場景中，就需要使用 render 函數，它比 template 更加靈活。

寫過 render 函數的同學可能深有體會，書寫復雜的 render 函數異常痛苦，而且難以維護，非常容易被稱之為 “祖傳代碼”。好在 2.0 的官方提供了一個 Babel 插件(https://link.zhihu.com/?target=https%3A//github.com/vuejs/babel-plugin-transform-vue-jsx)，可以將更接近于模板語法的 JSX 轉譯成 JavaScript。

使用過 React 的同學對于如何寫 JSX 語法一定非常熟悉了，然而，Vue 2 中 的 JSX 寫法和 React 還是有一些略微的區別。React 中所有傳遞的數據都掛在頂層。

const App = <A className="x" style={style} onChange={onChange} />

Vue 2 中，僅僅屬性就有三種：組件屬性 props，普通 html 屬性 attrs，DOM 屬性 domProps。想要更多了解如何在 Vue 2 中寫 JSX 語法，可以看這篇，在 Vue 中使用 JSX 的正確姿勢 (https://zhuanlan.zhihu.com/p/37920151)。

Vue 3 中對 JSX 帶來的改變屬性傳遞

Vue 3 中，屬性這塊的傳遞和 React 類似，意味著不需要再傳遞 props，attrs 這些屬性。

// before {   class: ['foo', 'bar'],   style: { color: 'red' },   attrs: { id: 'foo' },   domProps: { innerHTML: '' },   on: { click: foo },   key: 'foo' } // after {   class: ['foo', 'bar'],   style: { color: 'red' },   id: 'foo',   innerHTML: '',   onClick: foo,   key: 'foo' }指令改版

Vue 3 把大多數全局 API 和 內部 helper 移到了 ES 模塊中導出(比如 v-model、transition、teleport)，從而使得 Vue 3 在增加了很多新特性之后，基線的體積反而小了。

v-model、v-show 這些 API 全部通過模塊導出的方式來引入

“

基線體積：無法舍棄的代碼體積

我們來看一段非常簡單的代碼 <input v-model="x" />，在 Vue 2 和 Vue 3 中的編譯結果有何不同

// before function render() {   with(this) {     return _c('input', {       directives: [{         name: "model",         rawName: "v-model",         value: (x),         expression: "x"       }],       domProps: {         "value": (x)       },       on: {         "input": function ($event) {           if ($event.target.composing) return;           x = $event.target.value         }       }     })   } }// after import { vModelText as _vModelText, createVNode as _createVNode, withDirectives as _withDirectives, openBlock as _openBlock, createBlock as _createBlock } from "vue" export function render(_ctx, _cache) {   return _withDirectives((_openBlock(), _createBlock("input", {     "onUpdate:modelValue": $event => (_ctx.x = $event)   }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [     [_vModelText, _ctx.x]   ]) }

可以看到在 Vue 3 中，對各個 API 做了更加細致的拆分，理想狀態下，用戶可以在構建時利用搖樹優化 (tree-shaking) 去掉框架中不需要的特性，只保留自己用到的特性。模版編譯器會生成適合做 tree-shaking 的代碼，不需要使用者去關心如何去做，這部分的改動同樣需要在 JSX 寫法中實現。

模板編譯器中增加了 PatchFlag，在 JSX 的編譯過程同樣也做了處理，性能會有提升，但是考慮到 JSX 的靈活性，做了一些兼容處理，該功能還在測試階段。

從 Vue 2 到 Vue 3 的過渡

Vue 3 雖然引入了一部分破壞性的更新，但對于絕大多數 Vue 2 的 API 還是兼容的。那么同樣的，我們也要盡可能讓使用 JSX 的用戶通過最小的成本升級到 Vue 3，這是一個核心的目標。寫這篇文章的時候，antdv 已經使用 @ant-design-vue/babel-plugin-jsx (https://github.com/vueComponent/ant-design-vue) 重構了大約 70% 的功能，預計會在 Vue 3 正式版之前發布測試版，大概率會是東半球最快兼容 Vue 3 的企業級組件庫。

Vue 3 JSX 的 API 設計函數式組件const App = () => <p>Vue 3 JSX</p>普通組件const App = {   render() {     return <p>Vue 3.0</p>   } }const App = defineComponent(() => {   const count = ref(0);   const inc = () => {     count.value++;   };   return () => (     <p onClick={inc}>       {count.value}     </p>   ) })Fragmentconst App = () => (   <>     <span>I'm</span>     <span>Fragment</span>   </> )

Fragment 參考 React 的寫法，盡可能寫起來更加方便

Attributes/Propsconst App = () => <input type="email" />const placeholderText = 'email' const App = () => (   <input     type="email"     placeholder={placeholderText}   /> )指令

“

建議在 JSX 中使用駝峰 (vModel)，但是 v-model 也能用

v-show

const App = {   data() {     return { visible: true };   },   render() {     return <input vShow={this.visible} />;   }, };

v-model

“

修飾符：使用 (_) 代替 (.) (vModel_trim={this.test})

export default {  data: () => ({    test: 'Hello World',  }),  render() {    return (      <>        <input type="text" vModel_trim={this.test} />        {this.test}      </>    )  }, }

自定義指令

const App = {   directives: { antRef },   setup() {     return () => (       <a         vAntRef={(ref) => { this.ref = ref; }}       />     );   }, }插槽

關于指令、插槽最終的 API 還在討論中，有想法的可以去留言。Vue 3 JSX Design (https://github.com/vuejs/jsx/issues/141)

Vue 2 的 JSX 寫法如何快速遷移到 Vue 3

由于 antdv 的底層基本上都是基于 JSX 來寫的，想要快速遷移到 Vue 3，就必須有一個比較好的插件來支持，這也是為什么會有這個插件的原因。當然在實現過程中也踩了很多坑。

目前用法和 Vue 2 的語法大多數是一致的，為了幫助更快遷移，在插件中做了針對舊 VNode 格式的兼容層，這里只能兼容一部分寫法，以及部分語法的兼容會增加運行時的性能開銷，所以我們希望能夠將我們的經驗分享給大家，讓大家少走彎路！

{   "plugins": ["@ant-design-vue/babel-plugin-jsx", { "transformOn": true, "compatibleProps": true }] }transformOn

針對 Vue 2 中 on: { click: xx } 寫法的兼容，在運行時中會轉為 onClick: xxx

compatibleProps

上文提到 Vue 3 對屬性的傳遞做了變更，props、attrs 這些都不存在了，因此如果設置了這個屬性為 true，在運行時也會被解構到第一層的屬性中。

需要注意的一點，目前一旦開啟這兩個屬性，在 createVNode 的第二個參數，都會包一個 compatibleProps 和 transformOn 方法，所以酌情開啟這兩個參數。對于使用 Vue 2 的 JSX 同學，如果沒有使用到比較”不為人知“ 的 API的情況下，都可以快速的遷移。

那么 antdv 又是如何做遷移的呢？考慮到 antdv 是個組件庫，都包一層 compatibleProps 勢必不太優雅，因此沒有選擇開啟這個兩個開關。這里插一句，目前 antdv 的遷移還在進行中，相關的進度都在這個 issue 里面：Vue 3 支持(https://github.com/vueComponent/ant-design-vue/issues/1913)，有興趣的同學可以關注下，提一些 PR 過去。

對于 props 的遷移工作比較簡單，如果你是直接通過標簽的屬性來傳遞，那么無須做更改。

<Modal visible={visible} />

如果是通過對象來傳遞的屬性，只需要把原有分散在 props、on、attrs 中的紙直接鋪開即可。

 const vcUploadProps = { -  props: { -    ...this.$props, -   prefixCls, -    beforeUpload: this.reBeforeUpload, -  }, -  on: { -    start: this.onStart, -    error: this.onError, -    progress: this.onProgress, -    success: this.onSuccess, -    reject: this.onReject, - }, +  ...this.$props, +  prefixCls, +  beforeUpload: this.reBeforeUpload, +  onStart: this.onStart, +  onError: this.onError, +  onProgress: this.onProgress, +  onSuccess: this.onSuccess, +  onReject: this.onReject, +  ref: 'uploadRef', +  attrs: this.$attrs, +  ...this.$attrs, };

但是關于 inheritAttrs 有個較為底層的變動，需要開發者根據實際情況去修改。什么是inheritAttrs？ (https://cn.vuejs.org/v2/api/index.html#inheritAttrs) 在 Vue 2 中，這個選項不影響 class 和 style 綁定，但是在 Vue 3 中會影響到。因此可能在屬性的傳遞上，需要額外對這兩個參數做處理。

在事件的處理上，我們建議在 props 中聲明，這樣對后續的開發更加易維護，可以很直觀地從 props 看出我這個組件到底會傳遞哪些事件。值得一提的是，在 props 中聲明的事件，也可以通過 emit 來觸發。例如聲明了 onClick 事件，仍然可以使用 emit('click')。

Vue 3 對 context 的 API 也做了改動，一般如果不是復雜的組件，不會涉及到這個 API。這部分的改動可以看原先 Vue Compositon API 的相關文檔，Dependency Injection (https://composition-api.vuejs.org/api.html#dependency-injection)，注意一點，在 setup 中取不到 this。

總結

如今有超過百萬的開發人員使用 Vue，還有超百萬的 React 開發者正在去使用 Vue 的路上。

雖然說 Vue 中 JSX 的開發方式是一個少數群里，但是 antdv 的使用用戶也不是少數。為了讓這部分用戶可以快速體驗到兼容 Vue 3 版本的組件庫，因此在設計這個插件的時候，第一原則就是要最小的遷移和認知成本。

對于常年使用 template 的開發者來說，JSX 又何嘗不是一片新的天空呢？開發者要與使用者共情，站在使用者的角度出發，設計出的工具大概率可能滿足其需求。

距離 JSX 發布正式版本，還有一部分路要走。

最后要感謝 Vue.js 官方團隊，尤其是 @sodatea (https://github.com/sodatea) 大佬的信任。

文中出現的倉庫地址：

Ant Design Vue https://github.com/vueComponent/ant-design-vue@ant-design-vue/babel-plugin-jsx https://github.com/vueComponent/jsx后續

擁抱 Vue 3 系列之如何開發設計一個 Vue 3 JSX 插件

看完兩件事

如果你覺得這篇內容對你挺有啟發，我想邀請你幫我兩件小事

1.點個「贊」，讓更多人也能看到這篇內容（點了「贊」，bug -1 ）

2.轉發+關注，持續為你推送精選好文

推薦Vue學習資料文章：

《「速圍」尤雨溪詳細介紹 Vue 3 的最新進展》

《細聊single-spa + vue來實現前端微服務項目》

《前端新工具—vite從入門到實踐》

《一文帶你搞懂Vue3 底層源碼》

《9個優秀的 VUE 開源項目》

《細聊Single-Spa + Vue Cli 微前端落地指南「實踐」》

《通俗易懂的Vue異步更新策略及 nextTick 原理》

《通俗易懂的Vue響應式原理以及依賴收集》

《原生JS +Vue實現框選功能》

《Vue.js輪播庫熱門精選》

《一文帶你搞懂vue/react應用中實現ssr(服務端渲染)》

《Vue+CSS3 實現圖片滑塊效果》

《教你Vue3 Compiler 優化細節，如何手寫高性能渲染函數（上）》

《教你Vue3 Compiler 優化細節，如何手寫高性能渲染函數（下）》

《vue實現一個6個輸入框的驗證碼輸入組件》

《一用驚人的Vue實踐技巧「值得推薦」》

《Vue常見的面試知識點匯總（上）「附答案」》

《Vue常見的面試知識點匯總（下）「附答案」》

《Kbone原理詳解與小程序技術選型》

《為什么我不再用Vue，改用React？》

《讓Jenkins自動部署你的Vue項目「實踐」》

《20個免費的設計資源 UI套件背景圖標CSS框架》

《Deno將停止使用TypeScript，并公布五項具體理由》

《前端骨架屏都是如何生成的》

《Vue原來可以這樣寫開發效率杠杠的》

《用vue簡單寫一個音樂播放組件「附源碼」》

《為什么Vue3.0不再使用defineProperty實現數據監聽？》

《「干貨」學會這些Vue小技巧，可以早點下班和女神約會》

《探索 Vue-Multiselect》

《細品30張腦圖帶你從零開始學Vue》

《Vue后臺項目中遇到的技術難點以及解決方案》

《手把手教你Electron + Vue實戰教程（五）》

《手把手教你Electron + Vue實戰教程（四）》

《手把手教你Electron + Vue實戰教程（三）》

《手把手教你Electron + Vue實戰教程（二）》

《手把手教你Electron + Vue實戰教程（一）》

《收集22種開源Vue模板和主題框架「干貨」》

《如何寫出優秀后臺管理系統？11個經典模版拿去不謝「干貨」》

《手把手教你實現一個Vue自定義指令懶加載》

《基于 Vue 和高德地圖實現地圖組件「實踐」》

《一個由 Vue 作者尤雨溪開發的 web 開發工具—vite》

《是什么讓我愛上了Vue.js》

《1.1萬字深入細品Vue3.0源碼響應式系統筆記「上」》

《1.1萬字深入細品Vue3.0源碼響應式系統筆記「下」》

《「實踐」Vue 數據更新7 種情況匯總及延伸解決總結》

《尤大大細說Vue3 的誕生之路「譯」》

《提高10倍打包速度工具Snowpack 2.0正式發布，再也不需要打包器》

《大廠Code Review總結Vue開發規范經驗「值得學習」》

《Vue3 插件開發詳解嘗鮮版「值得收藏」》

《帶你五步學會Vue SSR》

《記一次Vue3.0技術干貨分享會》

《Vue 3.x 如何有驚無險地快速入門「進階篇」》

《「干貨」微信支付前后端流程整理(Vue+Node)》

《帶你了解 vue-next（Vue 3.0）之 爐火純青「實踐」》

《「干貨」Vue+高德地圖實現頁面點擊繪制多邊形及多邊形切割拆分》

《「干貨」Vue+Element前端導入導出Excel》

《「實踐」Deno bytes 模塊全解析》

《細品pdf.js實踐解決含水印、電子簽章問題「Vue篇」》

《基于vue + element的后臺管理系統解決方案》

《Vue仿蘑菇街商城項目（vue+koa+mongodb）》

《基于 electron-vue 開發的音樂播放器「實踐」》

《「實踐」Vue項目中標配編輯器插件Vue-Quill-Editor》

《基于 Vue 技術棧的微前端方案實踐》

《消息隊列助你成為高薪 Node.js 工程師》

《Node.js 中的 stream 模塊詳解》

《「干貨」Deno TCP Echo Server 是怎么運行的？》

《「干貨」了不起的 Deno 實戰教程》

《「干貨」通俗易懂的Deno 入門教程》

《Deno 正式發布，徹底弄明白和 node 的區別》

《「實踐」基于Apify+node+react/vue搭建一個有點意思的爬蟲平臺》

《「實踐」深入對比 Vue 3.0 Composition API 和 React Hooks》

《前端網紅框架的插件機制全梳理（axios、koa、redux、vuex）》

《深入Vue 必學高階組件 HOC「進階篇」》

《深入學習Vue的data、computed、watch來實現最精簡響應式系統》

《10個實例小練習，快速入門熟練 Vue3 核心新特性（一）》

《10個實例小練習，快速入門熟練 Vue3 核心新特性（二）》

《教你部署搭建一個Vue-cli4+Webpack移動端框架「實踐」》

《2020前端就業Vue框架篇「實踐」》

《詳解Vue3中 router 帶來了哪些變化？》

《Vue項目部署及性能優化指導篇「實踐」》

《Vue高性能渲染大數據Tree組件「實踐」》

《尤大大細品VuePress搭建技術網站與個人博客「實踐」》

《10個Vue開發技巧「實踐」》

《是什么導致尤大大選擇放棄Webpack？【vite 原理解析】》

《帶你了解 vue-next（Vue 3.0）之 小試牛刀【實踐】》

《帶你了解 vue-next（Vue 3.0）之 初入茅廬【實踐】》

《實踐Vue 3.0做JSX(TSX)風格的組件開發》

《一篇文章教你并列比較React.js和Vue.js的語法【實踐】》

《手拉手帶你開啟Vue3世界的鬼斧神工【實踐】》

《深入淺出通過vue-cli3構建一個SSR應用程序【實踐】》

《怎樣為你的 Vue.js 單頁應用提速》

《聊聊昨晚尤雨溪現場針對Vue3.0 Beta版本新特性知識點匯總》

《【新消息】Vue 3.0 Beta 版本發布，你還學的動么？》

《Vue真是太好了 壹萬多字的Vue知識點 超詳細!》

《Vue + Koa從零打造一個H5頁面可視化編輯器——Quark-h5》

《深入淺出Vue3 跟著尤雨溪學 TypeScript 之 Ref 【實踐】》

《手把手教你深入淺出vue-cli3升級vue-cli4的方法》

《Vue 3.0 Beta 和React 開發者分別杠上了》

《手把手教你用vue drag chart 實現一個可以拖動 / 縮放的圖表組件》

《Vue3 嘗鮮》

《總結Vue組件的通信》

《Vue 開源項目 TOP45》

《2020 年，Vue 受歡迎程度是否會超過 React？》

《尤雨溪：Vue 3.0的設計原則》

《使用vue實現HTML頁面生成圖片》

《實現全棧收銀系統（Node+Vue）（上）》

《實現全棧收銀系統（Node+Vue）（下）》

《vue引入原生高德地圖》

《Vue合理配置WebSocket并實現群聊》

《多年vue項目實戰經驗匯總》

《vue之將echart封裝為組件》

《基于 Vue 的兩層吸頂踩坑總結》

《Vue插件總結【前端開發必備】》

《Vue 開發必須知道的 36 個技巧【近1W字】》

《構建大型 Vue.js 項目的10條建議》

《深入理解vue中的slot與slot-scope》

《手把手教你Vue解析pdf(base64)轉圖片【實踐】》

《使用vue+node搭建前端異常監控系統》

《推薦 8 個漂亮的 vue.js 進度條組件》

《基于Vue實現拖拽升級（九宮格拖拽）》

《手摸手，帶你用vue擼后臺 系列二(登錄權限篇)》

《手摸手，帶你用vue擼后臺 系列三(實戰篇)》

《前端框架用vue還是react？清晰對比兩者差異》

《Vue組件間通信幾種方式，你用哪種？【實踐】》

《淺析 React / Vue 跨端渲染原理與實現》

《10個Vue開發技巧助力成為更好的工程師》

《手把手教你Vue之父子組件間通信實踐講解【props、$ref 、$emit】》

《1W字長文+多圖，帶你了解vue的雙向數據綁定源碼實現》

《深入淺出Vue3 的響應式和以前的區別到底在哪里？【實踐】》

《干貨滿滿!如何優雅簡潔地實現時鐘翻牌器(支持JS/Vue/React)》

《基于Vue/VueRouter/Vuex/Axios登錄路由和接口級攔截原理與實現》

《手把手教你D3.js 實現數據可視化極速上手到Vue應用》

《吃透 Vue 項目開發實踐｜16個方面深入前端工程化開發技巧【上】》

《吃透 Vue 項目開發實踐｜16個方面深入前端工程化開發技巧【中】》

《吃透 Vue 項目開發實踐｜16個方面深入前端工程化開發技巧【下】》

《Vue3.0權限管理實現流程【實踐】》

《后臺管理系統，前端Vue根據角色動態設置菜單欄和路由》

作者：天澤

轉發鏈接：https://mp.weixin.qq.com/s/QoI9Jdb6phoFsZEjU-P6lw

拓展知識：