以下内容大部分是读书过程中的学习摘要信息。书籍:《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