开发应该理清的vue2的生命周期（二）——$nextTick在生命周期的触发时机

最新推荐文章于 2024-09-24 10:01:00 发布
最新推荐文章于 2024-09-24 10:01:00 发布
阅读量909 收藏 11
点赞数 31
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65908792/article/details/141277355
版权

开发应该理清的vue2的生命周期（二）

$nextTick在生命周期的触发时机

开始之前，请先认真阅读一下官网关于“nextTick”的内容：

  1. API — Vue.js——Vue.nextTick
  2. API — Vue.js——vm.$nextTick
  3. 深入响应式原理 — Vue.js
  4. API — mounted——注意
  5. API — updated——注意

Vue.nextTick(callback)：回调函数callback将在 DOM 更新完成后被调用

本文章，将延续前篇文章[ 开发应该理清的vue2的生命周期（一） ]的测试代码的风格，看看“$nextTick在生命周期的触发时机”。

在本文章，本身组件的<template>标签的主要内容为“<h1 ref=“testRef”>{{ testData }}</h1>”。本组件在“created”和“mounted”生命周期改变了本组件的data值——testData，输出每次改变之前和之后的this.testData的值，同时输出this.$refs.testRef引用的<h1>Dom元素的textContent。且在“created”和“mounted”最后面，再通过使用$nextTick，再输出一遍。加入“beforeUpdate”和“updated”两个生命周期的触发输出。

测试代码

父组件：

// ParentComponent.vue
<template>
  <div>
    <!-- TestNextTickComponent -->
    <TestNextTickComponent/>
  </div>
</template>

<script>
import TestNextTickComponent from "./component/TestNextTickComponent.vue";
export default {
  name: "ParentComponent",
  components: { TestNextTickComponent }
}
</script>

本组件：

// TestNextTickComponent.vue
<template>
  <div class="app-container">
    <h1 ref="testRef">{{ testData }}</h1>
  </div>
</template>

