vue组件生命周期有哪些?vue2和vue3的生命周期图牢记于心,附面试题1

2023-11-17

【单选题】关于vue组件生命周期说法错误的是()

A. 在data中的对象的某个属性和input双向绑定,修改input的值,在beforeDestroy中获取的值是修改过后的值

B. ajax请求可以放在created钩子函数中

C. 在created钩子函数中操作DOM,可以将语句放在$nextTick中

D. 父子组件生命周期的执行顺序是父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、父亲mounted、孩子mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed

先独立思考

正确答案:D

解析:

父子组件生命周期的执行顺序是父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、孩子mounted、父亲mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed。孩子的mounted早于父亲mounted

知识点扩展

vue生命周期是什么?

vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能

vue生命周期的八个阶段

以上是vue2.x和vue3的生命周期图

(要求牢牢记在心中)

1、beforeCreated

会在实例初始化完成、props解析之后、data()和computed等选项处理之前立即调用。此时不能获取DOM节点。

2、created

在这个阶段vue实例已经创建,以下内容已经设置完成:响应式数据、计算属性、方法和侦听器。然而,此时挂载阶段还未开始,因此$el属性仍不可用。仍然不能获取Dom元素。

3、beforeMounted

在组件内容被渲染到页面之前自动执行的函数,组件已经完成了其响应式状态的设置,但还没有创建DOM节点

4、mounted

在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已经被渲染出来了。

5、beforeUpdate

数据变化的时候自动执行的函数,此时变化后的数据还未渲染到页面之上。

6、undated

数据变化之后自动执行的函数,此时变化后的数据已经渲染到页面之上。

