3、Vue实例的属性

大憨熊 提交于 2019-11-27 13:05:06

 

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属性没有返回值,所以不适合在表达式中使用

 

 

      案例学习:画一个圆

 

效果:

 

 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!