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>效果：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue开发之封装分页组件与使用,结合实例形式分析了vue.js封装分页组件操作以及使用组件进行分页的相关实现技巧,需要的朋友可以参考下2019-04-04
vue 基于abstract 路由模式 实现页面内嵌的示例代码
这篇文章主要介绍了vue 基于abstract 路由模式 实现页面内嵌的示例代码，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue echarts实现航班选座案例分析,代码是使用echarts来实现的，主要用到的是svg和自定义地图的相关知识，需要的朋友可以参考下2022-05-05
这篇文章主要为大家介绍了vue3响应式实现readonly从零开始教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
下面小编就为大家分享一篇在Vue组件上动态添加和删除属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue3如何实现挂载并使用axios，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本篇文章主要介绍了使用vue.js实现联动效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要介绍了Vue3使用mitt进行组件通信的步骤，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-05-05
vue使用vue-json-viewer插件展示JSON格式数据的方法
这篇文章主要给大家介绍了关于vue使用vue-json-viewer插件展示JSON格式数据的相关资料,前端使用这个插件可以方便展现出json格式的数据,下载引入使用代码可直接使用,需要的朋友可以参考下2024-05-05
vue3.0项目小白填坑之vue3.0+vite获取环境变量
Vue3项目使用vite作为打包工具时,环境变量可以保存在.env文件中,在build时进行解析,这篇文章主要给大家介绍了关于vue3.0项目小白填坑之vue3.0+vite获取环境变量的相关资料,需要的朋友可以参考下2024-03-03
最新评论