标签：遇到 cli fine str offic define user 通过 round
在开发有时会遇到一个问题，明明写的没问题，为啥数据就不响应呢处？
<template> <div> <div> <span>用户名: {{ userInfo.name }}</span> <span>用户性别: {{ userInfo.sex }}</span> <span v-if="userInfo.officialAccount"> 公众号: {{ userInfo.officialAccount }} </span> </div> <button @click="handleAddOfficialAccount">添加公众号</button> </div> </template> <script> export default { data() { return { userInfo: { name: ‘子君‘, sex: ‘男‘ } } }, methods: { // 在这里添加用户的公众号 handleAddOfficialAccount() { this.userInfo.officialAccount = ‘前端有的玩‘ } } } </script>
在上面的代码中，我们希望给用户信息里面添加公众号属性，但是通过this.userInfo.officialAccount = ‘前端有的玩‘ 添加之后，并没有生效，这是为什么呢？
这是因为在Vue内部，数据响应是通过使用Object.definePrototype监听对象的每一个键的getter,setter方法来实现的，但通过这种方法只能监听到已有属性，新增的属性是无法监听到的。
比如上面的公众号，我可以提前在userInfo里面定义好，这样就不是新增属性了，就像下面这样
data() {
return {
userInfo: {
name: ‘子君‘,
sex: ‘男‘,
// 我先提前定义好
officialAccount: ‘‘
}
}
}
标签：遇到 cli fine str offic define user 通过 round
原文地址：https://www.cnblogs.com/DZzzz/p/13366256.html
