vue.js基础-属性与方法和实例生命周期

来源:互联网 发布:岚皋数据运营招聘 编辑:程序博客网 时间:2024/06/02 02:31

属性和方法

每个 Vue 实例都会代理其 data 对象里所有的属性:

var data = { a: 1 }var vm = new Vue({  data: data})vm.a === data.a // -> true// 设置属性也会影响到原始数据vm.a = 2data.a // -> 2// ... 反之亦然data.a = 3vm.a // -> 3

实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:

var vm = new Vue({  data: {    a: 1  },  created: function () {    // `this` 指向 vm 实例    console.log('a is: ' + this.a)  }})// -> "a is: 1"

也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。

总结:钩子函数就是在实例生命内,不同的阶段,调用的钩子内部的函数,这样我们就可以自定义实例运行过程中的一些逻辑。

原创粉丝点击