Vue的MVVM模型和生命周期函数
1. MVVM模型
MVVM（Model-view-viewmodel）是一种软件架构模式。
Vue框架的设计是受到了该模型的启发，因此在Vue的文档中，经常会使用vm（ViewModel的缩写）这个变量名表示Vue实例。
M:模型Model，对应data中的数据
V: 视图（View），模板，对应视图层·
VM: 视图模型（ViewModel）：vue实例对象,连接视图和数据模型的纽带，数据模型发生了变化，vm通知视图修改；视图发生了变化，vm通知数据模型进行相对应的修改。
该模型的好处：优化页面渲染，当数据模型发生改变时，只需改变对应的视图。
2. 生命周期函数
Vue生命周期理解：
前四个生命周期只会执行一次，在created中实例初始化完成，可以访问data数据和methods，发送一些异步请求；在mounted中，实例挂载到页面上，此时可以获取dom元素，发送异步请求（如获取图表数据）。
2.1 简单案例帮助理解生命周期
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<div ref="container">{{msg}}</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "hello vue"
},
methods: {},
beforeCreate() {
console.log('实例初始化之前', this.msg)
},
created() {
console.log('实例初始化完成，可以访问data和methods', this.msg)
},
beforeMount() {
console.log('实例挂载到页面之前', this.$refs['container'])
},
mounted() {
console.log('实例挂载到页面完成 可以获取dom节点和异步请求', this.$refs['container'])
},
beforeDestroy() {
console.log('实例销毁之前', this.msg)
},
destroyed() {
console.log('实例销毁完成', this.msg)
},
})
</script>
</body>
</html>
实例销毁前，事件触发有效：
下面手动销毁vue实例，观察：
// 当vm 身上的 $destroy()方法被调用的时候，就开始走销毁流程
setTimeout(() => {
//手动销毁实例
vm.$destroy()
}, 4500);
4.5秒后，实例销毁完成，事件再也点击不了，证明实例销毁完成。
一般，除了手动销毁，vue实例是不会主动销毁的。
扫一扫
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
