vue 框架学习（3）-生命周期

一、什么是MVVM

MVVM是Model-View-ViewModel的简写，体现在框架上的样子如下：（图片是在网上找的）
在这里插入图片描述
体现在代码上编写位置如下：

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑，而MVVM主要目的是分离视图（View）和模型（Model），然后减低耦合，提高可重用性，让开发把关注点放在业务处理上，界面的展示东西只是一小部分的东西。

二、创建一个Vue实例

如果你学过面向对象编程的人，对这个实例是超级熟悉的，就是一个创建对象，Vue也是一样，用new关键字。每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

三、Vue的选项options

3.1 什么是选项

在这里插入图片描述
当我们写一下个Vue实例的时候，实例里可以传入一个对象，或者说是一个参数，只是这个参数的object
这个是官网的写法，把这个对象放在了（{对象值：选项}）

	const app = new Vue({
			el: "#app1",
			data: {
				message: "hello vue"
			}
		})

我把这个对象放出来，这样会看得更加明显一点，其实就是一个传参obj，只是这个传参的对象里的值有很多很多给自己选择，而对象里的值就是Vue的选项

var obj = {
			el: "#app1",
			data: {
				message: "hello vue"
				}
			}
const app = new Vue(obj)

3.2 选项值有那些

可以去看一下官网的选项API，那么多的选项值，我们也不用记那么多，也记不住那么多，我只要记得几个常用的就好了，不会的再去查一下就好了。

#el
类型：string Element
限制：只在用 new 创建实例时生效。

#data
类型：Object Function
限制：组件的定义只接受 function。

#methods
类型：{ [key: string]: Function }
详细：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用方法中的 this 自动绑定为 Vue 实例。

#生命周期钩子
函数名称：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated 、deactivated、beforeDestroy、destroyed、errorCaptured

四、Vue生命周期

4.1 生命周期图解

Vue的生命周期从开始创建,初始化数据,编译模板,挂载Dom 渲染→更新→渲染→销毁（网上找的图片）
在这里插入图片描述

4.2生命周期的钩子函数

钩子	说明
beforeCreate	在实例初始化之后，数据观测和event/watcher时间配置之前被调用。这个时候，this变量还不能使用，data下的数据，和methods下的方法，watcher中的事件都不能获得到； `console.log(this.page); // undefined`
created	实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作； `let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点，打印不出来button的值`
beforeMount
mounted	这个时候挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行。注意： mounted在整个实例的生命周期中只执行一次。 `let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点，打印不出来button的值`
beforeUpdate	数据更新之前操作
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
activated	keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated	keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。
beforeDestroy	就是Vue实例销毁前，就比如我们经常看到的：“你确定要退出这个界面”
destroyed	Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

keep-alive：
概念
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
作用
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

文章笔记参考https://blog.csdn.net/qq_30442207/article/details/108266756