vue.png
Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面的业务逻辑、数据模型等。当然它也有自己一系列的生命周期的事件钩子，辅助我们对整个Vue实例生成、编译、挂载、销毁等过程进行JS控制。
一、Vue实例初始化的选项配置对象
前面的几篇文章里，我们已经用了很多次new Vue({}) 的代码，而且Vue初始化的选项也用了'el'、'data'、' methods'、‘computed’等等。看过之前几篇文章的童鞋们，应该已经明白了它们的作用，今天我们就来详细了解一下它们的使用情况。
1、Vue实例的data
- 介绍
Vue实例的数据对象data，我们已经用了很多了，数据绑定离不开data里面的数据，也是Vue的核心属性。另外，Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签。
-
data对象类型
- 类型是Object或者Function；
- 如果在组件对象中，data必须是Function类型；
-
实例：
// 创建普通的Vue实例
var vm = new Vue({
data: data
})
// 组件定义(后面会讲)
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () { //这里必须是函数！！！！
return { a: 1 }
}
})
2.Vue实例的computed
- 介绍
Vue的computed属性，会自动混入Vue的实例中。在computed中的getter和setter中的this，自动绑定为Vue的实例，异常方便。
-
类型
{键：函数}{[key:string]:Function | {get: function, set:function}}
-
实例：
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取，值只须为函数
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // -> 2
vm.aPlus = 3
vm.a // -> 2
vm.aDouble // -> 4
3.Vue实例的methods
- 介绍
methods将被混入Vue实例中，可以直接通过实例访问这些方法，或者在指令表达式中使用。方法中的this，自定绑定为Vue实例。
注意，不应该使用箭头函数来定义methods函数。因为箭头函数中的this绑定了父上文，所以this不会像期望那样指向Vue的实例。
- 类型
{[key:string]: Function}
- 实例
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
4.Vue实例的watch
- 介绍
一个对象，键是需要观察的表达式，值是对应的回调函数或方法名或包含选项的对象。Vue实例将会在实例化时，调用$watch()，遍历watch对象的每一个属性。
- 类型
{ [key: string]: string | Function | Object }
- 实例
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
// 监控a变量变化的时候，自动执行此函数
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
//注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。
//理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。
5.综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之数据监控</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
// 事件响应方法的逻辑代码
getNumber: function (e) {
this.number += 1; // 不管是内联方法调用，还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app
}
},
watch: {
// 监控number的变化，并自动执行下面的函数
number: function (val, oldVal) {
console.log('val:' + val + ' - oldVal: ' + oldVal);
}
}
});
</script>
</body>
</html>
6.关于el
- 介绍
提供一个在页面上已经存在的DOM元素作为Vue实例的挂载目标，也就是说Vue绑定数据到哪里去找。它可以是CSS选择器，也可以是一个HTML元素实例。
在实例挂载之后，元素可以用vm.$el访问。
如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显示调用vm.$mount()手动开启编译。
- 类型
string | HTMLElement
- 实例
var app = new Vue({
el: '#app',
...
});
二、Vue实例的生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等的一系列过程。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
具体如下：
- beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
- created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
- mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
- beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
- updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
- beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
- `destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
接下来我们做一个例子，看一下Vue中所有的生命周期怎么用的。
import Axios from 'axios' // 这是一个轻量级的ajax库，import是es6模块导入的语法。
export default { // 这是一个vue的模块，后面讲奥。
name: 'app',
components: {
},
data: function () {
return {
list: []
}
},
mounted: function () { // 挂在完成后的生命周期钩子注册。
this.$nextTick(function () { // 等待下一次更新完成后执行业务处理代码。
Axios.get('/api/menulist', {// 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新
params: {
}
}).then(function (res) {
this.list = res.data
}.bind(this))
})
}
}
网友评论