初始化实例,不能使用data和methods、ref
beforeCreate: function () {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "data中的msg : " + this.msg); //undefined
console.log("%c%s", "color:red", "methods中的handleOpen方法 : " + this.handleOpen); //undefined
},
data和methods都已经被初始化好了,可以调用,但ref还是不行
created: function () {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 [object Object]
console.dir(this.$data)
console.log("%c%s", "color:red", "data中的msg : " + this.msg); //测试
console.log("%c%s", "color:red", "methods中的handleOpen方法 : " + this.handleOpen); //function () { [native code] }
},
开始挂载之前调用,相关的render函数首次被调用 此时的DOM是数据挂载前的DOM,数据还未挂载(将虚拟Dom转变成真实Dom的过程,所以在这之前,我们的el
当然还是拿不到的)虽然 $ref已被初始化,但还是拿不到值
beforeMount: function () {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "refs : " + this.$refs); //已被初始化
console.dir(this.$refs)
var _ref = JSON.parse(JSON.stringify(this.$refs))
console.log("%c%s", "color:red", "_ref : " + _ref); //已被初始化
console.dir(_ref)
console.log("%c%s", "color:red", "refs.myRef : " + this.$refs.myRef); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "data中的msg : " + this.msg); //已被初始化
console.log("%c%s", "color:red", "methods中的handleOpen方法 : " + this.handleOpen);//已被初始化
},
跑题·······················
大家看小颖在打印 $ref 时 又重新定义了一个_ref ,并且这个变量是深拷贝了 $ref 的,这是为 了方便大家能够看到在该钩子函数中 $ref 的值,如果大家不明白为什么,可以看下下面的代码
var a = 1;
var b = a;
a = 3
console.log(a)
console.log(b)
var a2 = {}
var b2 = a2
a2.c = '22'
console.log(a2)
console.log(b2)
看这个结果大家有没有发现变量 b
不会随着变量 a
的改变而改变,但是变量 b2
会随着变量 a2
的改变而改变,这是为什么呢?
因为 a
、 b
都是基本类型,而 a2
、b2
都是引用类型,基本类型存储的是值,引用类型存储的是一个指向对象真实内存地址的指针。在 js 中,对象包括Array Object Function RegExp Math等。
大家可以参考下:js对象赋值只保留存在的属性_夯实JS主要知识点
来来来,我们接着看vue的生命周期,不要被小颖带偏了哈哈哈
实例挂载完成,vue实例已经初始化完成,初始化的el被vm.$el替换(虚拟Dom已经挂载在了真实的元素上,所以从此开始我们就可以拿到el
)
mounted: function () {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.dir(this.$el)
console.log("%c%s", "color:red", "refs : " + this.$refs); //已被初始化
console.log("%c%s", "color:red", "refs.myRef : " + this.$refs.myRef);//已被初始化
console.dir(this.$refs)
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "data中的msg : " + this.msg); //已被初始化
console.log("%c%s", "color:red", "methods中的handleOpen方法 : " + this.handleOpen);//已被初始化
},
数据更新时调用,发生在虚拟DOM打补丁之前,这里适合更新之前访问现有的DOM,比如手动移除已添加的时间监听器,该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行 。
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
// 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
console.log(document.getElementById("myUl").children[2].innerHTML);
console.log(document.getElementById("myUl").children[3].innerHTML);
},
在数据驱动下导致的虚拟DOM重新渲染和打补丁之后调用,此时,组件DOM已经更新。只会在数据变更之后触发这个钩子函数。
updated: function () {
console.group('updated 更新完成状态===============》');
console.log(document.getElementById("myUl").children[2].innerHTML);
console.log(document.getElementById("myUl").children[3].innerHTML);
},
实例销毁之前调用,此时实例还可用
(清除定时器 / 解绑js定义的事件)
实例销毁后调用,实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁,
(清除定时器 / 解绑js定义的事件)
大家也可以看看:
Vue都使用那么久了,还不了解它的生命周期吗、了解Vue的生命周期、vue组件的生命周期讲解
后面的等晚上再写·················
手机扫一扫
移动阅读更方便
你可能感兴趣的文章