Vue

【Vue】 实例化

2019-10-02  本文已影响0人  Qingelin

1. 创建Vue实例:

//通过 new Vue创建一个vm跟vue实例
var vm = new Vue {
      //选项对象options
}

1.选项对象options的值有多种类型:(当它们都有前缀 $时表示属性API,以便与用户定义的属性区分开来)

  1. data /props /propsData /computed /methods /watch
  2. el /template /render /renderError
  3. beforeCreate /created /beforeMount /mounted /beforeUpdate /updated /activated /deactivated /beforeDestroy /destroyed /errorCaptured
  4. directives /filters /components /parent /mixins /extends /provide /inject
  5. 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()

  1. 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。
  2. const object2 = Object.freeze(object1); 其中 object2 和 object1 是同一个对象
上一篇 下一篇

猜你喜欢

热点阅读