其他分享
首页 > 其他分享> > Vue:重要总结

Vue:重要总结

作者:互联网

总结

  1. 组件实例上的属性(从data,computed得来) 被修改时,vue能够监测得到,并重新解析模板上的数据,这个过程叫 响应式
  2. 组件实例上的属性或者下级属性想要支持响应式,需要有get和set方法支持。
  3. 模板用到了组件实例的a属性对象里的b属性,且b属性并没有原先定义好,此情况是不会报错的。但如果组件实例a属性没有定义,而模板却用到了,则会报错。
    不会报错:
<template>
  <h1>{{person.age}}</h1>
</template>

new Vue({
  el: '#app',
  data: {
    person: {
      
    }
  }
})

会报错:

<template>
  <h1>{{person}}</h1>
</template>

new Vue({
  el: '#app',
  data: {
  }
})
  1. 预先定义好的属性(在data,computed..)是支持响应式的。后面动态追加的属性,用原生写法不支持响应式(比如age未定义,在methods某个方法里执行 this.person.age = 18,属性确实加上并且赋值为18了,但非响应式,即vue并不会重新去解析模板),得使用Vue.set()或者 this.$set() 来追加一个属性并支持响应式。

  2. 在data,conputed,methods中的属性和方法最终都会作为当前组件实例的属性和方法。

  3. 在组件实例上根级属性或下级属性中,只要是数组类型的属性,此属性中的元素不具备set和get方法,即默认不支持响应式。如果需要数组元素支持响应式,有两种方法:

  1. 调用数组的push,splice,shift等能对原数组造成改变的数组方法,这些方法会触发重新解析模板。
  2. 使用Vue.set()或者 this.$set()

标签:总结,set,重要,响应,Vue,组件,data,属性
来源: https://www.cnblogs.com/ibcdwx/p/16295089.html