Vue----生命周期钩子函数什么是生命周期Vue的实例具有生命周期Vue的实例在生成过程中会经历一系列初始化的过程数据

什么是生命周期

Vue 的实例具有生命周期 Vue的实例在生成过程中会经历一系列初始化的过程数据的监听编译模板实例挂载DOM元素或者数据更新导致DOM更新在执行过程中会运行生命周期的钩子函数
实例在生命周期中特定的时间点执行的函数称为生命周期的钩子函数 生命周期不能人为控制执行顺序

常用的生命周期

beforeCreate 在实例初始化之后数据观测（data observer）和 watch配置之前被调用
created 实例创建完成后调用在这一步已经完成数据观测属性和方法的运算 watch事件的回调但是现阶段还没有挂载
beforeMount 在挂载开始之前被调用创建虚拟DOM
mounted 把虚拟DOM 挂载到真实的DOM上在Vue中获取DOM元素对象项目中AJAX请求一般都会在这里或者created中发送
beforeUpdate 当数据发生变化时会触发这个函数
updated 数据更改导致虚拟DOM重新渲染和打补丁在这之后会调用updated
beforeDestory 在实例被销毁之前调用若页面中有定时器会在这个钩子函数中清除
destroyed 实例销毁之后调用实例中的属性再也不是响应的 watch被移除


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <div @click="fn">{{msg}}</div>
</div>

<script src="vue.js"></script>
<script>
  // 生命周期：
  // Vue 的实例具有生命周期，Vue 的实例在生成的时候，会经历一系列的初始化的过程；数据的监听，编译模板，实例挂载DOM元素，或者数据更新导致 DOM 更新，在执行的过程中，会运行一些叫做生命周期的钩子函数，在 Vue 实例生命周期中特定的时间点执行的函数称为生命周期的钩子函数；

  // 如果我们需要在某个生命周期处理一些事情，我们可以把这些事情写在钩子函数中；等到 Vue 的实例生命周期到这个阶段就会执行这个钩子，而我们要做的事情也就得以处理了
  // 生命周期的钩子函数不能人为的控制其执行的顺序；

  let vm = new Vue({
    data: {
      msg: 'hello'
    },
    methods: {
      fn() {console.log(11111)}
    },
    beforeCreate() {
      // 在实例初始化之后，数据观测 (data observer) 和 watch 配置之前被调用。
      console.log(1);
      console.log(this.msg);
      console.log(this.$el); // this.$el 是根 DOM 元素
    },
    created() {
      // 在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算、watch/event 事件回调
      // 但是在现阶段还没有开始挂载，即还没挂载到根 DOM 元素上，所以 this.$el 属性不可见
      console.log(2);
      console.log(this.msg);
      console.log(this.$el);
    },
    beforeMount() {
      // 在挂载开始之前被调用，创建虚拟DOM（Virtual-DOM）；虚拟 DOM 不是真实的 DOM 元素，而是 js 对象，其中包含了渲染成 DOM 元素信息；
      console.log(3);
      console.log(this.msg);
      console.log(this.$el);
    },
    mounted() {
      // 把 Vue 的虚拟DOM挂载到真实的 DOM 上；
      // 如果要在 Vue 中获取 DOM 元素对象，一般在这个钩子中获取
      // 项目中的 ajax 请求一般会在这里或者 created 里发送；
      console.log(4);
      console.log(this.msg);
      console.log(this.$el);
    },
    // 只有当数据发生变化时，才会触发这个函数；
    beforeUpdate() {
      console.log(5)
    },
    updated() {
      // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
      console.log(6);
    },
    beforeDestroy() {
      // 在 Vue 的实例被销毁之前调用，如果页面中有定时器，我们会在这个钩子中清除定时器；
      console.log(7);
    },
    destroyed() {
      // Vue 实例销毁后调用，实例中的属性也不再是响应式的，watch 被移除
      console.log(8);
    }
  });

  vm.$set(vm, 'msg', 'hello world'); // 因为 Vue 的数据都是响应式的，只有修改数据才会触发 beforeUpdate 和 updated 钩子


  vm.$mount('#app'); // 当创建实例时不传递 el 属性，可以手动挂载到 DOM 节点；

  vm.$destroy(); // 手动销毁实例；

</script>
</body>
</html>

refs 和 DOM操作

ue 是数据驱动不提倡操作DOM 但是有时候必须操作DOM 因此VUE 提供了一个行内属性来获取DOM vm.$refs 是Vue提供的实例专门用来获取DOM元素的

refs 的使用

在需要获取的标签内添加ref = "标识符" 行内属性然后在Vue的实例中通过vm. $refs.标识符获取这个元素 **若有多个相同的标识符的ref vm.$ refs将会获得一个数组**

异步DOM的更新和 nextTick

Vue 的DOM 更新是异步的若我们想重新获取更新数据后的渲染出来的DOM我们需要使用nextTick


this.$nextTick(callback)

callback 放到DOM更新后执行

template属性指定HTML中的模板id 或以字符串形式声明模板这个标签不会被渲染出来

以HTML模板形式


<template id = 'p1'>
<div>
<p v-for = "(a,i) in arr">{{a}}</p>
</div>
</template>

let vm = new Vue({
    el:'#app',
    data:{
        msg:'aaaa',
        arr:[1,2,3,4]
    },
    //template:'#p1' //HTML模板形式
    template:`<div><p v-for = "(a,i) in arr">{{a}}</p></div>` //模板字符串
})

注意事项

template:<div><p v-for = "(a,i) in arr">{{a}}</p></div> 或 template:'#id'
template 属性渲染后会把根DOM元素替换掉
template 标签只能有一个子元素

Vue----生命周期钩子函数