mounted和created的区别
一、什么是生命周期?
用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。
通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:
二、created和mounted区别?
官方图解如下:
我们从图中看两个节点:
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的区别,写的比较简陋,记录下来,加深印象。
转自: https://blog.csdn.net/xdnloveme/article/details/78035065
mounted和created的区别相关推荐
- Vue 生命周期中 mounted( ) 和 created( ) 的区别
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 一.什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程.虽 ...
- Vue生命周期中mounted和created的区别
一.什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程.虽然不太严谨,但是也基本上可以理解. 通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下cre ...
- Vue中mounted和created的区别
生命周期钩子 组件状态 最佳实践 beforeCreate 实例初始化之后,this指向创建的实例,不能访问到data.computed.watch.methods上的方法和数据 常用于初始化非响应式 ...
- Vue生命周期中mounted、created、methods、computed、watched等的区别
1.Vue生命周期中mounted和created的区别 https://blog.csdn.net/xdnloveme/article/details/78035065. 2.[Vue] 生命周期, ...
- vue中created、mounted、activated的区别
created:在模板渲染成html之前调用,即通常初始化某些属性值,然后再渲染成视图:但是注意,只会触发一次 mounted:在渲染成html之后调用,通常是初始化页面完成后,再对html的dom节 ...
- vue的mounted和created方法的执行
Vue的created 和 mouted的执行顺序 今天在数据可视化的项目中,用了echarts和vue来进行展示.按照我的理解,先执行created中调用后台数据的接口,然后再进行echarts的展 ...
- 详解created和mounted区别与使用场景
生命周期钩子 何为生命周期: 通俗地讲,生命周期即Vue实例或组件从创建到被消灭的一系列过程,中间的各个节点被称为钩子 生命周期图示: 浏览器渲染过程 要深刻理解生命周期的各个节点,就必须了解浏览器的 ...
- created写法_vue.js中created方法作用
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
- Vue进阶(三十六):created() 详解
文章目录 一.前言 二.实例生命周期 2.1 钩子函数生命周期 三.Vue 生命周期 mounted 和 created 的区别 3.1 什么是生命周期? 3.2 created 和 mounted ...
- vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
最新文章
- 全排列:不含重复元素和含重复元素的全排列
- ZooKeeper增加Observer部署模式提高性能(转)
- bootstrap的表单验证 vue_第45天:Web表单
- java随机数排序算法_理解快速排序算法
- SQL 数据分析常用语句
- Pytorch常用技巧记录
- 3dmax导出fbx没有贴图_实例讲解ArcGIS 与 3DMax 结合建模
- 【图像拼接】基于matlab Harris角点检测图像拼接【含Matlab源码 517期】
- mdl文件是c语言,mdl文件扩展名,mdl文件怎么打开?
- html5-移动端布局模板
- 教程二:windows api(c mfc vs2017)实现U盘插拔检测,获取U盘容量,U盘内容移动,开启和关闭U盘以及获取盘符等
- 踩坑记---Win10安装anaconda及tensorflow-cpu版
- PCB板常用检测方法
- Python工具函数
- RocketMQ的长轮询消费方式
- python使用垂直投影法进行字符串分割
- 数据结构(二)——单链表的头插与尾插
- 程序员时事面试题——地震预测
- 2021年山东省安全员C证考试题及山东省安全员C证报名考试
- python文件打开模式的合法组合,python文件操作