vue生命周期及实例的属性和方法

vue的生命周期

vue实例从创建到销毁的过程，称为生命周期，共八个阶段

window.οnlοad=function(){

let vm = new Vue({

el:'#itany',

data:{//存储数据

msg:'welcome to itany'

},

methods:{

update(){

this.msg='欢迎来到北京！'

},

destroy(){

vm.$destroy();

}

},

beforeCreate(){

alert('组件实例刚刚创建，还未进行数据观测和事件配置');

},

created(){//常用

alert('实例已经创建完成，并且已经进行数据观测和事件配置');

},

beforeMount(){

alert('模板编译之前，还没挂载');

},

mounted(){

alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');

},

beforeUpdate(){

alert('组件更新之前');

},

updated(){

alert('组件更新之后');

},

beforeDestroy(){

alert('组件销毁之前');

},

destroyed(){

alert('组件销毁之后');

}

});

}

计算属性

基本用法

计算属性也是用来存储数据的，

a数据可以进行逻辑处理操作

b对计算属性中的数据进行监视

计算属性vs方法

将计算属性的get函数定义为一个方法也可以实现类似的功能

区别：

a，计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化

b，计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果。不会多次执行。

计算属性的组成get函数和set函数

分别用来获取计算属性和设置计算属性

默认只有get，如果需要set，要自己添加

vue实例的属性和方法

属性：

vm.$el

vm.$data

vm.$option

vm.$refs

方法：

vm.$mount()

vm.$destroy()

vm.$nextTick()

vm.$set()

vm.$delete()

vm.$watch()