神武八荒一颗小说,盗墓笔记txt全集下载,盗墓笔记txt全集下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Vue.js的注意事項(xiàng)與技巧

Vue.js 是一個(gè)很棒的框架。然而，當(dāng)你開始構(gòu)建一個(gè)大型 JavaScript 項(xiàng)目的時(shí)候，你將對 Vue.js 感到一些困惑。這些困惑并不是來自框架本身，相反 Vue.js 團(tuán)隊(duì)會經(jīng)常調(diào)整一些重要設(shè)計(jì)策略。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、成都做網(wǎng)站與策劃設(shè)計(jì),平樂網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:平樂等地區(qū)。平樂做網(wǎng)站價(jià)格咨詢:18980820575

相對于 React 和 Angular，Vue.js 面向一些不同水平的開發(fā)者。它更加的友好，不管是對初學(xué)者還是經(jīng)驗(yàn)豐富的老手。它并不隱藏一些 DOM 操作，相反它與 DOM 配合的很好。

這篇文章更像是一個(gè)目錄，列舉了我在 Vue.js 的初學(xué)路上遇到一些問題和技巧。理解這些關(guān)鍵性的設(shè)計(jì)技巧，有助于我們構(gòu)建大型的 Web 應(yīng)用。

寫這篇文章的時(shí)候是 2018 年 5 月 18 日，下面這些技巧依然是有效的。但是框架升級，或者瀏覽器底層或者 JS API 發(fā)生改變時(shí)，他們可能會變得不是那么有用。

譯者注：盡管 Vue.js 3 即將到來，但是下面的技巧大部分是有用的，因?yàn)?3 的版本并不會改變一些上層 API ，***的特性可能是底層數(shù)據(jù) Observer 改有 proxy 實(shí)現(xiàn)，以及源碼使用 typescript 構(gòu)建。

1、為什么 Vue.js 不使用 ES Classes 的方式編寫組件

如果你使用過類似于 Angular 的框架或者某些后端 OOP 語言后，那么你的***個(gè)問題可能是：為什么不使用 Class 形式的組件?

Vue.js 的作者在 GitHub issues 中很好的回答了這個(gè)問題：

Use standard JS classes instead of custom syntax?

為什么不使用 Class 這里有三個(gè)很重要的原因：

ES Classes 不能夠滿足當(dāng)前 Vue.js 的需求，ES Classes 標(biāo)準(zhǔn)還沒有完全規(guī)范化，并且總是朝著錯(cuò)誤的方向發(fā)展。如果 Classes 的私有屬性和裝飾器(當(dāng)前已進(jìn)入 Stage 3)穩(wěn)定后，可能會有一定幫助。

ES Classes 只適合于那些熟悉面向?qū)ο笳Z言的人，它對哪些不使用復(fù)雜構(gòu)建工具和編譯器的人不夠友好。

優(yōu)秀的 UI 組件層次結(jié)構(gòu)一般都是組件的橫向組合，它并不是基于繼承的層次結(jié)構(gòu)。而 Classes 形式顯然更擅長的是后者。

譯者注：But，Vue.js 3.0 將支持基于 Class 的組件寫法，真香。

2、如何構(gòu)建自己的抽象組件?

如果你想構(gòu)建自己的抽象組件(比如 transition、keep-alive)，這是一個(gè)比構(gòu)建大型 web 應(yīng)用更加瘋狂地想法，這里有一些關(guān)于這個(gè)問題的討論，但是并沒有什么進(jìn)展。

Any plan for docs of abstract components?

譯者注：在 Vue.js 內(nèi)部組件(transition、keep-alive)中，使用了一個(gè) abstract 屬性，用于聲明抽象組件，這個(gè)屬性作者并不打算開放給大家使用，所以文檔也沒有提及。但是如果你要使用也是可以的，那么你必須深入源碼探索該屬性有何作用。

但是不要害怕，如果你可以很好地理解 slots ，你就可以構(gòu)建自己的抽象組件了。這里有一篇很好的博客介紹了要如何做到這一點(diǎn)。

Writing Abstract Components with Vue.js

譯者注：下面是《在 Vue.js 中構(gòu)建抽象組件》的簡單翻譯

