vue中向data添加新属性的三种方式小结
更新时间：2022年04月20日 14:50:39 作者：a@do it
这篇文章主要介绍了vue中向data添加新属性的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
向data添加新属性的三种方式
原理分析
首先在了解这三种方式之前，我觉的有必要说一下，为啥不能直接手动给data中的对象添加属性呢？
下面咱们一块分析下：
vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式；
const obj = {};
let val = 'kk'
Object.defineProperty(obj,'name',{
get(){
console.log('访问了')
return val
},
set(newval){
if(newval !==val)
val = newval;
console.log('设置',newval)
}
})在我们访问或者设置obj.name的时候，会相继出发 setter，getter；然而在给obj添加属性的时候，却没有触发属性拦截；
其实上边的代码是将obj对象的name属性设置成了响应式数据，但是新添加的属性并没有通过Object.defineProperty 设置成响应式，所有这就是为什么vue 的data中对象新加属性页面无法更新，但是数据上却又我们新加属性的原因。
三种方式
1.Vue.set()
Vue.set( target, propertyName/index, value ) 参数
{Object | Array} target{string | number} propertyName/index{any} value
返回值：设置的值
通过Vue.set向响应式对象中添加一个property，并确保这个新 property同样是响应式的，且触发视图更新
data() {
return {
msg:{
name:'黑泽明',
hero:true
}
}
},
methods: {
addProperty(){
this.$set(this.msg, 'sex', '男')
}
},2.Object.assign()
直接使用Object.assign()添加到对象的新属性不会触发更新。
应创建一个新的对象，合并原对象和混入对象的属性
data() {
return {
msg:{
name:'黑泽明',
hero:true
}
}
},
addProperty(){
this.msg = Object.assign({},this.msg,{sex:'name'});
},3.$forceUpdate
$forceUpdate迫使Vue 实例重新渲染
data() {
return {
msg:{
name:'黑泽明',
hero:true
}
}
},
addProperty(){
this.msg.sex = '男';
this.$forceUpdate()
},小结一下吧：
- 对象中添加少量的新属性，可以直接采用Vue.set()
- 对象中添加多个新属性，则通过Object.assign()创建新对象
- 如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)
vue组件 data等属性介绍
注意：
1.组件中的data属性的内容，必须是一个function类型，并且必须要有返回值。用法跟实例中的data使用是一样的，同时也有实例化对象的其他属性如，methods
2.因为如果，不是这里面的对象，而是一个公共的对象实例，可能会出现错误。不同的组件如果改变了公共的对象然后返回，对其他组件有影响
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<my-com></my-com>
</div>
<script>
Vue.component('myCom',{
template:'<h3>陈小帅是真的帅呢 +++ {{ msg }}</h3>',
data:function () {
return{
msg:'组件中的data内容'
}
}
});
//组件中的data属性的内容，必须是一个function类型，并且必须要有返回值。用法跟实例中的data使用是一样的，同时也有实例化对象的其他属性如，methods
//因为如果，不是这里面的对象，而是一个公共的对象实例，可能会出现错误。不同的组件如果改变了公共的对象然后返回，对其他组件有影响
var vm = new Vue({
el:'#app',
data:{}
});
</script>
</body>
</html>效果：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了渲染器的工作原理,以及如何将真实dom或者组件用虚拟dom的形式进行描述并渲染,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要给大家介绍了关于vue获取当前路由的五种方式,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
本文主要介绍了Vue封装远程下拉框组件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
vue css 引入asstes中的图片无法显示的四种解决方法
这篇文章主要介绍了vue css 引入asstes中的图片 无法显示的几种解决方案,本文给出了四种解决方法，每种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
这篇文章主要介绍了vue源码解析之事件机制原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
下面小编就为大家分享一篇解决vue-cli + webpack 新建项目出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
过渡Vue在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果这篇文章主要给大家介绍了关于如何利用vue实现css过渡和动画的相关资料,需要的朋友可以参考下2021-11-11
vue中对象的赋值Object.assign({}, row)方式
这篇文章主要介绍了vue中对象的赋值Object.assign({}, row)方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue中的虚拟dom知识点总结，文章围绕主题内容展开详细介绍，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-04-04
今天小编就为大家分享一篇vuex state中的数组变化监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论