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

2019独角兽企业重金招聘Python工程师标准>>>

一、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()：监听数据并会调

转载于:https://my.oschina.net/maliang1989/blog/3016938