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()进行全局定义(全局 ...
随机推荐
- Dubbo学习-1-基础知识
分布式基础理论 1.什么是分布式系统: 分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像是单个相关系统.分布式系统是建立在网络之上的软件系统 随着互联网发展,网站应用规模的不断扩大,常规的 ...
- php接受post传值的方法
这段时间在研究php的接口,利用jmeter模拟发送数据给php服务器,看php如何接收post传输过去的数据,遇到了几个问题,经过一番度娘之后终于有所理解,记录一下: 这里记录常用的两种post方式 ...
- pl/sql中return和exit区别
经测试: 1.exit只能用于循环中,并且退出循环往下执行: 2.return可用于循环或非循环,并且退出整个程序模块不往下执行. declare i number :=1; j number :=1 ...
- 纯CSS实现项目展示遮罩详情效果
本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYP ...
- C++ Standard Template Library (STL) 高级容器
更多 STL 数据结构请阅读 NOIp 数据结构专题总结(STL structure 章节) std::map Definition: template < class Key, // map: ...
- [CSP-S模拟测试]:Dash Speed（线段树+并查集+LCA）
题目描述 比特山是比特镇的飙车圣地.在比特山上一共有$n$个广场,编号依次为$1$到$n$,这些广场之间通过$n−1$条双向车道直接或间接地连接在一起,形成了一棵树的结构. 因为每条车道的修建时间以及 ...
- java 中的运算符
Java的运算符,分为四类: 算数运算符.关系运算符.逻辑运算符.位运算符. 算数运算符():+ - * / % ++ -- 关系运算符():== != > >= < <= 逻 ...
- 圆周运动的css3特效案例
<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...
- 洛谷P2661 信息传递（最小环，并查集）
洛谷P2661 信息传递 最小环求解采用并查集求最小环. 只适用于本题的情况.对于新加可以使得两个子树合并的边,总有其中一点为其中一棵子树的根. 复杂度 \(O(n)\) . #include< ...
- JavaScript中的十种操作符
① 一元操作符(参与的只有一个变量) 前置递增递减(语句解析到递增/递减时值就被改变了) 后置递增递减(整个语句执行后值再改变) 递增递减也可用于字符串,布尔值,对象等,结果都将是数值: ;v ...