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

短命女 2022-10-28 15:27 138阅读 0赞

## 一、什么是MVVM ##

MVVM是Model-View-ViewModel的简写，体现在框架上的样子如下：（图片是在网上找的）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]  
体现在代码上编写位置如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]  
MVVM 就是将其中的`View 的状态和行为抽象化`，让我们将`视图 UI 和业务逻辑`分开。当然这些事 ViewModel 已经帮我们做了，它可以`取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑`，而`MVVM主要目的是分离视图（View）和模型（Model），然后减低耦合，提高可重用性`，让开发把关注点放在业务处理上，界面的展示东西只是一小部分的东西。

## 二、创建一个Vue实例 ##

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

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

## 三、Vue的选项options ##

#### 3.1 什么是选项 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]  
当我们写一下个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][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 `渲染`→`更新`→`渲染`→`销毁`（网上找的图片）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3]

#### 4.2生命周期的钩子函数 ####

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20221024/5ee5c36982c84dfe8fcd41e4067f5037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/5086315478344265915744aaf355072a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/2e20ef881f064fc8aad16702c83102b9.png
[API]: https://cn.vuejs.org/v2/api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/3f8ded58f6cd469289783f6235693868.png