vue给data对象添加新属性会发生什么,vue改变data的值
本文主要介绍了在vue中给数据添加新属性的三种方法的总结，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
向数据添加新属性的三种方式：三种方式的原理分析引入vue组件数据和其他属性
向data添加新属性的三种方式
原理分析
在了解这三种方法之前，我觉得有必要说一句，为什么不能直接手动给数据中的对象添加属性？
下面咱们一块分析下：
Vue2是通过数据劫持“Object.defineProperty”的数据响应公式；
const obj={ }；
让val=kk
Object.defineProperty(obj， name ，{
get(){
Console.log(已访问)
返回值
},
set(newval){
如果(newval！==val)
val=newval
Console.log (Settings ，newval)
}
})
当我们访问或设置obj.name时，我们会启动setter和getter此起彼伏；但是在obj中添加属性时，不会触发属性拦截；
上面的代码其实是将obj对象的name属性设置为responsive data，但是新增的属性并没有通过Object.defineProperty设置为responsive data，所以这也是为什么vue的数据中新增的对象的属性页无法更新，但是我们给数据增加了新的属性。
三种方式
1.Vue.set()
vue.set(目标，属性名称/索引，值)参数
{ object array } target { string number } property name/index { any } value返回值：设置值。
通过Vue.set给responsive对象添加一个属性，确保新的属性也是responsive，并触发视图更新。
data() {
返回{
消息：{
姓名：“黑泽明”，
英雄：真的
}
}
},
方法：{
addProperty(){
这个。$set(this.msg， sex ， male )
}
},
2.Object.assign()
使用Object.assign()直接添加到对象的新属性不会触发更新。
您应该创建一个新对象，并合并原始对象和混合对象的属性。
data() {
返回{
消息：{
姓名：“黑泽明”，
英雄：真的
}
}
},
addProperty(){
this.msg=Object.assign({}，this.msg，{ sex: name })；
},
3.$forceUpdate
$forceUpdate强制重新呈现Vue实例
data() {
返回{
消息：{
姓名：“黑泽明”，
英雄：真的
}
}
},
addProperty(){
This.msg.sex=男性；
这个。$forceUpdate()
},
小结一下吧：
向对象添加一些新属性。可以直接给Vue.set()对象添加多个新属性，然后通过Object.assign()创建一个新对象。如果实在不知道怎么操作，可以用$forceUpdate()强制刷新(不推荐)。
vue组件 data等属性介绍
注意：
1.组件中数据属性的内容必须是函数类型，并且必须有返回值。用法与实例中的数据用法相同，实例化对象还有其他属性，如方法。
2.因为如果不是这里的对象，而是一个公共对象实例，可能会发生错误。如果不同的组件改变了公共对象然后返回，就会影响到其他组件。
HTML代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
脚本src=./lib/vue.js/script
/头
身体
div id=应用程序
我的网站/我的网站
/div
脚本
Vue.component(myCom ，{
模板： h3陈小帅真帅{{ msg }}/h3 ，
数据：函数(){
返回{
消息：“组件中的数据内容”
}
}
});
//组件中数据属性的内容必须是函数类型，并且必须有返回值。用法与实例中的数据用法相同，实例化对象还有其他属性，如方法。
//因为如果它不是内部的对象，而是公共对象实例，则可能会发生错误。如果不同的组件改变了公共对象然后返回，就会影响到其他组件。
var vm=new Vue({
埃尔： #app ，
数据：{}
});
/脚本
/body
/html
效果：
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。