vue实例

Posted 2020-09-01 我叫大王来巡山

一、构造器

每个vue应用都是通过构造函数vue创建一个vue的根实例启动的

var MyComponent=Vue.extend({
　　//扩展选项
})
var myComponentInstance=new MyComponent()

二、属性和方法

每个vue实例都会代理其data对下里所有的属性：

var data={a:1}
var vm=new VUe({
　　data:data
})
vm.a===data.a   //true
vm.a=2
data.a  //2
data.a=3
vm.a  //3

只有这些被代理的属性时相应的，不会触发视图的更新

除了data属性，vue实例暴露的一些有用的实例属性和方法，这些属性和方法都有前缀$,以便于代理的data属性区分。例如：

var data={a:1}
var vm=new Vue({
　　el:‘#example‘,
　　data:data
})
vm.$data===data   //true
vm.$el===document.getElementById("example")//true
vm.$switch(‘a‘,function(newVal,oldVal){
　　//这个回调在vm.a 改变后调用
})

三、实例生命周期

每个vue实例在被创建之前都要经过一系列的初始化过程，着这个过程中，实例也会调用一些生命周期钩子，提供了执行自定义逻辑的机会。

例如：created这个钩子在实例被创建之后被调用

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

　　其他的钩子，在实例生命周期的不同阶段调用，如mounted、updated、destoryed