Vuejs2.0学习笔记-生命周期以及实例的属性和方法

原创
2019/03/01 23:06
阅读数 19

一、Vue的生命周期

  • Vue实例从创建到销毁的过程,称为生命周期

二、计算属性 计算属性也可以用来存储数据,但是有以下特点: a). 数据可以进行逻辑处理操作; b). 对计算属性中的数据进行监视;

特性1: 在计算属性中存储数据,需通过get函数的方式,不能直接存储数据

特性2: 对存储的数据进行逻辑处理操作;(在html模版中虽然可以进行逻辑处理操作,但是在模版中加入了太多的逻辑处理,将会导致模版不清晰,希望将数据在model里面处理完后再在view里显示) 特性3:计算属性是基于它的依赖(vue实例数据)进行更新的,只有在相关依赖发生改变时才能更新变化;计算数据是缓存的,只要它的依赖没有变化,多次访问计算属性得到的值是之前缓存的计算结果,不会多次执行。

get和set 通过以上代码可知:计算属性仅能通过它的依赖的更新进行变化;如果加一个set函数是否能够直接修改计算属性的值呢?答案是不能的,但是set函数可以修改计算属性的依赖,从而使得get函数触发调用;

Step1: 通过button事件调用js函数修改计算属性的值; Step2: 调用setter函数完成修改; Step3: setter函数修改了被计算属性侦听的“Vue实例属性”,则会触发getter函数的自动调用。 Step4: 页面所有的计算属性都会自动刷新。

打开网页:

点击“修改”按钮

三、Vue实例的属性和方法 3.1 属性

vm.$el : 获取绑定的DOM元素
vm.$data : 获取vm数据对象
vm.$options : 获取选项中自定义的属性
vm.$refs:获取所有注册过ref特性的所有DOM元素组件实例

3.2 方法

vm.$mount() : 实现手动挂在vue实例
vm.$destroy() : 实现vue实例的销毁
vm.$nextTick() :  在修改vm实例数据后立即调用这个方法,获取更新后的DOM对象

vm.$set(): 为对象添加一个属性
vm.$delete():删除对象的一个属性
vm.$watch():监听数据并会调

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部