五、计算属性、内容分发、自定义事件

目录：计算属性、内容分发、自定义事件、Vue入门小结

1.计算属性

计算属性的重点突出在属性两个字上，首先它是个属性，其次这个属性有计算的能力，这里的计算就是个函数。简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已。可以想象为缓存。

  


  
  
调用当前时间的方法：{{currentTime1()}}
  
当前时间的计算属性：{{currentTime2}}

注意：methods和computed里的东西不能重名。
说明：①methods：定义方法，调用方法使用currentTime1()，需要带括号。
②computed：定义计算属性，调用属性需要使用currentTime2，不需要带括号。this.message是为了能够让currentTime2观察到数据变化而变化。
③在方法中的值发生了变化，则缓存就会刷新，可以在控制台使用vm.message=”ping”，改变数据的值，再次测试观察效果。
结论：调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特征就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

2.内容分发

在Vue.js中使用元素作为承载分发内容的出口，称其为插槽，可以应用在组合组件的场景当中。
测试：比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？
第一步：定义一个待办事项的组件

  


  Vue.component('todo', {
    template: '

                      
待办事项