【Vue】 实例化
2019-10-02 本文已影响0人
Qingelin
1. 创建Vue实例:
//通过 new Vue创建一个vm跟vue实例
var vm = new Vue {
//选项对象options
}
1.选项对象options的值有多种类型:(当它们都有前缀 $时表示属性API,以便与用户定义的属性区分开来)
- data /props /propsData /computed /methods /watch
- el /template /render /renderError
- beforeCreate /created /beforeMount /mounted /beforeUpdate /updated /activated /deactivated /beforeDestroy /destroyed /errorCaptured
- directives /filters /components /parent /mixins /extends /provide /inject
- name /delimiters /functional /model /inheritAttrs /comments
2. 选项对象options中的data的属性的行为:
一旦创建一个vue跟实例,那么他将会把data对象中所有的属性都添加到vue的响应式系统中,当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
【注意】只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性,当改变这个属性的值的时候页面不会重新渲染的。
例如:
//html
<div id="app">
<span class=span-a>
{{obj.a}}
</span>
<span class=span-b>
{{obj.b}}
</span>
</div>
//js
var app = new Vue({
el: '#app',
data: {
obj: {
a: 'a',
}
},
})
app.obj.a = 'a2'
结果为:span-a 中显示a2,span-b 中不显示
3. Object.freeze()
- 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。
- const object2 = Object.freeze(object1); 其中 object2 和 object1 是同一个对象