结合工作经验理解vue的各个生命周期和踩坑点

已于 2024-06-18 10:20:42 修改
阅读量77 收藏
点赞数
文章标签： vue.js javascript 前端
于 2023-03-10 09:55:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjylalaland/article/details/129427042
版权
文章讨论了在Vue应用中，mounted生命周期钩子用于将模板挂载到DOM并能进行DOM操作，而created阶段无法访问DOM。作者提到一个常见陷阱，即在created中使用异步请求可能会导致mounted时无法立即获取DOM元素，需等待数据加载完毕。
摘要由CSDN通过智能技术生成

不一定准确，仅作个人纪录！

可参考博客，这篇不错 created、mounted、updated详解

mounted
挂载完成 ： 将编译好的模板挂载到页面 (虚拟DOM挂载) ，可以在这进行异步请求以及DOM节点的访问，在vue用$ref操作。

        踩坑点：created和mounted在执行之前的顺序是：只有在mounted及之后才能使用getElementById等方法获取dom元素，created时无法使用dom，但是！如果有异步执行就不一样了！比如，当created里面用异步获取页面的数据，那么我在mounted就获取不到元素了，只有等元素加载后才能获取到，所以这个时候也可以在created里获取元素

明天不掉发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue面试题
guangmiao1130的博客
01-07 630
vue面试题
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通
m0_67619362的博客
05-06 2692
fontSize:‘23px’ } } 4、怎样理解 Vue 的单向数据流？ 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit
Vue开发常用的技术点总结
qq_22309303的博客
08-04 1952
Vue项目中常用的一些基础知识很容易踩坑，虽然基础但大多数开发人员并不能很好的掌握，用到的时候还是要差一些资料或者直接copy代码到项目
前端面试Vue知识点
Q_909804的博客
10-11 362
前言 本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。 1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？ SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，开发者必备的顶级前端开发工具
Angela_L的博客
05-25 947
为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？return {message: “子组件”,new Vue({App } })因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；
详解 30 道 Vue 面试题（建议收藏）
程序IT圈
12-19 1359
作者：我是你的超级英雄https://juejin.im/post/5d59f2a451882549be53b170前言本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的...
vue项目面试题
lb2333的博客
01-04 874
1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？ SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。 优点： 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA 相对对服务器压力小； 前后端职
详解30道Vue面试题
su_yun的博客
02-23 1098
1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？ SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。 优点： 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA 相对对服务器
详解 30 道 Vue 面试题
zz_jesse的博客
12-16 708
作者：我是你的超级英雄https://juejin.im/post/5d59f2a451882549be53b170前言本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的...
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
BYGFJ的博客
12-09 1678
前言 本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。希望读者读完本文，有一定的启发思考，也能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，对 Vue 有更好的掌握。 文章最后一题，欢迎同学们积极回答，分享各自的经验 ~~~ 辛苦整理良久，还望手动点赞鼓励~ 1、说说你对 SPA 单页面的理解，它的优缺点分别是什
30道Vue面试题详解【文末送书】
m0_71102594的博客
05-24 378
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分： 加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 子组件更新过程 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> .
vue基础最新版本
weixin_44990056的博客
02-14 1077
VUE学习整理 http://doc.liangxinghua.com/vue-family/1.html vue的优点 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 410
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
vue ref和reactive区别
灰海
08-25 4505
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 1067
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3插件原理
m0_46281382的博客
08-26 2323
简述vue3中use方法加载第三方插件原理
如何使用Vue 3和Type Script进行组件化设计
yang295242361的博客
08-27 1451
在Vue 3中，Composition API 是一种全新的逻辑复用和代码组织方式，它允许你将组件的逻辑（如响应式状态、计算属性、方法、生命周期钩子等）封装到单独的函数中，从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤。
足球联赛|基于SprinBoot+vue的足球联赛管理系统(源码+数据库+文档)
伟庭的博客
08-27 1189
系统阐述的是使用足球联赛管理系统的设计与实现，对于Java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。开发中使用了ssm框架和MySql数据库技术搭建系统的整体架构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值