3、Vue实例的属性

1、获取Vue实例的属性

2、data属性

每个Vue实例都会代理其data对象里所有的属性。如果实例创建之后添加或者更改属性，他不会触发视图更新。

这句话说了下面两件事情

1、每个Vue实例都会代理其data对象里所有的属性

我们可以看出，app这个vue实例已经代理了他里面data对象里的属性

2、如果实例创建之后添加或者更改属性，他不会触发视图更新。

大家注意看，我们在vue实例外面修改的username有效，在vue实例里面ready里面修改的username无效。

在ready方法里面修改username无效，已经说明了这句话如果实例创建之后添加或者更改属性，他不会触发视图更新。

但是为什么在vue实例外面修改的username就有效了呢?这是因为JS异步执行的问题，大家看，我们new Vue对象的时候，这个过程是需要时间的，为了不造成页面卡顿，创建vue对象时是异步执行的，所以会出现 正在创建vue对象时，后面的app.username="我是猪";也在执行，所以就把值改掉了。

也就是说，在vue实例创建之前，我们都可以在data中创建或修改属性值，但是一旦vue实例创建完成，创建和修改都不允许被操作。

 

 

3、计算属性（computed）

计算属性就是在模板中调用函数输出结果。

 

 

 

4、方法属性（methods）

4.1. 计算属性和方法调用的使用对比

5、观察属性（watch）

1、Vue提供watch属性来观察和响应实例上的数据变动（即监控模型层数据是否变化，如果变化，就掉回调函数）

2、Watch属性的回调函数没有返回值，回调函数可以执行一些复杂任务，比如绘制图形等

3、Watch属性没有返回值，所以不适合在表达式中使用

案例学习：画一个圆

效果：

6、过滤器属性（filter）

Vue.js允许自定义过滤器，用作一些常见的文本格式化。过滤器可以用在两个地方:插值和v-bind指令。

Vue1.0含有一些过滤器，但是在vue2.0中，所有自带的过滤器都被废止了。因此说，需要用户自定义过滤器。

过滤器可以串联。

7、自定义组件属性（components）