vue中如何使用computed

在Vue中，computed属性用于定义计算属性。它可以在template中直接使用，使用方式与data中定义的数据一样。computed属性一般不需要在data中定义，而是在computed中进行定义。

在你提供的代码中，有几个例子展示了computed属性的基本使用和一些高级用法。

例子1展示了基本的computed属性的用法。在Vue实例中，通过computed字段定义了一个名为str的计算属性，它的值就是data中的msg字段。在template中，可以直接使用{{str}}来显示计算属性的值。

例子2展示了计算属性的setter和getter。在Vue实例中，通过computed字段定义了一个名为msg1的计算属性。它有一个getter，当获取msg1的值时，会触发get方法，返回的值就是this.msg。它还有一个setter，当设置msg1的值时，会触发set方法，将传入的值赋给this.msg。

例子3展示了计算属性和事件监听的区别。计算属性是根据它所依赖的数据动态计算出来的值，当依赖的数据改变时，计算属性的值会自动更新。而事件监听需要手动调用方法来改变数据。

综上所述，computed属性在Vue中是一种非常方便的方式来处理计算逻辑，并可以根据依赖的数据自动更新计算结果。