一、vue的监听
1.监听的例子
如：
html:<input type="number" v-model="a" />
js:
watch: {
//监听完整写法
// a: {
// handler: function(){
// console.log('a变化了2');
// }
// }
//a属性如果发生了变化，a配置函数就会执行
//简写
a: function (newVal, oldVal) {
console.log('a变化了1');
console.log(newVal, oldVal);
}
}
2.vue写一个定时器
methods: {
A: function () {
setInterval(() => {
this.obj.today = new Date;
}, 1000)
}
},
mounted: function () {
this.A();
}
3.vm实例的监听
//vm实例的方法，对vm的属性即相关的函数执行监听
// 参数1：监听的值
// 参数2：回调
vm.$watch(function(){
//this指向实例对象
var count = this.a + this.b;
return '';
}, function(newVal, oldval){
console.log("变化了");
console.log(newVal, oldval);
}, {
deep: true
});
二、实例的生命周期
methods: {
testAction(){
console.log('testAction调用');
},
modifyAction(){
console.log('修改');
this.message = 'hello world';
//属性发生变化，监听dom更新完成的事件
// 属性修改后，不要任何代码，执行监听
this.$nextTick(()=>{
console.log('nextTick执行');
});
console.log(this.message);
console.log(this.$refs.info1.innerText);
//更新轮播，滚动
},
updateAction(){
this.$forceUpdate();
}
},
//实例创建前，什么也做不了
beforeCreate(){
console.log('beforeCreate执行了');
// console.log(this.message);
// this.testAction();
},
created(){
console.log('created执行了');
// this.obj.name = '123456';
},
beforeMount(){
console.log('beforeMount执行了');
// console.log(document.querySelector('.info1').innerText);
// console.log(this.$refs);
// console.log(this.$refs.info1);
// console.log(this.$refs.info2);
},
mounted(){
console.log('mounted执行了');
console.log(document.querySelector('.info1').innerText);
console.log(this.$refs);
},
// 更新前，dom更新前
beforeUpdate(){
console.log('beforeUpdate执行了');
console.log(this.message);
},
//更新完成，dom更新后
updated() {
console.log('updated执行了');
console.log(this.message);
//更新轮播，滚动的事件
},
beforeDestroy(){
console.log('beforeDestroy执行了');
},
destroyed(){
console.log('destroyed执行了');
}
});
/*
创建:
1.new Vue();
2.读取生命周期函数
3.beforeCreate()
4.加载data,computed,watch,methods....添加属性的数据观测
5.created()
挂载:
6.判断是否有$sel/等待$mount()调用
7.beforeMount()
8.渲染dom结构
9.mounted()
//在mounted之后操作dom结构，但是不用使用document访问dom。
// 操作dom的方式使用ref给dom赋值，通过$refs访问
更新：更新的钩子函数中不要修改属性。
10.属性发生了变化
11.beforeUpdate() dom更新前
12.重新渲染dom，dom进行更新
13.updated() dom更新完毕
//如果数据变化，要操作更新后的dom结构，使用$nextTick()
// 销毁：
14:beforeDestroy()
15.移除事件监听，绑定
16.destroyed()
$refs:获得vm实例作用下的dom
$nextTick()数据发生变化后，监听dom更新完毕的事件
$forceUpdate()强制更新dom