Vue生命周期相关

1. Vue生命周期是什么?

vue实例从建立到销毁,也就是从建立--初始化数据--编译模板--挂载Dom->渲染--更新->渲染--卸载等一系列过程

2.Vue生命周期钩子函数有哪些?

• beforeCreate -- 建立阶段的第一个生命周期函数 当执行到beforeCreate钩子函数的时候,当前的Vue实例的data数据和methods方法,都尚未初始化完成,所以这个函数对开发的实际意义不大.
• created(重要) -- 建立阶段的第二个生命周期函数 .当执行到created生命周期函数的时候,实例中的data数据和methods方法,都已经被初始化完毕了,能够被正常的访问,在项目开发中,若是是首屏的ajax请求,都须要在该钩子函数中发起请求
• beforeMount -- 建立阶段的第三个生命周期函数.执行到这个生命周期的时候,此时浏览器中的页面仍是假的页面,并非真正带有数据的页面
• mounted 建立阶段的第四个生命周期函数,表明页面已经完成了首次渲染,此时已经把页面上的模板结构,替换到内存中,带有真实数据的页面(初始化的代码必定要写到mounted中)
• beforeUpdate(运行阶段的生命周期函数) --将要根据最新的data数据,重新解析全部指令,从而从新渲染到浏览器页面中,这时data中的数据是最新的,可是页面依旧是旧的页面
• updated(运行阶段的生命周期函数) 此时页面已经完成了更新,此时data中的数据和页面都是最新的
• activated keep-alive组件激活时调用.该钩子在服务器渲染期间不被调用
• deactivated keep-alive组件停用时调用.该钩子在服务器渲染期间不被调用
• beforeDestroy 实例销毁以前调用,实例依然是可使用的
• destroyed Vue实例销毁后调用Vue实例指令的全部东西都会接触绑定,全部事件都会被移除,全部的子实例也会被销毁
• errorCaptured(2.5.0+ 新增)当捕获一个来自子孙 组件的错误时被调用,有三个参数:错误对象,发生错误的组件实例以及一个包含错误来源信息的字符串.此钩子能够返回false以阻止该错误继续向上传播.

3.Vue的dom操做

• 给要操做的标签设置ref属性
• 在 mounted方法中获取要操做的dom
• 经过this.$refs获取要操做的dom

示例: 
    const vm = new Vue({
        mounted() {
            this.$refs.dom // 进行相关操做
        }
    })
    
复制代码