var vm = new Vue({
el: '#app',
data: {
name: 'jn',
items: [1, 2, 3],
person: {
firstName: 'chan'
}
}
})
1.Vue是一个响应式框架,只有在data中提前声明的变量,才能在视图中响应。如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。以 _
或 $
开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。
2.为什么组件的data是一个函数?如果 data
仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data
函数,每次创建一个新实例后,我们能够调用 data
函数,从而返回初始数据的一个全新副本数据对象。每个组件都会各自独立维护它的数据,因为你每用一次组件,就会有一个它的新实例被创建。
3.由于 JavaScript 的限制,Vue 不能检测以下数组的变动:
- 当你利用索引直接设置一个数组项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
解决方法
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
// 你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:
vm.$set(vm.items, indexOfItem, newValue)
// 为了解决第二类问题,你可以使用 splice:
vm.items.splice(newLength)
4.还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除。对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value)
方法向嵌套对象添加响应式属性。
添加一个新的 age
属性到嵌套的 person
对象:
Vue.set(vm.userProfile, 'age', 23)
// 还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:
vm.$set(vm.userProfile, 'age', 23)
一次性添加多个新的响应式属性
vm.person= Object.assign({}, vm.person, {
age: 23,
job: 'it'
})