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

vue⽣命周期及实例的属性和⽅法⼀、⽣命周期
beforeCreate：“组件实例刚刚创建，还未进⾏数据观测和事件配置”
created：“实例已经创建完成，并且已经进⾏数据检测和事件配置”
beforeMount：“模板编译之前，还没有挂载”
mounted：“模板编译之后，已经挂载，此时才会渲染页⾯，才能看到页⾯上数据的显⽰”
beforeUpdate：“组件更新之前”
updated：“组件更新之后”
beforeDestroy：“组件销毁之前”
destroyed：“组件销毁之后”
⼆、计算属性
1、基本⽤法
计算属性也是⽤来储存数据，但具有以下⼏个特点
a.数据可进⾏逻辑处理操作
b.对计算属性中的数据进⾏监视
2、计算属性 vs ⽅法
将计算属性的get函数定义为⼀个⽅法也可以实现类似的功能
a.计算属性是基于依赖进⾏更新的，只有在相关发⽣改变时才能更新变化
b.计算属性是缓存的，只要相关的依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执⾏
3、get和set
计算属性由两部分组成，get和set，分别⽤来获取计算属性得到的值是之前缓存得到的计算结果，不会多次执⾏
默认get，如果需要set需要⾃⼰添加
三、vue的实例属性和⽅法
1、属性
vm.$el//获取vue实例光联的元素
vm.$data//获取数据对象
vm.$options//⾃定义属性
vm.$refs//获取所有添加ref属性的元素
2、⽅法
a)、vm.$mount()//⼿动挂载vue实例
b)、vm.$destroy()//销毁实例
c)、vm.nextTick([callback])// 在DOM更新完成后在执⾏回调函数，⼀般在修改数据后使⽤⽅法，以便获取更新后的DOM
//修改数据
//DOM还没更新完，vue实现响应式并不是数据发⽣改变之后DOM⽴即变化，需要按⼀定的策略进⾏DOM更新，需要时间！！
d)、vm.$set(obj,key,value)//为对象添加属性并且指定值
this.obj.key=value;//通过普通⽅式为对象添加属性时vue⽆法实时监听到数据
vm.$set(obj,key,value)//通过vue实例的$set⽅法为对象添加属性，可以实时监视
e)、vm.$delete(obj,key)//删除对象属性
f)、vm.$watch(data)//检测数据的变化
1.⽅法⼀：使⽤vue实例提供的$watch()⽅法
vm.$watch('name',(newValue,oldValue)=>{})//监测“字符串”
vm.$watch('user',(newValue,oldValue)=>{},true)//监测“对象”
2.⽅法⼆：使⽤vue实例提供的watch选项
new Vue({
el:"#container",
data:{
name:"",
age:21,
user:{
id:1,
name:"⼩零"
}
},
watch:{
age:(newValue,oldValue)=>{},//监测“字符串”
user:{
handler:(newValue,oldValue)=>{
newValue,oldValue//取值⼀样，引⽤类型对象
},//监测“对象”
deep:true//深度监视，当对象中的属性发⽣变化时也会监视 }
}
})。