区别:
1、Vue 中的 mounted
mounted是vue中的一个钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作。
2、 javaScript 中的 onload
onload 事件会在页面或图像加载完成后立即发生。
3、JQuery 中的 load 与 ready(load先执行 ready后执行)
1、ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。 2、load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。
1、话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运行机制</title>
<script type="text/javascript" src="https://carlifecenter.sinosig.com/h5/page/static/js/jquery.js"></script>
<script type="text/javascript" src="https://carlifecenter.sinosig.com/h5/page/static/js/vue.js"></script>
</head>
<body>
<div id="box">
</div>
</body>
<script>
vm = new Vue({
el:'#box',
data(){
return {
}
},
mounted() {
console.log('mounted')
},
methods: {
},
})
$(document).ready(function() {
console.log('ready')
})
window.onload = function () {
console.log('javaScript onLoad')
}
$(window).on('load',function() {
console.log('JQuery load')
})
</script>
<style>
#box {
background-color: bisque;
}
</style>
</html>
如图所示,他们的顺序如下
mounted ⇒ javaScript onLoad ⇒ JQuery load ⇒ ready
做前端开发,执行顺序很重要、很重要、很重要,在这里记录一下,一定切记。