Vue的一些常用高阶用法

一.Vuex篇

当需要使用Vuex中的状态state或方法mutations/actions时，简单的用法是这样的：
dom里：$store.state.hasLogined，
scirpt里：this.$store.state.hasLogined

当项目Vuex仓库比较庞大时，推荐使用如下写法：

1.state/getters

computed: {
	...mapState(['state1','state2'])
}

如果属性位于仓库的子模块里：

computed: {
      ...mapState('module1', ['state1','state2']),
      ...mapState('module2', ['state3','state4'])
}

还有种写法：

computed: {
      ...mapState({
      		state1: state => state.mystate1,
      		state2(可自己命名): state => state.mymodule1(子模块).mystate2
      })
}

2.mutations/actions

methods: {
	...mapMutations(['mutations1','mutations2']),
	...mapActions(['actions1','actions2'])
}

如果位于仓库的子模块里，写法同上。

二.侦听器watch篇

通常我们用watch只使用他的基本用法，如下：

watch: {
	myData(newValue, oldValue) {
		// doSomething
	}
}

其实watch用法还有两个属性，deep和immediate。

用法示例：

watch: {
	myData: {
		handler() {
			// doSomething
		},
		deep: true,
		immediate: true
	}
}

1.deep

在Vue2.x中，Vue 是不能检测到对象属性的添加或删除的。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 初始的data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。因此使用deep： true属性会深入观察此对象，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，修改obj里面任何一个属性都会触发这个监听器里的 handler。

2.immediate

在选项参数中指定immediate: true 将立即以表达式的当前值触发handler回调函数。