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">     <h2>父容器</h2>     <child>       <div class="tmpl">         <span>菜單1</span>       </div>     </child>   </div> </template>  <!-- 子組件 child.vue --> <template>   <div class="child">     <h2>子組件</h2>     <slot></slot>   </div> </template>

具名插槽

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

<!-- 父組件 parent.vue --> <template>   <div class="parent">     <h2>父容器</h2>     <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>     <h4>這里是子組件</h4>     <!-- 具名插槽 -->     <slot name="down"></slot>     <!-- 匿名插槽 -->     <slot></slot>   </div> </template>

作用域插槽

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

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

到此，相信大家對“vue有哪些實用技巧”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！