<script>
export default {
  name: "TestNextTickComponent",
  data() {
    return {
      testData: "testData",
    };
  },
  created() {
    console.log("testNextTickComponent created");
    // 输出改变this.testData之前
    console.log(`before created change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent(); // 输出this.$refs.testRef引用的<h1>Dom元素的textContent
    // 改变this.testData
    this.testData = "testData change on testNextTickComponent created oneself";
    // 输出改变this.testData之后
    console.log(`after created change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent();
    // 在created中，使用$nextTick
    this.$nextTick(() => {
      console.log(`on nextTick (created), this.testData is "${this.testData}"`);
      this.showTestRefDomTextContent();
    });
  },
  mounted() {
    console.log("testNextTickComponent mounted");
    // 输出改变this.testData之前
    console.log(`before mounted change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent(); // 输出this.$refs.testRef引用的<h1>Dom元素的textContent
    // 改变this.testData
    this.testData = "testData change on testNextTickComponent mounted oneself";
    // 输出改变this.testData之后
    console.log(`after mounted change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent();
    // 在mounted中，使用$nextTick
    this.$nextTick(() => {
      console.log(`on nextTick (mounted), this.testData is "${this.testData}"`);
      this.showTestRefDomTextContent();
    });
  },
  beforeUpdate() {
    console.log("testNextTickComponent beforeUpdate");
  },
  updated() {
    console.log("testNextTickComponent updated");
  },
  methods: {
    // 输出this.$refs.testRef引用的<h1>Dom元素的textContent
    showTestRefDomTextContent() {
      if (!this.$refs.testRef) {
        console.log(`this.$refs.testRef is ${this.$refs.testRef}`);
      } else {
        console.log(`testRefDomTextContent is "${this.$refs.testRef.textContent}"`);
      }
    },
  },
};
</script>

测试结果（添加上注释，便于和测试代码对应，实际输出结果没注释部分）：

1. testNextTickComponent created
   // 输出改变this.testData之前
   before created change, this.testData is "testData"
   this.$refs.testRef is undefined
   // 输出改变this.testData之后
   after created change, this.testData is "testData change on testNextTickComponent created oneself"
   this.$refs.testRef is undefined

2. testNextTickComponent mounted
   // 输出改变this.testData之前
   before mounted change, this.testData is "testData change on testNextTickComponent created oneself"
   testRefDomTextContent is "testData change on testNextTickComponent created oneself"
   // 输出改变this.testData之后
   after mounted change, this.testData is "testData change on testNextTickComponent mounted oneself"
   testRefDomTextContent is "testData change on testNextTickComponent created oneself"

3. testNextTickComponent beforeUpdate
   testNextTickComponent updated
   
4. // 在created中，使用$nextTick
   on nextTick (created), this.testData is "testData change on testNextTickComponent mounted oneself"
   testRefDomTextContent is "testData change on testNextTickComponent mounted oneself"

5. // 在mounted中，使用$nextTick
   on nextTick (mounted), this.testData is "testData change on testNextTickComponent mounted oneself"
   testRefDomTextContent is "testData change on testNextTickComponent mounted oneself"

测试结果分析

  1. testNextTickComponent created
// 输出改变this.testData之前
before created change, this.testData is "testData"
this.$refs.testRef is undefined
// 输出改变this.testData之后
after created change, this.testData is "testData change on testNextTickComponent created oneself"
this.$refs.testRef is undefined
    • 本组件的“created”生命周期。testData被赋值了 “testData change on testWatchComponent created oneself”。
    • 由于在created，所以this.$refs.testRef 为 undefined，还不能访问真实Dom。
  2. testNextTickComponent mounted
// 输出改变this.testData之前
before mounted change, this.testData is "testData change on testNextTickComponent created oneself"
testRefDomTextContent is "testData change on testNextTickComponent created oneself"
// 输出改变this.testData之后
after mounted change, this.testData is "testData change on testNextTickComponent mounted oneself"
testRefDomTextContent is "testData change on testNextTickComponent created oneself"

    • 现在到本组件的“mounted”生命周期。testData被赋值了 “testData change on testWatchComponent mounted oneself”。

    • 由于已经在mounted，所以this.$refs.testRef 不为 undefined，可以访问真实Dom。在mounted里改变this.testData之前和之后，都访问到<h1>Dom元素的textContent为在created设置的新值——“testData change on testWatchComponent created oneself”。

    • 这时你可能会问，“假如本组件在created函数中，没将testData赋值 "testData change on testWatchComponent created oneself"呢？”

      更改如下：

        created() {
    console.log("testNextTickComponent created");
    // // 输出改变this.testData之前
    // console.log(`before created change, this.testData is "${this.testData}"`);
    // this.showTestRefDomTextContent(); // 输出this.$refs.testRef引用的<h1>Dom元素的textContent
    // // 改变this.testData
    // this.testData = "testData change on testNextTickComponent created oneself";
    // // 输出改变this.testData之后
    // console.log(`after created change, this.testData is "${this.testData}"`);
    // this.showTestRefDomTextContent();
    // 在created中，使用$nextTick
    this.$nextTick(() => {
      console.log(`on nextTick (created), this.testData is "${this.testData}"`);
      this.showTestRefDomTextContent();
    });
  },
  mounted() {
    console.log("testNextTickComponent mounted");
    // 输出改变this.testData之前
    console.log(`before mounted change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent(); // 输出this.$refs.testRef引用的<h1>Dom元素的textContent
    // 改变this.testData
    this.testData = "testData change on testNextTickComponent mounted oneself";
    // 输出改变this.testData之后
    console.log(`after mounted change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent();
    // 在mounted中，使用$nextTick
    this.$nextTick(() => {
      console.log(`on nextTick (mounted), this.testData is "${this.testData}"`);
      this.showTestRefDomTextContent();
    });
  },

      通过测试，输出的结果如下。

      1. testNextTickComponent created

2. testNextTickComponent mounted
   // 输出改变this.testData之前
   before mounted change, this.testData is "testData"
   testRefDomTextContent is "testData"
   // 输出改变this.testData之后
   after mounted change, this.testData is "testData change on testNextTickComponent mounted oneself"
   testRefDomTextContent is "testData"

3. testNextTickComponent beforeUpdate
   testNextTickComponent updated
   
4. // 在created中，使用$nextTick
   on nextTick (created), this.testData is "testData change on testNextTickComponent mounted oneself"
   testRefDomTextContent is "testData change on testNextTickComponent mounted oneself"

5. // 在mounted中，使用$nextTick
   on nextTick (mounted), this.testData is "testData change on testNextTickComponent mounted oneself"
   testRefDomTextContent is "testData change on testNextTickComponent mounted oneself"

      可以看到，重点为第2条发生了变化，在mounted里改变this.testData之前和之后，都访问到<h1>Dom元素的textContent为testData的默认值——“testData”。

  3. testNextTickComponent beforeUpdate
testNextTickComponent updated

    • 由于在“mounted”生命周期，testData改变了，所以Dom 被更新——触发了“beforeUpdate”和“updated”

    • 这时你可能会问，“假如本组件在mounted函数中，没将testData赋值 "testData change on testWatchComponent mounted oneself"呢？“beforeUpdate”和“updated”还会触发吗？”
      更改如下：

        created() {
    console.log("testNextTickComponent created");
    // 输出改变this.testData之前
    console.log(`before created change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent(); // 输出this.$refs.testRef引用的<h1>Dom元素的textContent
    // 改变this.testData
    this.testData = "testData change on testNextTickComponent created oneself";
    // 输出改变this.testData之后
    console.log(`after created change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent();
    // 在created中，使用$nextTick
    this.$nextTick(() => {
      console.log(`on nextTick (created), this.testData is "${this.testData}"`);
      this.showTestRefDomTextContent();
    });
  },
  mounted() {
    console.log("testNextTickComponent mounted");
    // 输出改变this.testData之前
    // console.log(`before mounted change, this.testData is "${this.testData}"`);
    // this.showTestRefDomTextContent(); // 输出this.$refs.testRef引用的<h1>Dom元素的textContent
    // // 改变this.testData
    // this.testData = "testData change on testNextTickComponent mounted oneself";
    // // 输出改变this.testData之后
    // console.log(`after mounted change, this.testData is "${this.testData}"`);
    // this.showTestRefDomTextContent();
    // 在mounted中，使用$nextTick
    this.$nextTick(() => {
      console.log(`on nextTick (mounted), this.testData is "${this.testData}"`);
      this.showTestRefDomTextContent();
    });
  },

      通过测试，输出的结果如下。

      1. testNextTickComponent created
   // 输出改变this.testData之前
   before created change, this.testData is "testData"
   this.$refs.testRef is undefined
   // 输出改变this.testData之后
   after created change, this.testData is "testData change on testNextTickComponent created oneself"
   this.$refs.testRef is undefined

2. testNextTickComponent mounted
   
3. // 在created中，使用$nextTick
   on nextTick (created), this.testData is "testData change on testNextTickComponent created oneself"
   testRefDomTextContent is "testData change on testNextTickComponent created oneself"

4. // 在mounted中，使用$nextTick
   on nextTick (mounted), this.testData is "testData change on testNextTickComponent created oneself"
   testRefDomTextContent is "testData change on testNextTickComponent created oneself"

      可以看到，假如本组件在mounted函数中，没将testData赋值 "testData change on testWatchComponent mounted oneself"时，“beforeUpdate”和“updated”没被触发。

      在“mounted”之后，在created中和mounted中使用的$nextTick的回调函数依次被调用了

  4. // 在created中，使用$nextTick
on nextTick (created), this.testData is "testData change on testNextTickComponent mounted oneself"
testRefDomTextContent is "testData change on testNextTickComponent mounted oneself"
    • 可以看到，在“updated”之后，在created中使用$nextTick的回调函数被调用了。
    • 访问到<h1>Dom元素的textContent为在mounted设置的新值——“testData change on testNextTickComponent mounted oneself”。
  5. // 在mounted中，使用$nextTick
on nextTick (mounted), this.testData is "testData change on testNextTickComponent mounted oneself"
testRefDomTextContent is "testData change on testNextTickComponent mounted oneself"
    • 可以看出，同样在“updated”之后，在mounted中使用$nextTick的回调函数被调用了，结果和“在created中使用$nextTick的回调函数被调用”的一致。

进一步思考

现在，你可以将三种情况下的测试结果（①created和mounted都更改testData；②仅created更改testData；③仅mounted更改testData）再进行一次比较，你将会更清楚“$nextTick在生命周期的触发时机”

现在，假如在created上模拟一次请求，然后更改this.testData，created函数更改如下：

created() {
    console.log("testNextTickComponent created");
    // 输出改变this.testData之前
    console.log(`before created change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent(); // 输出this.$refs.testRef引用的<h1>Dom元素的textContent
    // 改变this.testData
    this.testData = "testData change on testNextTickComponent created oneself";
    // 输出改变this.testData之后
    console.log(`after created change, this.testData is "${this.testData}"`);
    this.showTestRefDomTextContent();
    // 在created中，使用$nextTick
    this.$nextTick(() => {
      console.log(`on nextTick (created), this.testData is "${this.testData}"`);
      this.showTestRefDomTextContent();
    });
    
    // 新添加
    // 模拟请求，然后更改this.testData
    setTimeout(() => {
      this.testData = "testData change on setTimeout (created)";
      // 输出模拟请求后，改变this.testData之后，但不在使用$nextTick中
      console.log(`on setTimeout (created and setTimeout), this.testData is "${this.testData}"`);
      this.showTestRefDomTextContent();
      // 输出模拟请求后，改变this.testData之后，同时在使用$nextTick中
      this.$nextTick(() => {
        console.log(`on setTimeout (created 、setTimeout and nextTick), this.testData is "${this.testData}"`);
        this.showTestRefDomTextContent();
      });
    }, 5000);
  },

结果为：

先输出最开始的那个测试结果。

1. testNextTickComponent created
   // 输出改变this.testData之前
   before created change, this.testData is "testData"
   this.$refs.testRef is undefined
   // 输出改变this.testData之后
   after created change, this.testData is "testData change on testNextTickComponent created oneself"
   this.$refs.testRef is undefined

2. testNextTickComponent mounted
   // 输出改变this.testData之前
   before mounted change, this.testData is "testData change on testNextTickComponent created oneself"
   testRefDomTextContent is "testData change on testNextTickComponent created oneself"
   // 输出改变this.testData之后
   after mounted change, this.testData is "testData change on testNextTickComponent mounted oneself"
   testRefDomTextContent is "testData change on testNextTickComponent created oneself"

3. testNextTickComponent beforeUpdate
   testNextTickComponent updated
   
4. // 在created中，使用$nextTick
   on nextTick (created), this.testData is "testData change on testNextTickComponent mounted oneself"
   testRefDomTextContent is "testData change on testNextTickComponent mounted oneself"

5. // 在mounted中，使用$nextTick
   on nextTick (mounted), this.testData is "testData change on testNextTickComponent mounted oneself"
   testRefDomTextContent is "testData change on testNextTickComponent mounted oneself"

然后，大概过个5秒左右，再输出以下结果

6. // 输出模拟请求后，改变this.testData之后，但不在使用$nextTick中
   on setTimeout (created and setTimeout), this.testData is "testData change on setTimeout (created)"
   testRefDomTextContent is "testData change on testNextTickComponent mounted oneself"

7. testNextTickComponent beforeUpdate
   testNextTickComponent updated
   
8. // 输出模拟请求后，改变this.testData之后，同时在使用$nextTick中
   on setTimeout (created 、setTimeout and nextTick), this.testData is "testData change on setTimeout (created)"
   testRefDomTextContent is "testData change on setTimeout (created)"
ARuanLY
关注
专栏目录
vue中$nextTick的用法讲解
10-17
1. 在Vue生命周期钩子函数（如created、mounted等）中，DOM可能还没有渲染完成，直接操作DOM会得到错误的结果。这时候可以将DOM操作放在$nextTick的回调中进行。 2. 当你希望在数据更新之后执行某些依赖于DOM的代码...
Vue：nexttick是何方神圣？
yivisir的博客
11-29 145
Vue：nextTick是何方神圣？ 1. 官方定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 2. 解释 Vue.nextTick()其实主要用于生命周期里，当你在上一个钩子函数中需要处理下一个钩子函数层面的内容时，可将这些操作放在Vue.nextTick的回调函数中。当Vue实例进行到该钩子阶段时，会将nextTick中的操作放到下一个钩子阶段去进行，实现了延迟处理。 3. 举个例子 当你需要在created阶段对dom进行操作时，一
第四十二篇 nextTick
灵魂学者的博客
01-05 604
nextTick是什么呢？即在下次DOM更新循环结束之后执行延迟回调；在修改数据之后立即使用这个方法，获取更新后的DOM。在前面封装swiper组件当中，通过许多种方式方法，其一从mounted初始化过早转到updated后出现初始化重复，再者通过设置key值和使用v-if控制swiper组件，然后通过Vue.diretive自定义指令的方式来封装swiper组件，那么本篇的nextTick其实也是为封装swiper组件遇到的问题提供另外一种解决思路！
vue2的nextTick源码实现分析
qq_44472790的博客
03-24 1113
vue文件调用 1.eg mounted(){ this.title = '开心图书' this.$nextTick(()=>{ document.title = this.title }) } 源码部分 调用$nextTick函数执行 Vue.prototype.$nextTick = function (fn) { return nextTick(fn, this) }; 定义nextTick函数需要用到的变量 // 把$nextTick传入的函数push到callbac
【VUE3源码学习】nextTick 实现原理
ColdCoder的博客
02-15 4312
什么是nextTick? 定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
【Vue 2】nextTick方法|异步更新|事件循环
Shadow Kylin的博客
09-04 946
前面提到的事件循环又是什么？我们知道，JavaScript是一门单线程且非阻塞的语言。单线程意味着一次只能执行一个任务，也叫做主线程。非阻塞意味着遇到异步任务（比如网络请求、文件读取、定时器等）时，JavaScript会将这些异步任务挂起，继续执行后面的代码。当异步任务处理完毕后，根据一定的规则（通常是回调函数或Promise）来处理操作的结果。挂起（pending）是指将异步任务放入一个队列里，称为事件队列。而异步任务可以分为微任务和宏任务。微任务放在微任务队列，宏任务放在宏任务队列。
通过源码解析，理解vue2中data数据变更和nextTick到底发生了什么
一个无聊的程序员的琐碎
08-05 479
这里写自定义目录标题时间循环机制vue2中data数据变更是怎么触发dom修改的新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 时间循环机制 宏任务 平常正常执行的js代码 setTimeout setImmediat
vue created mounted this.$nextTick的使用场景
qq_41238459的博客
04-20 4691
created //组件创建之后 created() { // 可以操作数据，发送ajax请求，并且可以实现 // vue对页面的影响 应用：发送ajax请求 console.log('组件创建后：'+this.msg); //哈哈哈 } mounted //装载数据到DOM之后 mounted() { // 可以操作DOM ...
Vue中$nextTick,created和mounted的官方解释
qq_43031907的博客
11-13 5932
详解vue中$nextTick和$forceUpdate的用法
12-13
1、 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。 2、 因为在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将 DOM...
解决Vue中的生命周期beforeDestory不触发的问题
10-15
在使用Vue.js框架进行前端开发时，我们经常需要处理组件的生命周期钩子函数，以便在合适的时机执行特定的逻辑。在这些钩子函数中，beforeDestroy是一个用于在组件销毁前进行清理工作的函数。然而，在某些情况下，...
Vue2生命周期图解（详细）
03-31
Vue2生命周期图解（详细）
Vue中this.$nextTick的作用及用法
11-21
这一机制的实现涉及到多个关键概念，包括`this.$nextTick`，它在Vue的异步更新队列中扮演着重要角色。 首先，Vue在初始化组件时，会对`data`对象中的所有属性通过`Object.defineProperty`进行拦截，将其转换为...
Vue3通过$emit实现子向父传递数据
weixin_74261199的博客
09-23 400
子组件通过触发事件，并传递数据，父组件在使用子组件时就可以绑定子组件事件，在事件处理函数中拿到子组件传来的数据。
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 579
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
vue上传预览CAD文件
最新发布
只会写bug
09-24 535
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
vue复制信息到粘贴框
程序员一枚，仅记录工作中的难点
09-21 368
main.js文件引入。
计算机毕业论文基于VUE的贫困生助学信息审核管理系统开发与实现
计算机程序开发设计
09-23 891
贫困生助学审核信息管理系统旨在为学校提供一个高效、透明的平台，用于管理和审核贫困生的助学申请。系统主要分为三个角色：管理员、审核员和贫困生。每个角色有不同的权限和功能，以确保系统的正常运行和数据的安全性。
vue3nextTick与vue2$nextTick()区别
01-10
Vue 3中的`nextTick`与Vue 2中的`$nextTick()`有以下区别： 1. 语法：Vue 3中的`nextTick`是一个全局函数，而Vue 2中的`$nextTick()`是Vue实例的方法。 2. 上下文绑定：Vue 3中的`nextTick`不会自动绑定上下文，而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值