Vue 開發必須知道的 36 個技巧

說明：本文并非原創，來源于segmentfault，搜索文章標題可查看原文

前言

Vue 3.x 的Pre-Alpha 版本。后面應該還會有 Alpha、Beta 等版本,預計至少要等到 2020 年第一季度才有可能發布 3.0 正式版;

所以應該趁還沒出來加緊打好 Vue2.x 的基礎;

Vue基本用法很容易上手,但是有很多優化的寫法你就不一定知道了,本文從列舉了 36 個 vue 開發技巧;

后續 Vue 3.x 出來后持續更新.

1.require.context()

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

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

2.這樣就寫了大量重復的代碼,利用 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

這樣不管頁面引入多少組件,都可以使用這個方法

3.API 方法

實際上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用require.context(directory,useSubdirectories,regExp)接收三個參數:directory：說明需要檢索的目錄useSubdirectories：是否檢索子目錄regExp: 匹配文件的正則表達式,一般是文件名

2.watch

2.1 常用用法

1.場景:表格初始進來需要調查詢接口 getList(),然后input 改變會重新查詢

created(){ this.getList()},watch: { inpVal(){ this.getList() }}

2.2 立即執行

2.可以直接利用 watch 的immediate和handler屬性簡寫

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

2.3 深度監聽

3.watch 的 deep 屬性,深度監聽,也就是監聽復雜數據類型

watch:{ inpValObj:{ handler(newVal,oldVal){ console.log(newVal) console.log(oldVal) }, deep:true }}

此時發現oldVal和 newVal 值一樣;

因為它們索引同一個對象/數組,Vue 不會保留修改之前值的副本;

所以深度監聽雖然可以監聽到對象的變化,但是無法監聽到具體對象里面那個屬性的變化

3. 14種組件通訊

3.1 props

這個應該非常屬性,就是父傳子的屬性;

props 值可以是一個數組或對象;

// 數組:不建議使用props:[]// 對象props:{ inpVal:{ type:Number, //傳入值限定類型 // type 值可為String,Number,Boolean,Array,Object,Date,Function,Symbol // type 還可以是一個自定義的構造函數，并且通過 instanceof 來進行檢查確認 required: true, //是否必傳 default:200, //默認值,對象或數組默認值必須從一個工廠函數獲取如 default:()=>[] validator:(value) { // 這個值必須匹配下列字符串中的一個 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } }}

3.2 $emit

這個也應該非常常見,觸發子組件觸發父組件給自己綁定的事件,其實就是子傳父的方法

// 父組件// 子組件this.$emit('title',[{title:'這是title'}])

3.3 vuex

1.這個也是很常用的,vuex 是一個狀態管理器

2.是一個獨立的插件,適合數據共享多的項目里面,因為如果只是簡單的通訊,使用起來會比較重

3.API

state:定義存貯數據的倉庫 ,可通過this.$store.state 或mapState訪問getter:獲取 store 值,可認為是 store 的計算屬性,可通過this.$store.getter 或 mapGetters訪問mutation:同步改變 store 值,為什么會設計成同步,因為mutation是直接改變 store 值, vue 對操作進行了記錄,如果是異步無法追蹤改變.可通過mapMutations調用action:異步調用函數執行mutation,進而改變 store 值,可通過 this.$dispatch或mapActions 訪問modules:模塊,如果狀態過多,可以拆分成模塊,最后在入口通過...解構引入

3.4 $attrs和$listeners

2.4.0 新增

這兩個是不常用屬性,但是高級用法很常見;

1.$attrs

場景:如果父傳子有很多值,那么在子組件需要定義多個 props

解決:$attrs獲取子傳父中未在 props 定義的值

// 父組件// 子組件mounted() { console.log(this.$attrs) //{title: "這是標題

總結

以上是生活随笔為你收集整理的vue Mutation 必须是同步函数 为什么_Vue 开发必须知道的 36 个技巧「近1W字」的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。