[JavaScript知识库] 2021-1-17.1

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 2021-1-17.1 -> 正文阅读

[JavaScript知识库]2021-1-17.1

作者:>

id: vue1
title: Vue实例生命周期
author: triumph
author_title: Vue生命周期
author_url: https://github.com/triumph-star
author_image_url: https://avatars1.githubusercontent.com/u/62491299?s=460&u=5ac99fc28c82063aa357d074bfe184e50f10a4b4&v=4
tags: [Vue]

Vue实例的生命周期

生命周期:从实例创建、运行到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期.
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，
生命周期钩子：就是生命周期事件的别名

主要的生命周期函数：

被创建期间的生命周期函数:
+ beforeCreate()：实例在内存中被创建出来，此时，还没有初始化data和methods属性
+ created(): 实例已经在内存中创建完成，此时data和methods已经创建完成,此时还没有开始编译模板
+ beforeMount():此时已经完成了模板的编译,但是还没有挂载到页面中
+ mounted():此时，已经将编译好的模板，挂载到了页面指定的容器中显示

运行期间的生命周期函数：
+ beforeUpdate(): 状态更新之前执行次函数，此时data中的状态是最新的，但是界面数据并未更新，因为此时还未重新渲染DOM节点
+ updated():实例更新完成后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新。界面也已经被重新渲染完成。

销毁期间的生命周期函数：
+ beforeDestroy: 实例销毁之前调用，此时，实例仍然可以可用。
+ destroyed: Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会被解绑，事件监听器被全部移除，所有子实例也一样。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>Vue生命周期</title>
</head>

<body>
  <div id="app">
    <h1 id="h1">{{msg}}</h1>
    <button @click="msg='react'" >修改</button>
  </div>
</body>

</html>
<script>
  /*创建Vue实例，得到viewModel*/
  const vm = new Vue({
    el: "#app",
    data: {
      msg: "Vue"
    },
    methods: {
      show() {
        console.log('执行了show()');
      }
    },
    beforeCreate() { //实例完全被创建出来之前，会执行它
      console.log("实例被创建之前");
      // this.show();
      // console.log(this.msg);
      // 在此阶段，data和methods()均未初始化
    },
    created() { //实例创建完成调用
      console.log("实例被创建");
      // console.log(this.msg);
      // this.show();
      // 
    },
    beforeMount() {//此时，模板已经存在内存中编辑完成了。但是尚未把模板渲染到页面中
      console.log("实例被挂载之前");
      // const renderText = document.querySelector('h1').innerText;
      // console.log(renderText);
      //在此时，页面中的元素，还未真正被替换过来，只是之前写的一些模板字符串
    },
    mounted() {//此时，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
      console.log("实例挂载完成");
      // const renderText = document.querySelector('h1').innerText;
      // console.log(renderText);
      //此函数是 实例创建期间的最后一个生命周期函数，当执行完后，表明，实例已经被完全创建完成，如果无更新内容一直在内存中
    },
    beforeUpdate() {//此时页面还没被更新，数据已经更新
      console.log("更新data");
      // const renderPageText = document.querySelector('h1').innerText;
      // console.log('页面内容:' + renderPageText);
      // console.log('data中的数据' + this.msg);
    },
    updated() {
      console.log("同步data和页面数据");
      // const renderPageText = document.querySelector('h1').innerText;
      // console.log('页面内容:' + renderPageText);
      // console.log('data中的数据' + this.msg);
      //此时页面和data数据已经保持同步啦
    },
    beforeDestroy() {
      //console.log("执行销毁实例之前");
      // const renderPageText = document.querySelector('h1').innerText;
      // console.log('页面内容:' + renderPageText);
      // console.log('data中的数据' + this.msg);
      
    },
    destroyed() {
      //console.log("实例已经销毁");
    },

  });
</script>

此段来自

常用的生命周期方法：create()/mounted():常用于发送Ajax请求启动定时器等异步任务，beforeDestory()：常用于做一些收尾工作，例如关闭定时器；

<body>
    <div id="app">
        <button @click= "destroyVm">点击我取消Vue实例</button>
        <p v-show = "isShow">我是四川码酱</p>
    </div>
    <script src="js/vue.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                isShow: true
            },
            beforeCreate() {
                console.log("我是beforeCreate方法，我被执行了");
            },
            created() {
                console.log("我是created方法，我被执行了");
            },
            beforeMount() {
                console.log("我是beforeMount方法，我被执行了");
            },
            mounted(){ // 初始化显示之后立即调用，也是执行一次
                this.intervalId = setInterval(() =>{
                    console.log("=====");
                    this.isShow = !this.isShow;
                }, 1000)
            },
            beforeUpdate() {
                console.log("我是beforeUpdate方法，我被执行了");
            },
            updated() {
                console.log("我是updated方法，我被执行了");
            },
            beforeDestroy() { // 死亡之前回调一次
            console.log("我是beforeDestroy方法，我要被销毁了");
                // 清除定时器
                clearInterval(this.intervalId)
            },
            destroyed() {
                console.log("我是destroyed方法，我被执行了");
            },
            methods: {
                destroyVm(){
                    this.$destroy();
                }
            }
        })
    </script>
</body>