Java教程

2021-1-17.1

本文主要是介绍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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KSH9TKyJ-1640183588851)(img/lifecycle.png)]

关于Vue更多

这篇关于2021-1-17.1的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航