Vue小记（第二天）

Vue实例

创建一个Vue实例

var vm=new Vue({

})

数据和方法

数据属性：

var obj={
    a:1
}
var vm=new Vue({
    data:obj
})

1.当obj.a改变时vm.a的值同时也会改变，当vm.a改变时同理。

2.当这些数据变化时，视图会重新渲染。

3.值得注意的是只有当实例被创建时data中存在的属性才是响应式的。也就是说如果你添加一个新的属性，比如：

vm.b='hi'

不会触发视图更新。

4.如果当你知道晚些时候你会需要一个属性值，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

var obj={
    a:1,
    b:true,
    c:[],
    d:'',
    e:null
}

5.object.freeze()会阻止修改现有的属性,响应系统也无法再追踪变化。

var obj={
    a:1
};
Object.freeze(obj);
var vm=new Vue({
    data:obj
});

当尝试修改vm.a时会报错

补充一点，v-on:click=''，如果内容只是赋值，比如：

a='2'，可以直接写成：v-on:click='a="2"'。

实例属性和方法：

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

vm.$data===obj     //true
vm.$el===document.getElementbyId('vue')  //true

$watch是一个实例方法，当vm.a改变时会触发：

vm.$watch('a',function(newValue,oldValue){
    
})

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

created钩子可以用来在一个实例被创建之后执行代码，生命周期钩子的this上下文指向调用它的 Vue 实例：