vue组件声明周期的，使用场景

每个 Vue 实例在被创建时都要经过一系列的初始化过程

___例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，（这给了用户在不同阶段，添加自己的代码的机会）。

 这么多钩子函数，我们怎么用呢？
　　　　1、beforecreate : 举个例子：可以在这加个loading事件
　　　　2、created ：在这结束loading，还做一些初始化，实现函数自执行
　　　　3、mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
　　　　4、beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

 

什么是钩子：

　　　　在组件生命周期中，自动调用的函数 （也叫钩子函数）

 特别注意：

　　　　生命周期，钩子函数可以写在任何的组件内，子组件、父组件

 

 

<script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        categories: []
      },
      methods: {
        onLoadDataClick() {
          
        }
      },
      // 生命周期过程中自动调用的函数(钩子)
      created() {
        fetch('http://139.9.209.237/librarywebapi/category/list').then(res => {
            return res.json();
          }).then(res => {
            console.log(res);
            if(res.Code == 100){
              this.categories = res.Data;
            }
          });
      }
    });
  </script>
</body>

每个阶段，执行的钩子函数：

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div id="app" class="container">
    <input type="text" v-model="text">
    <button @click="text=Date.now()+''">修改text的值</button>
    <button @click="state=!state">显示｜隐藏</button>
    <page-header :title="text" v-if="state"></page-header>
  </div>
  <script src="lib/vue.js"></script>
  <script>

    const PageHeader = {
      props: {　　　　//props 属性对象: 通过属性方式，父组件向子组件传值
        title: String　　//这里要定义，传递数据的类型
      },
      template: `<div>
            <h2>{{title}}</h2>
            <p>{{localValue}}</p>
      </div>`,
      data() {
        return {
          localValue: 100,
          timer: null
        };
      },
      // 创建前的钩子
      beforeCreate() {
        console.warn('-------beforeCreate-------');
        console.log(this.localValue);
      },
      // 创建后的钩子
      created() {
        console.warn('-------created-------');
        console.log(this.title , this.localValue);
        console.log(document.querySelector('h2'));
      },
      // 挂载前
      beforeMount() {
        console.warn('-------beforeMount-------');
        console.log(this.title , this.localValue);
        console.log(document.querySelector('h2'));
      },
      // 挂载后
      mounted() {
        console.warn('-------mounted-------');
        console.log(this.title , this.localValue);
        console.log(document.querySelector('h2'));
        this.timer = setInterval(() => {
          console.log(this.localValue++);
        }, 1000);
      },
      // 更新前
      beforeUpdate() {
        console.warn('-------beforeUpdate-------');
      },
      // 更新后
      updated() {
        console.warn('-------updated-------');
      },
      beforeDestroy() {
        console.warn('-------beforeDestroy-------');
        clearInterval(this.timer);
      },
      destroyed() {
        console.warn('-------destroyed-------');
      }
    };

    new Vue({
      el: '#app',
      data: {
        state: false,
        text: ''
      },
      components: {
        PageHeader
      }
    });
  </script>
</body>
</html>

 

posted @ 2021-02-25 09:38  找个女人  阅读(246)  评论(0)    收藏  举报