沐鳴平台網站_總結vue實用技巧

vue 作為目前前端三大框架之一,對於前端開發者可以說是必備技能。那麼怎麼系統地學習和掌握 vue 呢?為此,我做了簡單的知識體系體系總結,不足之處請各位大佬多多包涵和指正,如果喜歡的可以點個小贊!本文主要講述一些vue開發中的實用技巧。

監聽組件的生命周期

比如有父組件 Parent 和子組件 Child,如果父組件監聽到子組件掛載 mounted 就做一些邏輯處理,常規的寫法可能如下:

 // Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

此外,還有一種特別簡單的方式,子組件不需要任何處理,只需要在父組件引用的時候通過@hook 來監聽即可,代碼如下:

<Child @hook:mounted="doSomething" /> 
<Child @hook:updated="doSomething" />

當然這裏不僅僅是可以監聽 mounted,其它的生命周期事件,例如:created,updated 等都可以。

watch 的初始立即執行

觀察和響應 vue 實例上的數據變動。類似於某些數據的監聽回調 ,每當監聽的數據變化時都會執行回調進行後續操作。

但是當 watch 一個變量的時候,初始化時並不會執行,如下面的例子,你需要在 created 的時候手動調用一次。

created() {
  this.getList();
},
watch: {
  keyWord: 'getList',
}

上面這樣的做法可以使用,但很麻煩,我們可以添加 immediate 屬性,這樣初始化的時候就會自動觸發(不用再寫 created 去調用了),然後上面的代碼就能簡化為:

watch: {
  keyWord: {
    handler: 'getList',
    immediate: true
  }
}

watch 有三個參數

  • handler:其值是一個回調函數。即監聽到變化時應該執行的函數
  • deep:其值是 true 或 false;確認是否深入監聽。
  • immediate:其值是 true 或 false,確認是否以當前的初始值執行 handler 的函數

路由參數變化組件不更新

同一path的頁面跳轉時路由參數變化,但是組件沒有對應的更新。

原因:主要是因為獲取參數寫在了created或者mounted路由鈎子函數中,路由參數變化的時候,這個生命周期不會重新執行。

解決方案1:watch監聽路由

watch: {
 // 方法1 //監聽路由是否變化
  '$route' (to, from) { 
   if(to.query.id !== from.query.id){
            this.id = to.query.id;
            this.init();//重新加載數據
        }
  }
}
//方法 2  設置路徑變化時的處理函數
watch: {
'$route': {
    handler: 'init',
    immediate: true
  }
}

解決方案2 :為了實現這樣的效果可以給router-view添加一個不同的key,這樣即使是公用組件,只要url變化了,就一定會重新創建這個組件。

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

路由懶加載

vue 項目中實現路由按需加載(路由懶加載)的 3 中方式:

// 1、vue異步組件技術:
    {
        path: '/home',
        name: 'Home',
        component: resolve => reqire(['path路徑'], resolve)
  }

// 2、es6提案的import()
  const Home = () => import('path路徑')

// 3、webpack提供的require.ensure()
    {
        path: '/home',
        name: 'Home',
        component: r => require.ensure([],() =>  r(require('path路徑')), 'demo')
    }

require.context()

require.context(directory,useSubdirectories,regExp)

  • directory:說明需要檢索的目錄
  • useSubdirectories:是否檢索子目錄
  • regExp: 匹配文件的正則表達式,一般是文件名

場景:如頁面需要導入多個組件,原始寫法:

import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components: {
  titleCom, bannerCom, cellCom
}

這樣就寫了大量重複的代碼,利用 require.context 可以寫成

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
components: modules

遞歸組件

  • 遞歸組件: 組件在它的模板內可以遞歸的調用自己,只要給組件設置 name 組件就可以了。
  • 不過需要注意的是,必須給一個條件來限制數量,否則會拋出錯誤: max stack size exceeded
  • 組件遞歸用來開發一些具體有未知層級關係的獨立組件。比如:聯級選擇器和樹形控件
<template>
  <div v-for="(item,index) in treeArr"> {{index}} <br/>
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // 必須定義name,組件內部才能遞歸調用
  name: 'tree',
  data(){
    return {}
  },
  // 接收外部傳入的值
  props: {
     item: {
      type:Array,
      default: ()=>[]
    }
  }
}
</script>

清除定時器或者事件監聽

由於項目中有些頁面難免會碰到需要定時器或者事件監聽。但是在離開當前頁面的時候,定時器如果不及時合理地清除,會造成業務邏輯混亂甚至應用卡死的情況,這個時就需要清除定時器事件監聽,即在頁面卸載(關閉)的生命周期函數里,清除定時器。

