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
下一篇：vue-cli中devServer.proxy相关配置项的使用
本文地址：http://www.codeinn.net/misctech/204310.html
