vue实例--创建函数--生命周期函数详解

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue.js"></script>
  <style>

  </style>
</head>

<body>
  <div id="app">

  </div>
  <script>
    var vm = new Vue({
      el: '#app', //获取所要使用的区域
      data: {}, //传入的数据
      methods: {}, //传入的方法
      router, //传入组件
      components: {}, //方法表示一个具体的操作，主要书写业务逻辑
      computed: {}, //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
      watch: {}, //一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体
      // ----------------------------------------------------------------------------------------------------------
      beforCreate() {
        //生命周期函数之一,表示实例完全创造之前会执行它
      },
      create() {
        //这是第二个生命周期函数,在create中data和methods都已经被初始化好了
        //如果要使用data和methods中的数据和方法,最早也只能在create中调用
      },
      beforeMount() {
        //这是第三个生命周期,表示模板已经在内存中编译完成了,但是尚未把模板渲染到页面中
        //在beforMount中执行的时候,页面中的元素还没有被替换过来,只是尚未替换的字符串,例如:{{msg}}
      },
      mounted() {
        //这是第四个生命周期,表示,内存中的模板已经真是的挂在到页面中,用户已经可以看到渲染好的页面了
        //例如在beforeMount中看到的是{{msg}},在mounted中可以是:你好!!

        // 注意:mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表明实例已经完全被创建好了
        // 此时,若没有其他操作的话,这个实例,就静静的躺在内存中一动不动
      },
      // 以上四个生命周期函数指的是vue组件实例的四个生命周期函数
      // ----------------------------------------------------------------------------------------------------------------
      // ----------------------------------------------------------------------------------------------------------------
      // 接下来的是运行 中的两个事件:只有当data数据发生改变时才能出发以下两个事件
      beforeUpdate() {
        //当执行beforUpdata的时候，页面中显示的数据是改变之前的数据，此时页面中的数据是新的，但是它尚未和页面同步，就是前一步操作
      },
      updated() {
        //updated执行的时候页面和数据已经同步，都是最新的数据
      },
      // ----------------------------------------------------------------------------------------------------------------
      // ----------------------------------------------------------------------------------------------------------------
      beforeDsetory() {
        //当执行beforeDsetory钩子函数的时候，vue实例就已经从运行阶段进入到了销毁及前端
        //当执行beforeDsetory的时候，实例身上所有的data和所有methods，以及过滤器，指令……都处于可用状态
        //此时，还没有真正执行销毁的过程
      },
      dsetoryed() {
        //当执行dsetoryed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器……都已经不可用了
      }
    })
  </script>
</body>

</html>
vue实例--创建函数--生命周期函数详解

猜你喜欢
