Vue：对象更改检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样做：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
下面的例子以此结束这篇博客：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue对象更改检测注意事项例子</title>
<script src="vue.js"></script> </head>
<body>
<div id="app">
<button @click="add()">添加</button>
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div> <script>
new Vue({
el:"#app",
data:{
items:{
name:"daming"
}
},
methods:{
add(){
Vue.set(this.items,'age', 20);
//this.$set(this.items,"age",20); 两者是等价的
}
}
})
</script>
</body>
</html>
可以同时添加多个属性如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue对象更改检测注意事项例子</title>
<script src="vue.js"></script> </head>
<body>
<div id="app">
<button @click="add()">添加</button>
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div> <script>
new Vue({
el:"#app",
data:{
items:{
name:"daming"
}
},
methods:{
add(){
this.items = Object.assign({},this.items,{
age:20,
sex:"male"
})
}
}
})
</script>
</body>
</html>
Vue：对象更改检测注意事项的更多相关文章
- vue 对象更改检测注意事项
- vue学习（九）对象变更检测注意事项
Vue不能检测对象属性的添加和删除,要是必须这么做的话 需要使用 vue.$set() <body> <div id="app"> <h3> { ...
- vue 数组更新检测注意事项
- vue数据更改视图不更新问题----深入响应式原理
Vue响应式原理之官方解释 当你把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为get ...
- Javascript - Vue - vue对象的生命周期
vue对象的生命周期 从vue的创建到销毁会经过一系列的事件,这是vue对象的生命周期. 创建期间的生命周期函数 <div id="box"> <h3 id ...
- 序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用
学习 EF Code First+MVC 时遇到了在请求JsonResult时出现 序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用 的异常,原因 ...
- 序列化类型为“System.Reflection.Module”的对象时检测到循环引用
在使用ajax调用web services时,正好返回的类型为datatable,想用通过json方式直接解析,但调用后,得到如下错误: 序列化类型为“System.Reflection.Module ...
- Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
随机推荐
- Web自动化-浏览器驱动chromedriver安装方法
1.python中安装好selenium包 pip install selenium 2.根据以下驱动对照表下载Chrome对驱动 chromedriver版本 支持的Chrome版本 v2.3 ...
- 在Mac电脑上安装linux系统
1.首页需要下载VMware fusion (百度一下) 2.Ubuntu 镜像文件(.iso) 连接:http://www.jb51.net/LINUXjishu/239493.html 3.打开 ...
- 怎么测试php代码
没有任何一名程序员可以一气呵成.完美无缺的在不用调试的情况下完成一个功能或模块.调试实际分很多种情况. 暴力调试 这种方式简单粗暴,一般PHP程序员都会用,那就是浏览器调试,在编辑器内写完代码后随后打 ...
- 20180705-Java对象和类
Java对象和类 Java作为一种面向对象语言.支持以下基本概念: 多态继承封装抽象类对象实例方法消息解析 本节我们重点研究对象和类的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个 ...
- Elven Postman
Elven Postman Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
- 学习日记14、EF 时间段查询
m_Rep.GetList(a => System.Data.Entity.DbFunctions.DiffDays(DateTime.Now, a.EndDate) < date); 命 ...
- 高级Javascript代码
Javascript是一门很吊的语言,我可能学了假的JavaScript,哈哈,大家还有什么推荐的,补充送那啥邀请码. 本文秉承着:你看不懂是你SB,我写的代码就要牛逼. 1.单行写一个评级组件 &q ...
- xpath的几个常用规则
我们在定位页面元素的时候呢,经常使用到xpath.xpah定位元素,我们可以使用开发者工具,然后右键选取元素的xpath ,但是这种方式得到的xpath是绝对路径,如果页面元素发生变动,经常会出现定位 ...
- P1058立体图（面对代码解释）
传送 样例: 输出样例: (洛谷上面的那个太丑了就不放了) 大佬博客在此 乍一看好像真的没有什么思路 所以我们结合ybr大佬的代码进行分析 疑点都将在代码下面进行分析(面对代码做题模式开始) #inc ...
- algorithm_action
求矩阵Amk.Bkn的乘积 for(i=1;i<=m;i++) for(j=1;j<=n;j++) cij = 0 for(p=1;p<=k;p++) cij += aip*bpj