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: {
  }
})

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

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

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

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

7. Vue实例对象允许有el属性，但其他组件实例不允许有。Vue实例对象的template属性中的标签，会被放在el容器标签里面。