监视属性watch()
*watch:[
isHot:[
immediate：true，//初始化时thandler 调用-下
//handler什么时候调用？当isHot发生改变时
handler（newValue，oldValue）
console.log（'isHot被修改了"，newValue，oldValue）
第二种方法
vm.$watch("isHot" {
immediate：true，//初始化时thandler 调用-下
//handler什么时候调用？当isHot发生改变时
handler（newValue，oldValue）
console.log（'isHot被修改了"，newValue，oldValue）
})
- 监视属性watch：
- 1，当被监视的属性变化时，回调两数自动调用，进行相关操作2，监视的属性必须存在，才能进行监视！！
- 3，监视的两种写法：
- （1）.new Vue时传入watch配置
- （2）.通过vm.$watch监视 深度监视
- （1）.Vue中的watch默认不监测对象内部值的改变（一层（2）.配置deep:true可以监测对象内部值改变（多层）
- 。
- 备注：
- （1）.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
- （2）.使用watch时根据数据的具体结构，决定是否采用深度监视。
- 当deep改为true时，深度监视开启
watch:{
Numbers.:{
deep:true,
handler(){
console.log(a被改变了);
}
}
}
Vue的八大生命周期钩子函数
/* Vue的八大生命周期钩子函数 */
/* 区别之一：执行顺序的问题 beforeCreate>created>beforeMount>mounted */
new Vue({
el:"#app",
data:{
msg:'我爱Vue',
time:0,
timeId:null
},
/* Vue实例化对象创建之前 */
beforeCreate() {
/* 实例化对象创建之前是获取不到data里面的数据的 */
console.log('beforeCreate',this.msg)
},
/* Vue实例化对象创建之后 */
created() {
/* 实例化对象创建之后可以获取data里面的数据 */
/* 实例化对象创建之后不可以获取到dom包括根节点 */
console.log('created',this.msg,this.$el)
/* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
// this.timeId = setInterval(()=>{
// this.time++;
// console.log(this.time)
// },500)
},
/* Vue的dom挂载之前 */
beforeMount() {
/* dom挂载之前可以获取到根节点 */
/* beforeMount还没有把data中的数据渲染到dom节点上 */
console.log('beforeMount',this.$el)
},
/* Vue的dom挂载之后 */
mounted() {
/* mounted已经把data中的数据渲染到了dom节点上 */
console.log('mounted',this.$el)
/* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
},
/* Vue的data值更新前 */
/* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated */
/* 顺序上 beforeUpdate执行顺序优先于updated */
beforeUpdate() {
console.log('beforeUpdate',this.msg,this.$el)
},
/* Vue的data值更新后 */
updated() {
console.log('updated',this.msg,this.$el)
},
/* Vue组件销毁前 */
/* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
/* 执行顺序上beforeDestroy优先于destroyed执行 */
/* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
beforeDestroy() {
console.log('beforeDestroy',this.msg,this.$el)
},
/* Vue组件销毁后 */
destroyed() {
console.log('destroyed',this.msg,this.$el)
clearInterval(this.timeId)
},
methods: {
change(){
this.msg = '我爱React'
},
destroy(){
this.$destroy();
}
},
})
