vuecrud钩子_Vue 实例中的生命周期钩子详解

Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务

处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的

过程时更容易形成好的逻辑。

Vue 实例

在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue 时，需要传入一个选

项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生

命周期钩子(lifecyclehook)等选项。

Vue 实例化的选项

需要注意的是含 this 的函数大多不要使用箭头函数，因为我们期望 this 指向 Vue 实例。

data

Vue 实例的数据都保存在 data 对象中，Vue 将会递归将 data 的属性转换为 getter/setter，

从而让 data 的属性能够响应数据变化。

var data = { a: 1 }

// 直接创建一个实例

var vm = new Vue({

data: data

})

vm.a // -> 1

vm.$data === data // -> true

这样数据就绑定在 HTML 中，Vue 框架监视 data 的数据变化，自动更新 HTML 内容。

computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue

var vm = new Vue({

data: { a: 1 },

computed: {

// 仅读取，值只须为函数

aDouble: function () {

return this.a * 2

},

// 读取和设置

aPlus: {

get: function () {

return this.a + 1

},

set: function (v)