抽象組件與普通組件一樣，只是它不會在界面上顯示任何 DOM 元素。它們只是為現(xiàn)有組件添加額外的行為。

就像很多你已經(jīng)熟悉的 Vue.js 的內(nèi)置組件，比如：` `、` `、` `。

現(xiàn)在展示一個(gè)案例，如何跟蹤一個(gè) DOM 已經(jīng)進(jìn)入了可視區(qū)域，讓我們使用 IntersectionObserver API 來實(shí)現(xiàn)一個(gè)解決這個(gè)問題的抽象組件。

(完整代碼在這里：[vue-intersect](https://github.com/heavyy/vue-intersect))

 
 
 
  
  
  // IntersectionObserver.vue
  
  
  export default {
  
  
    // 在 Vue 中啟用抽象組件
  
  
    // 此屬性不在官方文檔中， 可能隨時(shí)發(fā)生更改，但是我們的組件必須使用它
  
  
    abstract: true,
  
  
    // 重新實(shí)現(xiàn)一個(gè) render 函數(shù)
  
  
    render() {
  
  
      // 我們不需要任何包裹的元素，只需要返回子組件即可
  
  
      try {
  
  
        return this.$slots.default[0];
  
  
      } catch (e) {
  
  
        throw new Error('IntersectionObserver.vue can only render one, and exactly one child component.');
  
  
      }
  
  
  
  
  
      return null;
  
  
    },
  
  
    mounted () {
  
  
      // 創(chuàng)建一個(gè) IntersectionObserver 實(shí)例
  
  
      this.observer = new IntersectionObserver((entries) => {
  
  
        this.$emit(entries[0].isIntersecting ? 'intersect-enter' : 'intersect-leave', [entries[0]]);
  
  
      });
  
  
  
  
  
      // 需要等待下一個(gè)事件隊(duì)列，保證子元素已經(jīng)渲染
  
  
      this.$nextTick(() => {
  
  
        this.observer.observe(this.$slots.default[0].elm);
  
  
      });
  
  
    },
  
  
    destroyed() {
  
  
      // 確保組件移除時(shí)，IntersectionObserver 實(shí)例也會停止監(jiān)聽
  
  
      this.observer.disconnect();
  
  
    }
  
  
  }

讓我們看看如何使用它?

但是在這樣做之前，請你三思。我們一般依賴 mixins 和一些純函數(shù)來解決一些特殊場景的問題，你可以將 mixins 直接看做一個(gè)抽象組件。

How do I extend another VueJS component in a single-file component? (ES6 vue-loader)

3、我不太喜歡 Vue.js 的單文件組件，我更希望 HTML、CSS 和 JavaScript 分離。

沒有人阻止你這樣做，如果你是個(gè)注重分離的哲學(xué)家，喜歡把不同的東西放在不同文件，或者討厭編輯器對 .vue 文件的不穩(wěn)定行為，那么你這么做也是可以的。你要做的很簡單：

這么做，就會出現(xiàn)下一個(gè)問題：我的組件總是需要 4 個(gè)文件(vue + html + css + js)嗎?我能不能擺脫 .vue 文件? 答案是肯定的，你可以使用 vue-template-loader。

我的同事還為此寫了一篇很棒的教程：

Using vue-template-loader with Vue.js to Compile HTML Templates

4、函數(shù)式組件

感謝 React.js 讓函數(shù)式組件很流行，這是因?yàn)樗麄儫o狀態(tài)、易于測試。然而它們也存在一些問題。

譯者注：不了解 Vue.js 函數(shù)式組件的可以先在官方文檔查看：官方文檔

4.1 為什么我不能對功能組件使用基于 Class 的 @Component 裝飾器?

再次回到 Classes，它只是一種用于保存本地狀態(tài)的數(shù)據(jù)結(jié)構(gòu)。如果函數(shù)式組件是無狀態(tài)的，那么使用 @Component 裝飾器就是無意義的。

這里有關(guān)于這個(gè)的討論：

How to create functional component in @Component?

4.2 外部類和樣式不應(yīng)用于函數(shù)式組件

函數(shù)式組件不能像普通組件那樣，綁定具體的類和樣式，必須在 render 函數(shù)中手動應(yīng)用這些綁定。

DOM class attribute not rendered properly with functional components

class attribute ignored on functional components

4.3 函數(shù)式組件總是會重復(fù)渲染?

TLDR：在函數(shù)式組件中使用有狀態(tài)組件時(shí)務(wù)必要小心

Functional components are re-rendered when props are unchanged.

函數(shù)式組件相當(dāng)于直接調(diào)用組件的 Render 函數(shù)，這意味著你應(yīng)該：

避免在 render 函數(shù)中直接使用有狀態(tài)組件，因?yàn)檫@會在每次調(diào)用 render 函數(shù)時(shí)創(chuàng)建不同的組件實(shí)例。