methods:{
  resizeFun () {
    this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128
  },
  setTimer() {
    this.timer = setInterval(() => { })
  },
  clearTimer() {//清除定時器
        clearInterval(this.timer)
    this.timer = null
    }
},
mounted() {
  this.setTimer()
  window.addEventListener('resize', this.resizeFun)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeFun)
  this.clearTimer()
}

自定義路徑別名

我們也可以在基礎配置文件中添加自己的路徑別名

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': resolve('src/assets')
    }
  }

然後我們導入組件的時候就可以這樣寫:

// import YourComponent from '/src/assets/YourComponent'
import YourComponent from 'assets/YourComponent'

這樣既解決了路徑過長的麻煩,又解決了相對路徑的煩惱。

動態給修改dom的樣式

原因:因為我們在寫.vue文件中的樣式都會追加scoped。這樣針對模板dom中的樣式就可以生效,但其生效后的最終樣式並不是我們寫的樣式名,而是編碼后的。比如:

<template>
  <div class="box">dom</div>
</template>
<style lang="scss" scoped>
  .box {
    background: red;
  }
</style>

vue 將代碼轉譯成如下,所以我們在js中拼接上的dom結構樣式並不會生效。

.box[data-v-11c6864c]{ background:red; }
<template>
  <div class="box" data-v-11c6864c>dom</div>
</template>

解決方法:將要改變的樣式寫在非scoped樣式標籤中。

長列表性能優化

我們應該都知道 vue 會通過 object.defineProperty 對數據進行劫持,來實現視圖響應數據的變化,然而有些時候我們的組件就是純粹的數據展示,不會有任何改變,我們就不需要 vue 來劫持我們的數據,在大量數據展示的情況下,這能夠很明顯的減少組件初始化的時間。

所以,我們可以通過 object.freeze 方法來凍結一個對象,這個對象一旦被凍結,vue就不會對數據進行劫持了。

export default {
  data: () => ({
    list: []
  }),
  async created() {
    const list = await axios.get('xxxx')
    this.list = Object.freeze(list)
  },
  methods: {
    // 此處做的操作都不能改變list的值
  }
}

另外需要說明的是,這裏只是凍結了 list 的值,引用不會被凍結,當我們需要 reactive 數據的時候,我們可以重新給 list 賦值。

內容分發(slot)

插槽 slot,也是組件的一塊 html 模板,這一塊模板显示不显示、以及怎樣显示由父組件來決定。實際上,一個 slot 最核心的兩個問題在這裏就點出來了,是显示不显示和怎樣显示。

默認插槽

又名單個插槽、匿名插槽,這類插槽沒有具體名字,一個組件只能有一個該類插槽。

<!-- 父組件 parent.vue -->
<template>
  <div class="parent">
    <h1>父容器</h1>
    <child>
      <div class="tmpl">
        <span>菜單1</span>
      </div>
    </child>
  </div>
</template>

<!-- 子組件 child.vue -->
<template>
  <div class="child">
    <h1>子組件</h1>
    <slot></slot>
  </div>
</template>

具名插槽

匿名插槽沒有 name 屬性,所以叫匿名插槽。那麼,插槽加了 name 屬性,就變成了具名插槽。具名插槽可以在一個組件中出現 N 次,出現在不同的位置,只需要使用不同的 name 屬性區分即可。

<!-- 父組件 parent.vue -->
<template>
  <div class="parent">
    <h1>父容器</h1>
    <child>
      <div class="tmpl" slot="up">
        <span>菜單up-1</span>
      </div>
      <div class="tmpl" slot="down">
        <span>菜單down-1</span>
      </div>
      <div class="tmpl">
        <span>菜單->1</span>
      </div>
    </child>
  </div>
</template>

<!-- 子組件 child.vue -->
<template>
  <div class="child">
    <!-- 具名插槽 -->
    <slot name="up"></slot>
    <h3>這裡是子組件</h3>
    <!-- 具名插槽 -->
    <slot name="down"></slot>
    <!-- 匿名插槽 -->
    <slot></slot>
  </div>
</template>

作用域插槽

作用域插槽可以是默認插槽,也可以是具名插槽,不一樣的地方是,作用域插槽可以為 slot 標籤綁定數據,讓其父組件可以獲取到子組件的數據。

<!-- parent.vue -->
<template>
  <div class="parent">
    <h1>這是父組件</h1>
    <child
      >>
      <template slot="default" slot-scope="slotProps">
        {{ slotProps.user.name }}
      </template> </child
    >>
  </div>
</template>

<!-- 子組件 child.vue -->
<template>
  <div class="child">
    <h1>這是子組件</h1>
    <slot :user="user"></slot>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        user: {
          name: '小趙'
        }
      }
    }
  }
</script>

原文:https://segmentfault.com/a/1190000021908786

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

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

鏈接: http://www.fly63.com/article/detial/8094