vue高級技巧

1、索引數組的修改，vue無法劫持該數據進行響應式變化，代碼如下：
當btnClick觸發時，視圖並不會相應更新

<template>
	<div>
		<span v-for="(item, index) in testData" :key="index"></span>
	</div>
</template>
export default {
	data(){
		return {
			testData: [1,2,3]
		}
	},
	methods: {
		btnClick(){
			this.testData[0] = 9
		}
	}
}

原因：索引數組的更新無法Observe（置於爲啥，還在學習中…）
解決辦法：

1. this.$set(this.testData, index, val)
2. 改變原數據的引用btnClick() { let data = { ...this.testData }; data[0] = 9; this.testData = data; }

2、Vue組件通信方式

1. 父子組件通信： v-bind:attr ，props
2. provide, inject
3. $parent, $children
4. ref
5. $emit, $on
6. Vuex

3、定義無狀態組件
如果父組件對於子組件無感知，可以將子組件定義無狀態組件，儘量將狀態置於父組件操作，子組件只做prop接收，$emit觸發。這樣子組件耦合性更低，靈活度更高！

4、更新中。。。