【猿说VUE】解锁MVVM，探秘VUE实例生命周期

3 VUE基础：通过实例理解VUE的MVVM

3.1 实例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>N001_HelloVue</title>
</head>
<body>
  <!--模板-->
  <div id="hellovue">
    <!--指令-->
    <input type="text" v-model="username"><br>
    <!--指令-->
    <input type="text" v-model="username">
    <!--大括号表达式-->
    <p>Hello {{username}}</p>
  </div>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
      // 配置选项(option)
      el: '#hellovue',  // element: 指定用vue来管理页面中的哪个标签区域
      data: {
        username: 'gavinbj'
      }
    })
  </script>

</body>

</html>

代码说明：

引入vue.js
创建Vue对象
- el：element选择器
- data：初始化数据（Model）
双向数据绑定：v-model
显示数据：{{username}}

当一个Vue实例被创建时，它将 data 对象中的所有的属性加入到Vue的响应式系统中，当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性，那么对 hometown 的改动将不会触发任何视图的更新。比如：

vm.hometown = 'hebei'

3.2 MVVM介绍

MVVM（Model–view–viewmodel）是一种软件架构模式，其本质上是MVC的改进版，MVVM 就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。

MVC概述
- Model 数据 → View 视图 → Controller 控制器
MVVM概述
- MVVM - Model View ViewModel，即：数据、视图、视图模型
  - View 对应 template
  - ViewModel 对应 new Vue({…})
  - model 对应 data
- 关系：
  - view 可以通过事件绑定的方式影响 model
  - model 可以通过数据绑定的形式影响到view
  - viewModel是把 model 和 view 连起来的桥梁，是真正结合前端应用场景的实现，可以算作是一种创新

来源于互联网 MVVM 图片来源于互联网

3.3 VUE实例生命周期介绍

下图是我从VUE官网拿到的关于VUE实例的生命周期的示意图。现在我还不能理解全部的内容，但是我相信随着我的学习和应用，最终会明天它的参考价值。

每个Vue实例在创建时有一系列的初始化过程：设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。该过程中也会运行一些叫做生命周期钩子的函数，这就给了我们在不同阶段添加自己业务处理代码的时机。

例如：created 钩子函数里添加了打印输出数据的业务逻辑。

new Vue({
  data: {
  	username: 'gavinbj'
  },
  created: function () {
    // `this` 指向vm实例
    console.log('Hello : ' + this.username)
  }
})

在这里插入图片描述

从上图可以看出Vue实例有一个完整的生命周期，即从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程。也就是Vue实例从创建到销毁的过程，就是其生命周期。下面是VUE生命周期的8个阶段的说明：

beforeCreate：
- 创建前：组件实例被创建时，组件属性计算之前，数据对象data都为undefined，未初始化。此时建议不要改动data里的数据，否则可能会出现无法监听的情况，如果模板中需要使用data进行渲染时，需要给data默认的初始值，在created之后再通过请求修改为实际的值。所以该方法基本上不会使用。
created：
- 创建后：组件实例创建完成，数据对象data已存在，属性已经绑定（放在data中属性当值发生改变的同时，视图也会发生变化），但是挂载还未开始，$el不可见，不能进行dom相关操作。这里是页面渲染前倒数第二次更改数据的时机，不会触发其他的钩子函数，基于业务场景可以进行页面初始数据的获取。
beforeMount：
- 挂载前：Vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换。此处为渲染前最后一次更改数据的时机，不会触发其他的钩子函数，基于业务场景可以进行页面初始数据的获取。
mounted：
- 挂载后：Vue实例挂载完成，data.message成功渲染，此时可以通过DOM API获取到DOM节点，$ref属性可以访问。常用于获取VNode信息和操作，发送ajax请求。
beforeUpdate：
- 更新前：当data变化时，会触发beforeUpdate方法。基本上没有什么用处。
updated：
- 更新后：当数据变化导致地虚拟DOM重新渲染时会被调用，被调用时，组件DOM已经更新。建议不要在这个钩子函数中操作数据，可能陷入死循环。
beforeDestory：
- 销毁前：组件销毁之前调用。此时还可以用this来获取实例，通常我们在这里进行一些重置的操作，比如清除组件中的定时器、清除监听的dom事件等。
destoryed：
- 销毁后：实例销毁后调用。调用完成后，Vue实例的所有内容都会解绑定，移出全部事件监听器，同时销毁所有的子实例。

3.4 VUE生命周期代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>VUE实例生命周期展示</title>
</head>
<body>
    <div id="app"></div>
</body>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // 生命周期函数就是vue实例在某一个时间点会自动执行的函数
        var vm = new Vue({
            el:'#app',
            template: "<div>{{username}}</div>",
            data:{
                username:"gavinbj"
            },
            //创建前
            beforeCreate: function() {
                console.log("beforeCreate");
            },
            //创建后
            created: function() {
                console.log("created");
            },
            //挂载前
            beforeMount: function() {
                console.log(this.$el);
                console.log("beforeMount");
            },
            //挂载后
            mounted: function() {
                console.log(this.$el);
                console.log("mounted");
            },
            //更新前
            beforeUpdate: function() {
                console.log("beforeUpdate");
            },
            //更新后
            updated: function() {
                console.log("updated");
            },
            //销毁前
            beforeDestroy: function() {
                console.log("beforeDestroy");
            },
            //销毁后
            destroyed: function() {
                console.log("destroyed");
            },
        });
    </script>
</html>

Vue实例生命周期过程的控制台输出如下：

## 页面打开显示后执行内容
lifecirclevue.html:21 beforeCreate
lifecirclevue.html:25 created
lifecirclevue.html:29 <div id="app"></div>
lifecirclevue.html:30 beforeMount
lifecirclevue.html:34 <div>gavinbj</div>
lifecirclevue.html:35 mounted
vue.js:9055 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:9064 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html


## 在控制台直接改变Data对象内容
vm.username = "zhangsan"
lifecirclevue.html:39 beforeUpdate
lifecirclevue.html:43 updated
"zhangsan"


## 在控制台直接调用Vue实例的销毁方法模拟销毁对象
vm.$destroy()
lifecirclevue.html:47 beforeDestroy
lifecirclevue.html:51 destroyed
undefined

在这里插入图片描述

扫描二维码关注公众号，回复： 9544131 查看本文章

黑白猿

发布了44 篇原创文章 · 获赞 40 · 访问量 17万+

私信关注