已解决
Javaweb之Vue生命周期的详细解析
来自网友在路上 175875提问 提问时间：2023-11-20 03:20:30阅读次数： 75
最佳答案 问答题库758位专家为你答疑解惑
2.4 生命周期
vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：
其中我们需要重点关注的是mounted,其他的我们了解即可。
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据
我们在VS Code中创建名为18. Vue-生命周期.html的文件编写代码来演示效果，提前准备如下代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app">
</div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {}})
</script>
</html>然后我们编写mounted声明周期的钩子函数，与methods同级，代码如下：
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"Javaweb之Vue生命周期的详细解析"：http://eshow365.cn/6-39935-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！