Vue生命周期

Vue生命周期

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，就是一个组件所谓的生命周期。在组件中具体的方法有:

• beforeCreate 创建之前：已经完成了 初始化事件和生命周期
• created 创建完成：已经完成了 初始化注册和响应
• beforeMount 挂载之前：已经完成了模板渲染
• mounted 挂载之后：已完成HTML虚拟化，创建了el节点 可以操作DOM了
  • beforeUpdate
  • updated
• beforeDestroy 摧毁之前：整个vue都处在实时监控空渲染和更新
• destroyed 已摧毁，已经摧毁了观察者，子元素和事件监听
  

---

钩子函数

钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。钩子函数就是指再所有函数执行前，先执行了的函数，即钩住我感兴趣的函数，只要它执行，我就先执行。

var vm = new Vue({
  el: '#app',
  data: {
  // 定义变量source
    test: 0,
    b: [],
    message:'hello'
  },
  filters: {
  },
  //钩子函数位置
  mounted: function() {

   )
   })
  },
  methods: {
   //监听方法  click事件等，执行test等方法
      test: function() {
       alert(vm.message);
      }
      }
    }
});

el：选项的有无对生命周期过程的影响
首先系统会判断对象中有没有el选项，有el选项，则继续编译过程。没有el选项，则停止编译，也意味着暂时停止了生命周期，直到vm.$mount(el)出现。

Vue中的created

creadted钩子函数主要是用来初始化数据，在这个阶段页面还没有渲染为html。

Vue中的mounted

一般是用来向后端发起请求拿到数据以后做一些业务处理，配合路由钩子完成功能，在服务器端渲染期间不被调用，这个阶段Vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行。

Vue中的watch

监听一个值的变化，然后执行相对应的函数。

Vue中的computed

计算属性，也就是依赖其它的属性计算所得出最后的值。

beforeUpdate和updated

在Vue中，数据更改会导致虚拟 DOM 重新渲染，并先后调用beforeUpdate钩子函数和updated钩子函数，重渲染（调用这两个钩子函数）的前提是被更改的数据已经被写入模板。

---

链接: Vue生命周期

END