7、beforeUnmount(beforeDestroy vue2.x

当Vue应用被销毁时,自动执行的函数

8、unmounted(destroyed vue2.x

当Vue应用被销毁后,且dom完全销毁之后,自动执行的函数。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue组件生命周期有哪些?vue2和vue3的生命周期图牢记于心,附面试题1 的相关文章

  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记
  • Eslint errorring 导入没有扩展名的 jsx

    我正在尝试在 es6 中导入 jsx 文件而不需要 jsx 扩展名 import LoginErrorDialog from LoginErrorDialogView Not import LoginErrorDialog from Log
  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 在重复内容区域添加

    我有一个菜单组件 简单地说 它接受一个带有一系列选项的道具 并为每个选项在菜单中呈现一个项目 我希望能够根据用例自定义每个菜单项内的标记 因此我在菜单项元素内使用了占位符 你可以在这个中看到一个例子fiddle https jsfiddle
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 日期出现奇怪的错误,“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 将 CKEditor 5 与 nuxtjs 结合使用

    我正在尝试在我的 Nuxtjs 项目中导入 CKEditor 5 的自定义版本 并且我已经尝试了所有可能的方法来正确导入它 但没有一个对我有用 这是其中之一 let ClassicEditor let CKEditor if process
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

随机推荐

  • QT信号槽连接方式

    1 QT信号槽主要分两个连接方式 手动和自动 1 1 使用 connect 函数手动连接信号和槽 QObject connect sender SIGNAL signal receiver SLOT slot 自动 1 2 使用 lambd
  • 模板类与函数

    模板类与函数 普通函数 参数和返回值是模板类的实例化版本 函数模板 参数和返回值是某种的模板类 函数模板 参数和返回值是任意类型 支持普通类和模板类和其它类型 模板类可以用于函数的参数和返回值 有三种形式 普通函数 参数和返回值是模板类的实
  • 运用Cookie技术,统计访问次数以及上次访问时间。

    package servlet import java io IOException import java io PrintWriter import java text SimpleDateFormat import java util
  • mysql已经配置且正确_mysql8 参考手册-Connector/J应用程序进行故障排除-1

    16 1 当我尝试使用MySQL Connector J连接到数据库时 出现以下异常 SQLException Server configuration denies access to data source SQLState 08001
  • 【Web自动化测试——代码篇】常用方法——切换

    方法总览 多表单切换 当一个页面存在frame iframe表单嵌套时 WebDriver却只能在一个页面上对元素识别定位 但是对于表单上的嵌套元素无法直接定位 这时候该怎么办呢 Java 1 package JavaTest 2 3 im
  • PAT乙级1042 字符统计 (20 分)

    1042 字符统计 20 分 一 问题描述 请编写程序 找出一段给定文字中出现最频繁的那个英文字母 输入格式 输入在一行中给出一个长度不超过 1000 的字符串 字符串由 ASCII 码表中任意可见字符及空格组成 至少包含 1 个英文字母
  • 23.07.12作业

    思维导图 计算题
  • Provider提供者模式与策略模式的比较

    在这篇文章Provider和Factory的区别 作者提到 可以往工厂里面添加Provider 也就是说Factory里面可能存在着许许多多的Provider 而这些Provider将是最后Factory创建出结果的必要支撑 可以理解为提供
  • 开启硬件加速 导致花屏问题 OpenGlRenderer 0x506 解决办法

    150114 17 08 32 461 I dalvikvm heap 850 Grow heap frag case to 10 342MB for 2457616 byte allocation 150114 17 08 32 542
  • Python实现基于朴素贝叶斯的垃圾邮件分类

    听说朴素贝叶斯在垃圾邮件分类的应用中效果很好 寻思朴素贝叶斯容易实现 就用python写了一个朴素贝叶斯模型下的垃圾邮件分类 在400封邮件 正常邮件与垃圾邮件各一半 的测试集中测试结果为分类准确率95 15 在仅仅统计词频计算概率的情况下
  • 解决Debian系统自动更新软件包的问题

    解决Debian系统自动更新软件包的问题 参考文章 1 解决Debian系统自动更新软件包的问题 2 https www cnblogs com nkqlhqc p 11978565 html 备忘一下
  • android添加依赖出现问题

    出现该问题unspecified on project app resolves to an APK archive which is not supported as a compilation dependency的情形可能是 创建了两
  • hduoj 2010

    水仙花数 Problem Description 春天是鲜花的季节 水仙花就是其中最迷人的代表 数学上有个水仙花数 他是这样定义的 水仙花数 是指一个三位数 它的各位数字的立方和等于其本身 比如 153 1 3 5 3 3 3 现在要求输出
  • 文件系统---代码层次深入分析文件系统

    文件系统对用户来说 最重要的就是创建目录 创建文件 打开文件 和 文件读写 对通常的硬盘文件系统来说 涉及硬盘的读写和硬盘空间管理 从读写文件系统层一直到通用设备层再到硬盘驱动 为了简化 我们给出最简单文件系统 通过这个例子导入文件系统的概
  • uniapp 在app和小程序端使用webview进行数据交互

    结论 app端支持比较好可以做到实时传递 微信小程序支持比较差 小程序向url传参只能通过url url向app传参需要特定时机 后退 组件销毁 分享 复制链接 触发才能收到消息 以下是代码 app端 需要使用nvue
  • 数组建堆(heapify)

    将一个数组调整为最大堆 根据堆的性质 只要保证部分有序即可 即根节点大于左右节点的值 将数组抽象为一个完全二叉树 所以只要从最后一个非叶子节点向前遍历每一个节点即可 如果当前节点比左右子树节点都大 则已经是一个最大堆 否则将当前节点与左右节
  • React中的组件以及组件实例的三大属性(详细类的复习)

    前言 我们为什么要模块化 是因为要复用编码 提高效率 react就是面向组件编程 函数式组件 函数不能中作为react的节点 就跟正常写函数一样 需要注意的是首字母需要大写 把函数封装为组件 所以把组件渲染到页面上时要使用组件的形式 因为开
  • Smart Tools 网站的架构之美

    本文将简要介绍Smart Tools工具箱网站的架构设计 带领大家一起领略架构之美 Smart Tools是一款实用的在线工具箱网站 地址 https smart tools cn 总体架构 Smart Tools工具箱网站是采用前后端分离
  • 为什么无法用数组名输出数组的的首地址

    当我们直接输出其他类型数组的数组名时 打印的都是一串地址 而字符数组打印的是字符串 为什么 因为字符串中 0 这个结束符 计算机可以知道在哪里读取结束 所以打印数组名就代表输出里面存储的字符串 其他类型没有结束符 计算机不知道从哪里停止 所
  • vue组件生命周期有哪些?vue2和vue3的生命周期图牢记于心,附面试题1

    单选题 关于vue组件生命周期说法错误的是 A 在data中的对象的某个属性和input双向绑定 修改input的值 在beforeDestroy中获取的值是修改过后的值 B ajax请求可以放在created钩子函数中 C 在create