vue中向data添加新属性的三种方式小结
目录
- 向data添加新属性的三种方式
- 原理分析
- 三种方式
- 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.js数据绑定之data属性
Vue.js是JavaScript的一个MVVM库,M是指模型数据,V是指视图容器,VM是指视图模型,模型数据通过视图模型监听视图容器的变化,而视图容器通过视图模型获取模型数据的变化进行渲染,实现了数据的双向绑定. data属性 data属性是Vue实例的数据对象,可以绑定的是对象或者是函数. 当数据对象一旦被data绑定就会发生变化,数据对象中的属性会拥有get和set属性,用来监听数据变化,实时响应. Vue实例会代理data绑定对象上的所有属性,即所有属性直接添加到Vue实例化对象中. V
-
vue 子组件修改data或调用操作
<子组件 ref='xxx'></子组件> 父组件: this.refs.xxx.子组件定义的方法() 外部: vm.$refs.xxx.子组件定义的方法() 注意:子组件添加 ref 属性,父组件才可以通过 refs 获取. 补充知识:vue更新data值,如何重新渲染组件? 一:先介绍一下Vue.set()方法 注:如果从服务端返回的数据量较少,或者只有几个字段,可以用vue的set方法,如果数据量较大,请直接看第二种情况. 官网API是这样介绍的: Vue.set(targe
-
vue 实现根据data中的属性值来设置不同的样式
style动态赋值 margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式 补充知识:vue 条件判断绑定内联样式 当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu
-
vue中向data添加新属性的三种方式小结
目录 向data添加新属性的三种方式 原理分析 三种方式 vue组件 data等属性介绍 向data添加新属性的三种方式 原理分析 首先在了解这三种方式之前,我觉的有必要说一下,为啥不能直接手动给data中的对象添加属性呢? 下面咱们一块分析下: vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式: const obj = {}; let val = 'kk' Object.defineProperty(obj,'na
-
Intellij IDEA 添加jar包的三种方式(小结)
一.直接复制:(不推荐) 方法:直接将硬盘上的jar包复制粘贴到项目的lib目录下即可. 注意: 1.对于导入的eclipse项目,该方式添加的jar包没有任何反应,用make编译项目会报错 2.对于在idea中创建的项目,该方式添加jar包,编译不报错,但是打开Structure会有"...jar ... is missing ..."的提示,需要点击"Fix"或红灯泡解决. 二.通过Modules的Dependencies添加:(推荐) 1.打开 File -&
-
解决vue动态为数据添加新属性遇到的问题
vue为数据添加属性时遇到的坑,通过self.book[i].['cur']=false;动态为数据添加属性时,数据变化了,但是视图没有发生更新. 具体原因不明白.... 解决方法:通过set来添加属性this.set来添加属性this.set(self.book[i],'cur',false); 这样子来设置,就没问题了 以上这篇解决vue动态为数据添加新属性遇到的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
Vue 实现列表动态添加和删除的两种方法小结
下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - vue实现列表增加和删除</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script&g
-
vue data引入本地图片的两种方式小结
我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } } } </script> 第二种 <template> <img :s
-
Python获取对象属性的几种方式小结
本文将简单介绍四种获取对象的方法. 假如有以下的类: class Person(object): def __init__(self, name, age): self.name = name self.age = age def __str__(self): return 'name=%s, age=%s' % (self.name, self.age) 方法一:使用属性运算符 print(xmr.name) 方法二:通过属性字典__dict__ print(xmr.__dict__['nam
-
Android如何添加控件监听器(三种方式)
目录 本文概述: 方式一:在布局中添加onClick属性 方式二:采用匿名内部类 方式三:MainActivity 实现 View.OnClickListener 接口 本文概述: 本文介绍了,在Android中为控件添加监听的三种常见方式 设置控件的onClick属性 采用匿名内部类 MainActivity 实现 View.OnClickListener 接口 方式一:在布局中添加onClick属性 编写思路: 在布局文件中: 指定控件 id 指定控件onClick属性 在MainActiv
-
Vue引入并使用Element组件库的两种方式小结
目录 前言 Element-ui(饿了么ui) 安装element-ui 引入element-ui 完整引入element-u 按需引入element-ui 总结 前言 在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中用的很多的,下面就介绍下如何在eue项目中引入element-ui组件库 Element-ui(饿了么ui) element-ui(饿了
-
详解Shell脚本中调用另一个Shell脚本的三种方式
主要以下有几种方式: Command Explanation fork 新开一个子 Shell 执行,子 Shell 可以从父 Shell 继承环境变量,但是子 Shell 中的环境变量不会带回给父 Shell. exec 在同一个 Shell 内执行,但是父脚本中 exec 行之后的内容就不会再执行了 source 在同一个 Shell 中执行,在被调用的脚本中声明的变量和环境变量, 都可以在主脚本中进行获取和使用,相当于合并两个脚本在执行. 第一种:fork 特点:会生成子PID而且可重复被
-
vue路由跳转router-link清除历史记录的三种方式(总结)
目录 路由跳转router-link清除历史记录 官方文档提供了如下三种方式 vue跳转后不记录历史记录 路由跳转router-link清除历史记录 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push. 2.this.\$router.push这个方法会向 histo