vue.js初入门(三Vue实例)

创建实例语法

在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

属性与方法

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

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

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

那么对 b 的改动将不会触发任何视图的更新。

那么如果对var data对象改动会如何呢?

如果我们需要改变它呢?假设一开始它为空或不存在。我们可以设置一些初始值。比如:

注意:如果使用了Object.freeze()方法,这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。

MDN解释如下:Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的。该方法返回被冻结的对象。

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

实例生命周期

Vue1.0和2.0的对比