以下内容大部分是读书过程中的学习摘要信息。书籍:《Vue.js从入门到项目实战 》作者: 刘汉伟

1. 简单实例

一个简单的Vue实例text.html，代码如下：

<div id="app">
    <h1>{{ title }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app', // 绑定（mount）到DOM上
    data () \{
       return {
         title: 'Hello World'
       }
    }
  })
</script>
// 页面输出: Hello World

在这个实例中，初始化了带有title数据的vm对象，并将其绑定到id为app的DOM节点上。

image-20200811231727696

初始化时，在实例上绑定的常规数据对象会被Vue转化为被观察的拥有可响应行为的对象。简单地说，就是当数据发生变化时，会同步更新其数据链和作用域中所有的相关状态。最常见的情况就是，当实例数据发生变化时，视图也随之改变。如下图:

image-20200811232017820

2. 生命周期

Vue实例在初始化时需要经历一系列过程，比如编译模板、渲染虚拟DOM树、将实例挂载到DOM上、设置数据监听和数据绑定等。在这些过程中也会运行一些钩子函数，允许开发者在不同的阶段注入自己的代码。

2.1 编写vue实例(使用钩子)

life_cycle.html

<div id="app">
   <h1>{{ title }}</h1>
   <button @click="randomTitle()">改变title</button>
   <button @click="destoryVm()">销毁实例</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',   // mount到DOM上
    data () {
       return {
         title: 'Hello World'
       }
    },
    methods: {
       randomTitle () {
          this.title = 'Hello ' + ['China', 'World', 'Universe'][Math.floor(Math.random() * 2.999)]
       },
       destoryVm () {
         this.$destroy()
       }
    },
    // 实例初始化之后，数据观测和事件绑定之前
    beforeCreate () {
       console.log('before create')
    },
    // 实例初始化完成，挂载尚未开始时
    created () {
       console.log('created')
    },
    // 挂载之前，render函数首次被调用时
    beforeMount () {
       console.log('before mount')
    },
    // 在实例挂载到DOM节点上之后
    mounted () {
       console.log('mounted')
    },
    // 数据更新时，在虚拟DOM状态变化之前
    beforeUpdate () {
       console.log('before update')
    },
    // 虚拟DOM被重新渲染之后
    updated () {
       console.log('updated')
    },
    // 实例销毁之前，此时实例依然可用
    beforeDestroy () {
       console.log('before destroy')
    },
    // 实例销毁后，此时Vue实例及其子实例将完全解绑
    destroyed () {
       console.log('destroyed')
    }
  })
</script>
  • 刚打开页面，即Vue实例刚被创建并挂载到DOM上时，调用的钩子函数如下图:

image-20200811232713384

  • 点击改变title: 当实例数据发生变化并触发视图更新时，调用的钩子函数如下图所示。

image-20200811232805465

  • 点击销毁实例: 当实例被销毁时，调用的钩子函数如下图所示。

image-20200811232913212

  • 销毁实例之后，多次点击“改变title”按钮，视图不再响应数据变化，如下图所示，因为此时节点上绑定的Vue实例已被销毁。

image-20200811233023672

2.2 生命周期图

image-20200811233116726