vue使用的经验总结

单向数据流

Vue只封装了从父组件到子组件的通信方式：prop
props中包含父组件传入的属性、方法，这些内容会被添加到Vue组件的实例对象上

Vue建议的从子组件到父组件的通信方式：自定义事件
父组件提供一个自定义事件，用于接收子组件的信息，执行相应的函数

Vue补充的任意组件之间的通信方式：全局自定义事件（非父子组件通信）

设置一个新的Vue实例：

var bus = new Vue()

*建议将其挂在window上以供工程中全局使用

window.Bus = bus

在组件A中监听自定义事件
A.vue

<script>
module.exports = {
created: function(){
bus.$on('event-A', function (something) {
// ...
})
}
}
</script>

在组件B中触发自定义事件
B.vue

<script>
module.exports = {
created: function(){
bus.$emit('event-A', 'say something')
}
}
</script>

computed与watch的异同

相同

受现代 Javascript 的限制（以及废弃

Object.observe

），Vue 不能检测到对象属性的添加或删除

它们都只能观察到Vue实例对象（Vue实例中，

this

指向的对象）上存在的属性变化

不同

computed会自动给Vue实例对象上添加属性、覆盖已有属性，watch不会

computed中的方法只在被访问时执行，而不是在监听属性变化发生时立即执行
watch中的方法，在监听属性变化发生时立即执行
遇到

computed

监听无效，而

watch

有效，原因往往出在这里

computed只关心

计算结果

，不限制多少个属性发生了变化，可以监听多个属性变化的结果

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。

watch只关心某个

属性变化

，发生变化则执行相应逻辑