创建一个Vue实例
var vm = new Vue({
//选项对象
});
一个Vue应用通过一个由new Vue创建的根Vue实例和可选的嵌套的,可复用的组件树组成
所有的Vue组件都是Vue实例,并接受相同的选项对象(一些根实例特有的选项除外)
数据与方法
var origin = {
a: 1
}
var vm = new Vue({
//选项对象
data: origin
});
vm.a; //1
vm.$data == origin; //true
可以直接在data中定义新对象,本例中引用对象只是为了方便说明
可以直接通过vm.a的方式来访问vm中data中的a属性
这是因为vue重写了对应属性的访问描述符getter和setter等
只有当实例被创建时data中存在的属性才是响应式的(响应式的属性值发生改变时,视图将会产生响应,即匹配更新为最新的值)
也就是说添加了新的属性并不是响应式
解决方式:占位属性,使用value为空值('',0,false,[],null等)
var vm = new Vue({
//选项对象
data: {
a:null,
b:"",
c:[]
}
});
这里唯一例外的是使用Object.freeze()
(Object.freeze()会调用Object.preventExtensions(..)来禁止添加新属性并把所有属性标记为configurable:false和writable:false)
这也意味着响应系统无法再最追踪变化
除了数据属性,Vue实例还暴露了一些有用的实例属性和方法(比如data)
这些实例方法使用$前缀以区分用户定义的属性(data中的属性)
var origin = {
a: 1
}
var vm = new Vue({
//选项对象
el: "#vm",
data: origin
});
vm.$data == origin; //true
vm.$el; //<div id="vm"></div>
vm.$watch("a", function(newValue, oldValue) {
//在vm.a改变后调用
console.log("vm.$watch调用结果:"+newValue, oldValue);
});
实例生命周期钩子
每个Vue实例在创建时都要经历一系列的初始化过程(设置数据监听,编译模板,将实例挂载到DOM并在数据更新的时候更新DOM等)
这个过程中也会运行一些叫声明周期钩子的函数(如 created , mounted , updated , 和 destroyed 等)
生命周期钩子的this上下文指向调用他的Vue实例
var vm = new Vue({
created: function() {
console.log("created已被调用");
}
})
不要在选项属性或回调上使用箭头函数,比如
created: () => console.log(this.a)
或vm.$watch('a', newValue => this.myMethod())
。因为箭头函数是和父级上下文绑定在一起的,this
不会是如你所预期的 Vue 实例