1、require.context()——>源自webpack

1.場景：如頁面需要匯入多個元件，原始寫法：

2.這樣寫大量重複的程式碼，可以使用require.context優化，如：
const path = require('path')
const files = require.context('@/components/home',false,/.vue$/) //遍歷當前目錄下home資料夾的所有.vue結尾的檔案，不遍歷子目錄
const modules = {}
files.keys().forEach(key=>{
const name = path.basename(key,'.vue')
modules[name] = files(key).default || files(key)
})
components:modules
這樣不管頁面引入多少元件，都可以使用這個方法
3.API方法

2.watch

2.1常用用法
1.場景：表格初始進來需要調查詢介面getLsit(),然後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.1props
這個應該非常熟悉，就是父傳子的屬性；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

這個也應該非常常見，觸發子元件觸發父元件給自己繫結事件，其實就是子傳父的方法
//父元件
<home @title='title'>
//子元件
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: "這是標題", width: "80", height: "80", imgUrl: "imgUrl"}
}

待續 》》》