vue使用的经验总结

为什么80%的码农都做不了架构师？>>>   

• 单向数据流

  • Vue只封装了从父组件到子组件的通信方式：prop

    props中包含父组件传入的属性、方法，这些内容会被添加到Vue组件的实例对象上

  • Vue建议的从子组件到父组件的通信方式：自定义事件

    父组件提供一个自定义事件，用于接收子组件的信息，执行相应的函数

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

    1. 设置一个新的Vue实例：

       var bus = new Vue()

    2. *建议将其挂在window上以供工程中全局使用window.Bus = bus

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

       A.vue

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

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

       B.vue

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

• computed与watch的异同

  1. 相同

     受现代 Javascript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除

     它们都只能观察到Vue实例对象（Vue实例中，this指向的对象）上存在的属性变化

  2. 不同

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

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

       watch中的方法，在监听属性变化发生时立即执行

       遇到 computed 监听无效，而 watch 有效，原因往往出在这里

     • computed只关心计算结果，不限制多少个属性发生了变化，可以监听多个属性变化的结果

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

       watch只关心某个属性变化，发生变化则执行相应逻辑

转载于:https://my.oschina.net/dawd/blog/840838