用实例解析Vue三板斧：计算属性、内容分发与自定义事件

一、计算属性

计算属性是Vue中的一个重要特性，它允许您在组件中定义计算属性，这些属性会根据其他属性的值进行计算。计算属性的语法如下：

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

在这个例子中，fullName是一个计算属性，它会根据firstName和lastName属性的值计算出完整的姓名。计算属性与普通属性的主要区别在于，计算属性的值是根据其他属性的值计算出来的，而普通属性的值是直接定义的。

优点：

• 性能优化：计算属性只有在依赖的属性值发生变化时才会重新计算，这可以提高应用的性能。
• 代码简洁：计算属性可以将复杂的计算逻辑封装在一个地方，使代码更加简洁易读。
• 响应式：计算属性的值会随着依赖的属性值的变化而自动更新，这使得组件可以响应数据的变化。

局限：

• 只能使用简单的表达式：计算属性只能使用简单的表达式，不能使用复杂的逻辑或循环。
• 不能使用异步操作：计算属性不能使用异步操作，如AJAX请求。

二、内容分发

内容分发是Vue中的另一个重要特性，它允许您在组件之间分发数据。内容分发的语法如下：

props: ['message']

在这个例子中，message是一个Prop，它允许组件从父组件接收数据。Prop的值可以通过父组件的data属性或props属性来设置。

优点：

• 组件复用：内容分发使组件可以复用，因为您可以将数据从父组件传递给子组件，而无需在子组件中重复定义数据。
• 代码简洁：内容分发可以使代码更加简洁，因为您可以在一个地方定义数据，然后在其他组件中使用这些数据。
• 响应式：内容分发的值会随着父组件中数据值的改变而自动更新，这使得组件可以响应数据的变化。

局限：

• Prop只能从父组件传递到子组件：Prop只能从父组件传递到子组件，子组件不能将数据传递回父组件。
• Prop的值是只读的：Prop的值是只读的，子组件不能修改Prop的值。

三、自定义事件

自定义事件是Vue中的一个重要特性，它允许您在组件之间触发事件。自定义事件的语法如下：

methods: {
  fireEvent: function () {
    this.$emit('my-event')
  }
}

在这个例子中，fireEvent是一个方法，它会触发my-event事件。其他组件可以通过监听my-event事件来响应这个事件。

优点：

• 组件通信：自定义事件使组件之间可以相互通信，这可以实现复杂的功能。
• 代码简洁：自定义事件可以使代码更加简洁，因为您可以将事件的触发和处理逻辑分开。
• 响应式：自定义事件可以响应数据的变化，当数据发生变化时，组件可以触发自定义事件来通知其他组件。

局限：

• 自定义事件只能在组件之间触发：自定义事件只能在组件之间触发，不能在组件外部触发。
• 自定义事件不能传递数据：自定义事件不能传递数据，如果需要传递数据，可以使用Prop或Vuex。