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介绍

MVVMModel–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是把 modelview 连起来的桥梁,是真正结合前端应用场景的实现,可以算作是一种创新

来源于互联网 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实例的$eldata都已初始化,挂载之前为虚拟的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

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