返回顶部
首页 > 资讯 > 前端开发 > 其他 >vue中mounted和created有什么区别
  • 499
分享到

vue中mounted和created有什么区别

createdmountedVue 2023-05-14 22:05:41 499人浏览 安东尼
摘要

本教程操作环境:windows7系统、vue3版,DELL G3电脑。一、什么是生命周期?用通俗的语言来说,就是 Vue中实例或者组件从创建到消灭中间经过的一系列过程。 虽然不太严谨,但是也基本上可以理解。通过一系列实践,现在把所有遇到的问

vue中mounted和created有什么区别

教程操作环境:windows7系统、vue3版,DELL G3电脑。

一、什么是生命周期?

用通俗的语言来说,就是 Vue中实例或者组件从创建到消灭中间经过的一系列过程。 虽然不太严谨,但是也基本上可以理解。

通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:

二、created和mounted区别?

官方图解如下:

1.png

我们从图中看两个节点:
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID); 通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下面看一个例子(用组件)。

三、例子

Vue.component("demo1",{
        data:function(){
            return {
                name:"",
                age:"",
                city:""
            }
        },
        template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
        created:function(){
            this.name="唐浩益"
            this.age = "12"
            this.city ="杭州"
            var x = document.getElementById("name")//第一个命令台错误
            console.log(x.innerHTML);
        },
        mounted:function(){
            var x = document.getElementById("name")//第二个命令台输出的结果
            console.log(x.innerHTML);
        }
    });
    var vm = new Vue({
        el:"#example1"
    })
可以看到输出如下:

可以看到都在created赋予初始值的情况下成功渲染出来了。
但是同时看console台如下:

可以看到第一个报了错,实际是因为找不到id,getElementById(ID) 并没有找到元素,原因如下:

在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素

而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。

以上就是我自己总结的mounted和mounted的区别,写的比较简陋,记录下来,加深印象。

【相关推荐:vuejs视频教程、WEB前端开发

以上就是vue中mounted和created有什么区别的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: vue中mounted和created有什么区别

本文链接: https://lsjlt.com/news/206269.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中mounted和created有什么区别
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。一、什么是生命周期?用通俗的语言来说,就是 Vue中实例或者组件从创建到消灭中间经过的一系列过程。 虽然不太严谨,但是也基本上可以理解。通过一系列实践,现在把所有遇到的问...
    99+
    2023-05-14
    created mounted Vue
  • vue中mounted和created有哪些区别
    本篇内容介绍了“vue中mounted和created有哪些区别”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!区别:1、created在模板...
    99+
    2023-07-04
  • vue中created和mounted的区别
    vue中created和mounted的区别:created是在模板渲染成html前调用,而mounted则是在渲染之后调用。created指的是初始化某些属性值,而mounted是指初始化页面完成后。created在初始化某些属性值,然后...
    99+
    2024-04-02
  • Vue中created与mounted的区别浅析
    大多数人在谈论生命周期钩子时会感到困惑的一件事是 created 和 mounted 之间的区别。有着相似的名称,觉得应该做同样的事情,但还是有一些细微的差别。 首先,created...
    99+
    2024-04-02
  • 浅谈一下Vue生命周期中mounted和created的区别
    目录一、什么是生命周期?二、created和mounted区别?三、例子一、什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨...
    99+
    2023-05-19
    Vue 生命周期 Vue mounted Vue created
  • Vue中created和mounted使用场景分析
    目录一、生命周期概念二、浏览器渲染过程三、生命周期中的浏览器渲染beforeCreate阶段created阶段beforeMount阶段mounted阶段四、使用场景五、常见相关问题...
    99+
    2023-05-20
    Vue中created和mounted Vue created和mounted
  • VUE中computed 、created 、mounted的先后顺序是什么
    本篇内容介绍了“VUE中computed 、created 、mounted的先后顺序是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅...
    99+
    2023-07-05
  • vue中computed 和 watch有什么区别
    vue中computed 和 watch有什么区别,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一、computed 和 wa...
    99+
    2024-04-02
  • angularjs和vue有什么区别
    angularjs和vue有什么区别?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。vue是什么Vue是一套用于构建用户界面的渐进式JavaScript框架,Vu...
    99+
    2023-06-14
  • vue和bootstrap有什么区别
    这篇文章主要介绍“vue和bootstrap有什么区别”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue和bootstrap有什么区别”文章能帮助大家解决问题。什么是 bootstrap?boot...
    99+
    2023-06-27
  • jquery和vue有什么区别
    jquery和vue的区别:1、jQuery专注于提供强大且简洁的API来操作DOM,而Vue更关注整个应用程序的架构和数据管理;2、jQuery使用的是基于对象的编程风格,而Vue是基于组件的;3、jQuery更易于上手和理解,而Vue的...
    99+
    2023-08-09
  • vue中v-if和v-show有什么区别
    这篇文章主要介绍了vue中v-if和v-show有什么区别,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。v-if 和 v-show 有什么区...
    99+
    2024-04-02
  • vue中的v-if和v-show有什么区别
    小编给大家分享一下vue中的v-if和v-show有什么区别,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2024-04-02
  • Vue中的插件和组件有什么区别
    这篇文章主要介绍了Vue中的插件和组件有什么区别的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的插件和组件有什么区别文章都会有所收获,下面我们一起来看看吧。一、组件是什么回顾以前对组件的定义:组件就是把...
    99+
    2023-06-30
  • vue中axios和ajax区别是什么
    vue中axios和ajax区别是:axios是通过promise实现对ajax技术的一种封装,而ajax则是实现了网页的局部数据刷新。axios可以说是ajax,而ajax不止是axios。用法相同,但个别参数不同。axios用法:axi...
    99+
    2024-04-02
  • java中 ${} 和 #{} 有什么区别
    目录前言1.功能不同1.1 ${} 的问题2.使用场景不同3.安全性不同3.1 使用 ${} 实现用户登录3.2 使用 #{} 实现用户登录总结前言 ${} 和 #{} 都...
    99+
    2024-04-02
  • vue中v-if和v-show命令有什么区别
    这篇文章将为大家详细讲解有关vue中v-if和v-show命令有什么区别,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。v-if和v-show 的区别是什么?第一种回答方式...
    99+
    2024-04-02
  • vue中组件化和模块化有什么区别
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。模块化的由来在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或者动画实现,代码量比较少,只要写在script标签里面就可以了随着ajax异步请求的出现,慢...
    99+
    2023-05-14
    前端 Vue.js
  • vue中npm run dev和npm run build有什么区别
    本篇内容介绍了“vue中npm run dev和npm run build有什么区别”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!具体如下:...
    99+
    2023-07-04
  • angular与vue有什么区别
    angular与vue的区别:1、学习曲线,Angular是一个完整的框架,学习曲线相对较陡峭,Vue是更简单容易上手的框架;2、性能,Angular在处理大型应用程序时表现出色,Vue是响应式的机制来追踪数据的变化;3、生态系统,Angu...
    99+
    2023-08-10
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作