Vue:重要总结
作者:互联网
总结
- 组件实例上的属性(从data,computed得来) 被修改时,vue能够监测得到,并重新解析模板上的数据,这个过程叫 响应式
- 组件实例上的属性或者下级属性想要支持响应式,需要有get和set方法支持。
- 模板用到了组件实例的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: {
}
})
-
预先定义好的属性(在data,computed..)是支持响应式的。后面动态追加的属性,用原生写法不支持响应式(比如age未定义,在methods某个方法里执行 this.person.age = 18,属性确实加上并且赋值为18了,但非响应式,即vue并不会重新去解析模板),得使用Vue.set()或者 this.$set() 来追加一个属性并支持响应式。
-
在data,conputed,methods中的属性和方法最终都会作为当前组件实例的属性和方法。
-
在组件实例上根级属性或下级属性中,只要是数组类型的属性,此属性中的元素不具备set和get方法,即默认不支持响应式。如果需要数组元素支持响应式,有两种方法:
- 调用数组的push,splice,shift等能对原数组造成改变的数组方法,这些方法会触发重新解析模板。
- 使用Vue.set()或者 this.$set()
标签:总结,set,重要,响应,Vue,组件,data,属性 来源: https://www.cnblogs.com/ibcdwx/p/16295089.html