vue created mounted 区别

最新推荐文章于 2024-05-16 11:59:50 发布
最新推荐文章于 2024-05-16 11:59:50 发布
阅读量291 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HockJerry/article/details/113698062
版权 
在做vue项目时，有些人喜欢把操作放在created里面，而有些人喜欢放在mounted里面，这里来谈谈自己堆这两个
的理解吧，说的不好勿怪，说的好请点赞，若有不同见解多多评论

mounted

特点：在vue的mounted这个周期，vue实例已经创建好了，其中的data也存在，页面的dom也已创建，虚拟的dom树
也创建了
操作：在这个周琴无论你时进行对data的数据操作还是进行一些dom操作都是可以的
弊端：也不算时太大的弊端嘛，在mounted周期之前页面就已经渲染出来了，如果你对数据再进行操作，就相当于改
变了数据之后会再刷新一边dom，产生了一次不必要的操作

created

特点：在created这个周期，可以获取实例的data数据，但是dom还未渲染，这时是获取不到页面的dom节点的
操作：可以操作data数据，按照原理来说是不适合对dom进行操作的，但是vue推出的一个$nextTick()很好的解决
了这一问题，它会在dom渲染后再执行其中的操作

总的来说把请求呀或者其他的操作放在created里面可能会更好一点

易子辰丶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
9.Vue中mounted的简单理解
sinat_41124751的博客
07-31 36万+
Vue小白笔记9——mounted的简单理解
Vue3
qq_40589140的博客
06-15 3114
一、安装脚手架 vue create 项目名 二、绑定原理 1.Vue2绑定原理 • 访问器属性+虚拟DOM树 2.访问器属性的问题 • 只能在首次创建new Vue()对象时初始就有的属性，添加监视(访问器属性)。今后动态添加进来的成员，就无法自动添加访问器属性，也就无法自动得到监视。 • 无法给索引数组的数字下标添加访问器属性 • 结果，在vue程序中后添加成员，或通过下标修改索引数组中的元素值，页面都不自动更新！ • 比如: 3.Vue3的绑定原理 • ES6的Proxy代理对象 – p
Vue3中的自定义指令（defineDirective）和钩子函数（created、mounted、updated(1)
最新发布
2401_84435768的博客
05-16 618
一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。
VUE created与mounted区别
weixin_40913947的博客
04-25 1万+
VUE created与mounted区别
Vue中created和mounted详解
qq_43985303的博客
02-06 6155
对浏览器来说，已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，而对于vue来说，在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了（关于这一点，在笔者测试中，在mounted方法中打断点然后run，依旧能够在浏览器中看到整体的页面）。通过浏览器的渲染过程，可以总结出created和mounted的使用场景。
vue中created和mounted的区别
ydrpw的博客
10-04 2581
总结 beforeCreate 创建之前：已经完成了初始化事件和生命周期 created 创建完成： 已经完成了初始化的注册和相应 beforeMount 挂载之前：已经完成了模板的渲染 mounted 挂载之后：已经完成了HTML虚拟化，创建了el节点可以操作dom beforeDestory 摧毁之前： 整个vue都处在实时监控渲染和更新 destoryed 已经摧毁：已经摧毁了观察者，子元素和事件监听 数据初始化一般放到created里面，这样可以及早发送请求获取数据，如果有依赖dom必须存在的情况，
vue中created和mounted的区别浅析
10-16
主要给大家介绍了关于vue中created和mounted区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue 路由子组件created和mounted不起作用的解决方法
10-16
今天小编就为大家分享一篇vue 路由子组件created和mounted不起作用的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue实例中生命周期created和mounted的区别详解
08-29
主要给大家介绍了关于Vue实例中生命周期created和mounted区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
在vue中created、mounted等方法使用小结
10-15
在Vue实例的生命周期中，有多个关键的生命周期钩子函数，如`created`、`mounted`等，它们分别在不同的阶段执行，帮助开发者在合适的时机进行数据处理、DOM操作或事件绑定。下面是对这些生命周期钩子的详细说明： 1....
VUE-create与mounted的区别
shenzhen_zsw的专栏
07-16 9717
create与mounted的区别     1）created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。     2）mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。...
vue.js页面加载执行created,mounted的先后顺序说明
01-21
created页面加载未渲染html之前执行。 mounted渲染html后再执行。 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。 补充知识：关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考 学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图，重点在于数据，拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上。 我们也都知道在Vue父子组件可以通过Props实现父组件传递到子组件。 在项目开发中，我们会遇到这种需求，页面初始化时，父组件通过接口拿到需要数据，然后拿到
vue中的created方法
热门推荐
DYFNB的博客
08-09 1万+
created方法是vue生命周期的created方法,创建vue实例的时候会被调用,接下来我们看一下她的效果吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
VUE中的 mounted组件、methods方法、computed属性
weixin_45522505的博客
08-13 4695
vue mounted组件的使用 1.钩子函数 钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。 2.相对于前端来讲 对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。 3....
vue的mouted和created在使用时的区别
qq_36445861的博客
10-02 2391
引用：https://www.cnblogs.com/dehuachenyunfei/p/11811969.html 引用：https://blog.csdn.net/xdnloveme/article/details/78035065 首先得先了解浏览器渲染过程: 构建DOM树 构建css规则树,根据执行顺序解析js文件。 构建渲染树Render Tree 渲染树布局layout 渲染树绘制 vue的生命周期中的浏览器渲染: 以下为测试vue部分生命函数 beforeCreate(
vue面试总结
qq_38210427的博客
04-29 687
1.一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。2.如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。在JS当中，实例是通过构造函数创建的，每个构造函数可以new出多个实例，每个实例都会继承原型上的方法和属性。
vue中 mounted方法在什么情况下使用和js 定时器使用
weixin_39802680的博客
03-13 9960
在常见的博客中都会这样写到 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 在实际的开发过程中我们会经常使用create方法，在页面还未渲染成html前，调用函数，从后端获取数据，在实现对页面的数据进行显示。比如说下面例子 created() { if(this.$route.params.id) this.orderN
vue中的mounted组件
a335178388的博客
11-25 1万+
1.钩子函数 钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。（百度百科） 2.相对于前端来讲 对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。 3.vue中的mounted 在这发起后端请求，拿回数据，配合路由钩子做一些事情 类型：Function 详细： e
vue created mounted methods
08-25
在Vue中，created、mounted和methods是三个重要的概念。 引用[1]中提到，methods是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用。它定义了一些函数，在组件中可以通过指令表达式或者VM实例来调用这些方法。methods中的this会自动绑定为Vue实例。 在引用中的示例代码中，可以看到methods的使用。add()函数通过this.price来修改data中的price属性，而ad(n,e)函数则接受两个参数，并通过this.price来修改data中的price属性。这些方法可以在Vue实例中通过点击按钮来调用。 另外，引用中提到的mounted是Vue的生命周期钩子函数之一。它会在DOM加载完成后调用，可以在这个钩子函数中执行一些需要等待DOM加载完毕的操作，比如发送ajax请求。需要注意的是，在服务器端渲染期间，mounted钩子函数不会被调用。如果希望在整个视图渲染完毕后执行某些代码，可以使用vm.$nextTick来替代mounted钩子函数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【Vue】 生命周期， created，mounted, methods , computed , watched, 通俗易懂](https://blog.csdn.net/qq_22227087/article/details/87256833)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue基础methods、computed、created、mounted简析](https://blog.csdn.net/qq_15058285/article/details/89354286)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值