<dl id="3wz6h"></dl><li id="3wz6h"></li>

      1. <dl id="3wz6h"></dl>

      2. <dl id="3wz6h"><ins id="3wz6h"></ins></dl>

            <dl id="3wz6h"></dl>

            <dl id="3wz6h"><ins id="3wz6h"></ins></dl>
            1. 
              
              <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>

              <li id="3wz6h"><ins id="3wz6h"></ins></li>
              
              

            2. <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>
              首頁»JavaScript»Vue.js最佳實踐(五招讓你成為Vue.js大師)

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

              來源:segmentfault 發布時間:2018-04-02 閱讀次數:

                對大部分人來說,掌握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,這些默認行為將會被去掉, 以上兩點的優化才能成功。


               結尾

                掌握了以上五招,你就能在Vue.js的海洋中自由馳騁了,去吧少年。

                陸續可能還會更新一些別的招數,敬請期待。

              QQ群:WEB開發者官方群(515171538),驗證消息:10000
              微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
              提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
              網友評論(共0條評論) 正在載入評論......
              理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
              登錄會員中心
              云南十一选往期