一.Vue实例:
var vm= new Vue({});
如何看生成的Vue实例呢?
在控制台直接输:vm 敲回车。就会显示出vm的实例对象
vm.$data
敲回车 ,就可以看到实例中data中的信息。
vm.$el
敲回车 就可以将实例负责接管的DOM元素输出来
vm.$destroy
敲回车 Vue实例就会被销毁,怎么看Vue实例被销毁了呢?给Vue实例的数据修改,例如:vm.$data.message = "byebye"
然后页面上不会有同步响应,因为Vue实例已经被销毁了,但是销毁之前绑定的属性和方法不会被销毁。
以vm.$
为首的就是Vue实例的属性和方法
二.Vue实例的生命周期钩子
在Vue官网我们可以看到Vue实例的生命周期图示,通过它可以很快学会Vue实例的生命周期函数
生命周期函数就是Vue实例在某个时间点会执行的函数
这些生命周期函数,并没有定义在methods中,而是直接定义在Vue实例中,值的注意。
常用的8个生命周期钩子:
① beforeCreate:在Vue实例创建之前执行的函数
② created:在Vue实例创建之后执行的函数
③ beforeMount: 在Vue实例创建之后,数据未渲染负责接管DOM之前执行的函数
④mounted :Vue实例将数据渲染到接管DOM元素之后执行的函数
⑤ beforeDestory:Vue实例在为销毁之前执行的函数
⑥ destroyed:Vue实例在执行vm.destroyed()命令之后,销毁之后执行的函数
⑦ beforeUpdata: 在Vue实例数据更新之前执行的函数
⑧ updated:在Vue实例数据更新之后执行的函数。
还有三个不常见的函数:activated、deactivated、errorCaptured
eg:
export default {
beforeCreate:function(){
console.log('beforeCreated')
},
created:function(){
console.log('created')
},
beforeMount:function(){
console.log('beforeMount')
},
mounted:function(){
console.log('mounted')
},
beforeUpdata:function(){
console.log('beforeUpdata')
},
updated:function(){
console.log('updated')
},
beforeDestroy:function(){
console.log('beforeDestroy')
},
destroyed:function(){
console.log('destroyed')
}
}
执行顺序: