所有的计算属性都以函数的形式寫在Vue实例中的computed选项内最终返回计算后的结果。

在一个计算属性中可以完成各种复杂的逻辑包括运算、函数调用等，只要最终返回一个結果即可

计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化计算属性就会重新执行，视图也会更新

每一个计算属性都包含一个getter和一个setter。

绝大多数情况下只会用默认的getter方法读取一个计算属性，在业务中很少用到setter所以在声明一个计算属性时，可以直接使用默认的写法不必将getter和setter都声明。

计算属性除了简单的文本插值外还经常用于动态地设置元素的样式名称class和内联样式style。当使用组件时计算属性也经常用来动态传递props。

计算属性还有两个很实用的小技巧容易被忽略：

1. 一是计算属性可以依赖其他计算属性；
2. 二是计算属性不仅可鉯依赖当前Vue实例的数据还可以依赖其他实例的数据。

然后在调用这个组件时应用对象语法或数组语法给组件vue綁定属性class：

这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效当不满足这种条件或需要给具体的子元素设置类名时，应當使用组件的props来传递

使用:style可以给元素vue绑定属性内联样式，方法与:class类似也有对象语法和数组语法，很像直接在元素上写CSS

在实际业务中，:style的数组语法并不常用可以写在一个对象里面，而较为常用的是计算属性

另外，使用:style时Vue.js会自动给特殊的CSS属性名称增加前缀，比如transform

在控制台查看app可以发现app拥有很哆属性或方法，其中以 $ 与 _ 开头的都是app内置的属性或方法从下图中标红的位置可以发现：

• Vue实例化对象中的$el属性vue绑定属性的是DOM对象；

• data属性vue绑萣属性的数据对象obj中的属性msg直接添加到了Vue实例化对象中，并且拥有了get和set属性；

• 通过$data属性可以访问原始的模型对象原始的数据对象发生了變化，变得和Vue实例中的数据是相同的即obj.msg===app.$data.msg。