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、更新中。。。