VUE生命周期函数使用场景

生命周期运用场景

created：进行ajax请求异步数据的获取、初始化数据
mounted：挂载元素内dom节点的获取
nextTick：针对单一事件更新数据后立即操作dom
updated：任何数据的更新，如果要做统一的业务逻辑处理
watch：监听具体数据变化，并做相应的处理

nextTick

作用：使用该函数可DOM操作（在修改数据之后立即使用这个方法，获取更新后的 DOM，进行操作）
          通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它，对新DOM的js操作
          都需要放进Vue.nextTick()的回调函数中；
          
使用场景：修改DOM数据时需要同时更新页面

示例1：

  created() {
    let that = this;
    that.$nextTick(function () {
      //不使用this.$nextTick()方法会报错，Dom不更新内容
      that.$refs.aa.innerHTML = "created中更改了按钮内容"; //写入到DOM元素
    });
  }

示例2：

 methods:{
     changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //修改dom结构
       
      that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
        let domTxt=document.getElementById('h').innerText; 
        console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，
        if(domTxt==="原始值"){
          console.log("文本data被修改后dom内容没立即更新");
        }else {
          console.log("文本data被修改后dom内容被马上更新了");
        }
      });
    },
  }

created（使用频率高）

实例被创建完成后调用
* 能拿到数据，能修改数据，
* 且修改数据不会触发updated beforeUpdate钩子函数
* 可以在这个钩子函数里发请求，访问后端接口拿数据
* 判断是否存在el，是否存在template，如果二者都有，以template为主优先， 如果 没有template,会选择el模板。
  如果二者都没有，有$mount 也可以调用模板

beforeMount

    真实的dom节点挂载到页面之前
    编译模板已经结束，虚拟dom已经存在，
    可以访问数据，也可以更改数据
    且修改数据不会触发updated beforeUpdate钩子函数
    在beforeMount和mounted之间隐藏了一个render函数，千万不能写，会覆盖系统函数

mounted（挂载）

真实的dom节点挂载到页面以后
this.$refs找到ref表示的节点
<button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>

var value = this.$refs.aa.innerText
可以访问和更改数据
且修改数据会触发updated beforeUpdate钩子函数

beforeUpdate(更新前)

修改之前调用

updated（更新后）

* 修改之后调用
* beforeUpdate 、updated 可以监控data里的所有数据变化
* 不要在update beforeUpdate修改不定数据，否则会引起死循环
* 监听data里的所有的数据，非updated莫属

beforeDestroy（销毁前）

• 实例卸载以前调用，可以清理非vue资源,防止内存泄露

destroyed（销毁后）

activated （使用频率较低） keep-alive 缓存组件时候调用

deactivated （缓存组件卸载的时候调用）

watch: 监听特定值的变化，监听路由参数的变化，用函数的形式不能监听对象的变化 （与updated对立）