Vue实例和生命周期

Posted 2021-01-27 qixidi

创建一个Vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始：

var vm = new Vue({
    //选项
})

数据与方法

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这个属性的值发生变化时，视图将产生"响应"，即匹配更新后的值。

//我们的数据对象
var data = {a: 1}

//该数据对象加入到vue实例中
var vm = new Vue({
    data: data
})

//获得这个实例上的属性
//返回源数据中对应的字段
vm.data == data.a // => true

//设置属性也会影响
vm.a = 2
data.a //2

值得注意的是只有当实例被创建时data中存在的属性才是响应式的。

除了数据属性，Vue实例还暴露一些有用的实例属性和方法，他们都有$前缀，以便与用户定义的属性区分开来。

var data = {a: 1}
var vm = new Vue({
    el: ‘#example‘,
    data: data
})

vm.$data === data // true
vm.$el === document.getElementById(‘example‘) // true

vm.$watch(‘a‘, function(newValue, oldValue){
    //这个回调将在vm.a改变后调用
})

实例生命周期钩子

created()可以用来在一个实例被创建之后执行代码。

生命周期钩子的this上下文指向调用它的Vue实例。

关于生命周期的可以接我另外一篇文章：https://segmentfault.com/a/11...

来源：https://segmentfault.com/a/1190000016836774