文档原文说
property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的
不过发现一个奇怪的现象，userInfo.age 并没有在data 中定义，当点击按钮更新的时候，视图中的userInfo.age 也发生了变化
<template> <div class=""> <div class="userinfo"> name: {{ userInfo.name }} age: {{ userInfo.age }} </div> <button @click="handleUpdateUserInfo">修改userInfo</button> </div> </template> <script> export default { name: '', data() { return { userInfo: { name: 'Tom', }, } }, methods: { handleUpdateUserInfo() { this.userInfo.name = 'Jack' this.userInfo.age = 23 }, } } </script> <style lang="less"></style> <style lang="less" scoped></style>
但是，如果单独更新 age字段，视图并没有发生变化
handleUpdateUserInfo() { // this.userInfo.name = 'Jack' this.userInfo.age = 23 },
所以，userInfo.age 和文档说的一致，并不是响应式属性，而是userInfo.name 更新了触发视图更新
添加单个响应式属性
要让age也是响应式的，动态增加响应式效果，可以使用this.$set 方法，动态设置响应式属性
语法
// 向嵌套对象添加响应式 property Vue.set(object, propertyName, value)
示例
handleUpdateUserInfo() { // this.userInfo.name = 'Jack' // this.userInfo.age = 23 this.$set(this.userInfo, 'age', 23) },
添加多个响应式属性
handleUpdateUserInfo() { // 创建一个新的对象 this.userInfo = { ...this.userInfo, age: 23, school: 'pku' } },
