<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          Vue.js最佳實踐:五招讓你成為Vue.js大師

          時間:?2019-12-03閱讀:?376標簽:?vue

          本文面向對象是有一定Vue.js編程經驗的開發者。如果有人需要Vue.js入門系列的文章可以在評論區告訴我,有空就給你們寫。

          對大部分人來說,掌握Vue.js基本的幾個API后就已經能夠正常地開發前端網站。但如果你想更加高效地使用Vue來開發,成為Vue.js大師,那下面我要傳授的這五招你一定得認真學習一下了。


          第一招:化繁為簡的Watchers

          場景還原:

          created(){
              this.fetchPostList()
          },
          watch: {
              searchInputValue(){
                  this.fetchPostList()
              }
          }

          組件創建的時候我們獲取一次列表,同時監聽input框,每當發生變化的時候重新獲取一次篩選后的列表這個場景很常見,有沒有辦法優化一下呢?

          招式解析:
          首先,在watchers中,可以直接使用函數的字面量名稱;其次,聲明immediate:true表示創建組件時立馬執行一次。

          watch: {
              searchInputValue:{
                  handler: 'fetchPostList',
                  immediate: true
              }
          }


          第二招:一勞永逸的組件注冊

          場景還原:

          import BaseButton from './baseButton'
          import BaseIcon from './baseIcon'
          import BaseInput from './baseInput'
          
          export default {
            components: {
              BaseButton,
              BaseIcon,
              BaseInput
            }
          }
          <BaseInput
            v-model="searchText"
            @keydown.enter="search"
          />
          <BaseButton @click="search">
            <BaseIcon name="search"/>
          </BaseButton>

          我們寫了一堆基礎UI組件,然后每次我們需要使用這些組件的時候,都得先import,然后聲明components,很繁瑣!秉持能偷懶就偷懶的原則,我們要想辦法優化!

          招式解析:
          我們需要借助一下神器webpack,使用 require.context() 方法來創建自己的(模塊)上下文,從而實現自動動態require組件。這個方法需要3個參數:要搜索的文件夾目錄,是否還應該搜索它的子目錄,以及一個匹配文件的正則表達式。

          我們在components文件夾添加一個叫global.js的文件,在這個文件里借助webpack動態將需要的基礎組件統統打包進來。

          import Vue from 'vue'
          
          function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1)
          }
          
          const requireComponent = require.context(
            '.', false, /\.vue$/
             //找到components文件夾下以.vue命名的文件
          )
          
          requireComponent.keys().forEach(fileName => {
            const componentConfig = requireComponent(fileName)
          
            const componentName = capitalizeFirstLetter(
              fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
              //因為得到的filename格式是: './baseButton.vue', 所以這里我們去掉頭和尾,只保留真正的文件名
            )
          
            Vue.component(componentName, componentConfig.default || componentConfig)
          })
          

          最后我們在main.js中import 'components/global.js',然后我們就可以隨時隨地使用這些基礎組件,無需手動引入了。


          第三招:釜底抽薪的router key

          場景還原:
          下面這個場景真的是傷透了很多程序員的心...先默認大家用的是Vue-router來實現路由的控制。
          假設我們在寫一個博客網站,需求是從/post-page/a,跳轉到/post-page/b。然后我們驚人的發現,頁面跳轉后數據竟然沒更新?!原因是vue-router"智能地"發現這是同一個組件,然后它就決定要復用這個組件,所以你在created函數里寫的方法壓根就沒執行。通常的解決方案是監聽$route的變化來初始化數據,如下:

          data() {
            return {
              loading: false,
              error: null,
              post: null
            }
          }, 
          watch: {
            '$route': {
              handler: 'resetData',
              immediate: true
            }
          },
          methods: {
            resetData() {
              this.loading = false
              this.error = null
              this.post = null
              this.getPost(this.$route.params.id)
            },
            getPost(id){
          
            }
          }

          bug是解決了,可每次這么寫也太不優雅了吧?秉持著能偷懶則偷懶的原則,我們希望代碼這樣寫:

          data() {
            return {
              loading: false,
              error: null,
              post: null
            }
          },
          created () {
            this.getPost(this.$route.params.id)
          },
          methods () {
            getPost(postId) {
              // ...
            }
          }

          招式解析:

          那要怎么樣才能實現這樣的效果呢,答案是給router-view添加一個unique的key,這樣即使是公用組件,只要url變化了,就一定會重新創建這個組件。(雖然損失了一丟丟性能,但避免了無限的bug)。同時,注意我將key直接設置為路由的完整路徑,一舉兩得。

          <router-view :key="$route.fullpath"></router-view>


          第四招: 無所不能的render函數

          場景還原:
          vue要求每一個組件都只能有一個根元素,當你有多個根元素時,vue就會給你報錯

          <template>
            <li
              v-for="route in routes"
              :key="route.name"
            >
              <router-link :to="route">
                {{ route.title }}
              </router-link>
            </li>
          </template>
          
          
           ERROR - Component template should contain exactly one root element. 
              If you are using v-if on multiple elements, use v-else-if 
              to chain them instead.

          招式解析:
          那有沒有辦法化解呢,答案是有的,只不過這時候我們需要使用render()函數來創建HTML,而不是template。其實用js來生成html的好處就是極度的靈活功能強大,而且你不需要去學習使用vue的那些功能有限的指令API,比如v-for, v-if。(reactjs就完全丟棄了template)

          functional: true,
          render(h, { props }) {
            return props.routes.map(route =>
              <li key={route.name}>
                <router-link to={route}>
                  {route.title}
                </router-link>
              </li>
            )
          }


          第五招:無招勝有招的高階組件

          劃重點:這一招威力無窮,請務必掌握
          當我們寫組件的時候,通常我們都需要從父組件傳遞一系列的props到子組件,同時父組件監聽子組件emit過來的一系列事件。舉例子:

          //父組件
          <BaseInput 
              :value="value"
              label="密碼" 
              placeholder="請填寫密碼"
              @input="handleInput"
              @focus="handleFocus>
          </BaseInput>
          
          //子組件
          <template>
            <label>
              {{ label }}
              <input
                :value="value"
                :placeholder="placeholder"
                @focus=$emit('focus', $event)"
                @input="$emit('input', $event.target.value)"
              >
            </label>
          </template>

          有下面幾個優化點:

          1.每一個從父組件傳到子組件的props,我們都得在子組件的Props中顯式的聲明才能使用。這樣一來,我們的子組件每次都需要申明一大堆props, 而類似placeholer這種dom原生的property我們其實完全可以直接從父傳到子,無需聲明。方法如下:

              <input
                :value="value"
                v-bind="$attrs"
                @input="$emit('input', $event.target.value)"
              >
             

          $attrs包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時,這里會包含所有父作用域的綁定,并且可以通過 v-bind="$attrs" 傳入內部組件——在創建更高層次的組件時非常有用。

          2.注意到子組件的@focus=$emit('focus', $event)"其實什么都沒做,只是把event傳回給父組件而已,那其實和上面類似,我完全沒必要顯式地申明:

          <input
              :value="value"
              v-bind="$attrs"
              v-on="listeners"
          >
          
          computed: {
            listeners() {
              return {
                ...this.$listeners,
                input: event => 
                  this.$emit('input', event.target.value)
              }
            }
          }

          $listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。

          3.需要注意的是,由于我們input并不是BaseInput這個組件的根節點,而默認情況下父作用域的不被認作 props 的特性綁定將會“回退”且作為普通的 HTML 特性應用在子組件的根元素上。所以我們需要設置inheritAttrs:false,這些默認行為將會被去掉, 以上兩點的優化才能成功。

          原文:https://segmentfault.com/a/1190000014085613
          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/7143

          一點 Vue.observable 想法

          Vue 2.6.0 新增了 Vue.observable api,但最近才去嘗試使用它。這東西說新也不新,因為他就是 vue 本身的功能,只是暴露出來,成為新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一樣。

          Vue.use到底是什么?

          我們在使用Vue做項目開發的時候,看到不少輪子都是通過Vue.use來進行使用,感覺甚是高大上。不過Vue.use到底是什么鬼?不妨來看個究竟。

          vue介紹

          庫是一種插件,是一種封裝好的特定方法的集合。提供給開發者使用,控制器在使用者手里。框架是一套架構,會基于自身特定向用戶提供一套相當完整的解決方案,控制權在框架本身

          vue有時候你不需要 $emit & $on

          在此之前,子組件到父組件的傳遞事件我一般還是使用 $emit 和 $on,因為這個操作理解起來并不難,代碼一般也挺清晰。不過今天遇到這么個情況 ——

          Vue最佳實踐

          Vue 最佳實踐,是參考 Vue 官方風格指南并根據過去 Vue 實際項目開發中的經驗總結的一套規范建議。本項目的目的是希望每個 Vue 開發者都能盡快熟悉并上手項目代碼,志在幫助 Vue 新手開發者及時避免一些不規范的設計和由此而引發的問題

          vue知識點總匯

          keep-alive它是vue的內置組件在默認情況下,v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 。你可以添加 lazy 修飾符,從而轉變為使用 change 事件進行同步:

          vue中使用v-for時為什么不能用index作為key?

          Vue 和 React 都實現了一套虛擬DOM,使我們可以不直接操作DOM元素,只操作數據便可以重新渲染頁面。而隱藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虛擬DOM的Diff算法大致相同,其核心是基于兩個簡單的假設

          vue.extend拓展

          Vue.extend返回的是一個“拓展實例構造器”,也就是預設了部分選項的Vue實例構造器。經常服務于Vue.component用來生成組件,可以簡單理解為當在模板中遇到該組件名稱作為標簽的自定義元素時

          Vue基于snabbdom做了哪些事

          Snabbdom 核心代碼大約只有 200 行。它提供了模塊化架構,具有豐富的功能,可通過自定義模塊進行擴展。在了解核心 patch 前,需要先了解 snabbdom 的模塊化架構思想。

          尤雨溪:Vue Function-based API RFC【轉】

          將 2.x 中與組件邏輯相關的選項以 API 函數的形式重新設計。組件 API 設計所面對的核心問題之一就是如何組織邏輯,以及如何在多個組件之間抽取和復用邏輯。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网