如果函數(shù)式組件是葉子組件，會更好地利用它們。需要注意的是，同樣的行為也適用于 React.js。

4.4 如何在Vue.js 函數(shù)式組件中觸發(fā)一個(gè)事件?

在從函數(shù)式組件中觸發(fā)一個(gè)事件并不簡單。不幸的是，文檔中也沒有提到這一點(diǎn)。函數(shù)式組件中不可用 $emit 方法。stack overflow 上有人討論過這個(gè)問題:

How to emit an event from Vue.js Functional component?

5、Vue.js 的透明包裹組件

組件包裹一些DOM元素，并且公開了這些DOM元素的事件，而不是根DOM的節(jié)點(diǎn)實(shí)例。

例如：

這里我們真正感興趣的是 input 節(jié)點(diǎn)，而不是 div 根節(jié)點(diǎn)，因?yàn)樗饕菫榱藰邮胶托揎椂砑拥摹Ｓ脩艨赡軐@個(gè)組件的幾個(gè)輸入事件感興趣，比如 blur、focus、click、hover等等。這意味著我們必須重新綁定每個(gè)事件。我們的組件如下所示。

實(shí)際上這是完全沒必要的。簡單的解決方案是使用 Vue 實(shí)例上的屬性 vm.$listeners 將事件重新綁定到所需DOM 元素上：

6、為什么你不能在 slot 上綁定和觸發(fā)事件

我經(jīng)?？吹接行╅_發(fā)人員，在 slot 上進(jìn)行事件的監(jiān)聽和分發(fā)，這是不可能的。

組件的 slot 由調(diào)用它的父組件提供，這意味著所有事件都應(yīng)該與父組件相關(guān)聯(lián)。嘗試去傾聽這些變化意味著你的父子組件是緊密耦合的，不過有另一種方法可以做到這一點(diǎn)，Evan You解釋得很好:

Is it possible to emit event from component inside slot #4332

Suggestion: v-on on slots

7、slot 中的 slot(訪問孫輩slot)

在某些時(shí)候，可能會遇到這種情況。假設(shè)有一個(gè)組件，比如 A ，它接受一些 slot 。遵循組合的原則，使用組件 A 構(gòu)建另一個(gè)組件 B 。然后你把 B 用在 C 中。

那么現(xiàn)在問題來了：如何將 slot 從 C 組件傳遞到 A 組件?

要回答這個(gè)問題，首先取決你使用何種方式構(gòu)建組件? 如果你是用 render 函數(shù)，那就很簡單。你只需要在組件 B 的 render 函數(shù)中進(jìn)行如下操作：

 
 
 
  
  
  // Render function for component B
  
  
  function render(h) {
  
  
      return h('component-a', {
  
  
          // Passing slots as they are to component A
  
  
          scopedSlot: this.$scopedSlots
  
  
      }
  
  
  }

但是，如果你使用的是基于模板的方式，那么就有些糟糕了。幸運(yùn)的是，在這個(gè)問題上有了進(jìn)展：

feat(core): support passing down scopedSlots with v-bind

希望這篇文章讓你對 Vue.js 的設(shè)計(jì)思路有了更深入的了解，并為你提供了一些在高級場景中的技巧。

分享文章：Vue.js的注意事項(xiàng)與技巧
本文地址：http://m.fisionsoft.com.cn/article/dhhceoo.html

新聞中心

其他資訊