vue生命函数钩子

1,153 阅读1分钟

今天在优化项目中,document.getElementById获取不到dom,当时只是想是不是单词写错了,经过检查又没问题,到底问题出现在哪里呢?突然看到获取dom的方法写在了created里面,找到了问题所在,把方法重新写在mounted里面就解决了问题。现在还是想把几个生命函数钩子都整理一下

1、beforeCreadted
    vue实例的挂载元素$el和数据对象data都为undefined,还未初始化但可
    以加loading事件。this变量还不能使用,在data下的数据,和methods
    下的方法,watcher中的事件都不能获得到;这个时候的vue实例还什么都
    没有,但是$route对象是存在的,可以根据路由信息进行重定向之类的操
    作。
2、created	
    vue实例的数据对象data有了,$el还没有挂载,结束loading、请求数据为
    mounted渲染做准备。这个时候可以操作data里的数据和方法。但是不能
    操作dom
3、beforeMount	
    vue实例的$el和data都初始化了,但还是虚拟的dom节点。我的理解就是
    正在渲染dom中,页面渲染所需要的数据应尽量在这儿之前完成赋值
4、mounted	
    vue实例挂载完成,可以正常的操作dom
5、beforeUpdate	
    data更新时触发,可以修改data不会造成再次渲染	
6、updated	
    data已经更新,数据更新时,做一些处理(此处也可以用watch进行观测
    ),但是不能修改data,会陷入死循环
7、beforeDestroy	
    组件销毁时触发,这时候实例还是可以使用,可以做一些校验和判断
8、destroyed	
    组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了)
    ,但DOM节点依旧存在(手动删除),组件销毁时进行提示