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()进行全局定义(全局 ...
随机推荐
- BZOJ 2286: [Sdoi2011]消耗战 虚树
Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的岛屿,而且他们已经没有足够多的能源维系战斗,我军 ...
- [14th CSMO Day 1 <平面几何>]
关于LowBee苦思冥想的结果(仅供参考):
- NOIp 数据结构专题总结 (1)：STL、堆、并查集、ST表、Hash表
系列索引: NOIp 数据结构专题总结 (1) NOIp 数据结构专题总结 (2) STL structure STL 在 OI 中的运用:https://oi.men.ci/stl-in-oi/ s ...
- PHP常用工具函数之手机号相关
1.手机号正确与否判定 //测试手机号 $phone = '17777777777'; $pattern = '/^1[356789]\d{9}$/'; $is = preg_match($patte ...
- HttpClient配置及示例代码
HttpComponents是Apache 旗下的项目.其中有一个HttpClient,即HTTP客户端. ... ... 大多时候我们只需要HttpClient,httpCore是开发服务端的我们可 ...
- 《图解设计模式》读书笔记3-1 Singleton模式
目录 单例模式 饿汉式 懒汉式 线程安全的懒汉式 单例模式 确保任何情况下都只有一个实例 饿汉式 public class Singleton { //在类被加载的时候运行一次,这是本类构造函数的唯一 ...
- mariadb（三）查
-查询基本使用(条件,排序,聚合函数,分组,分页) 1)创建一个表结构然后添加数据 create table baba (id int unsigned not null auto_increment ...
- ES6中set的用法回顾
ES6中的set类似一个数组,但是其中的值都是唯一的,Set本身是一个构造函数,用来生成 Set 数据结构. set函数可以接受一个数组作为参数,用来初始化: const set = new Set( ...
- Kestrel web server implementation in ASP.NET Core
https://docs.microsoft.com/en-us/aspnet/core/fundamentals/servers/kestrel?tabs=aspnetcore1x&view ...
- springMvc中自定义bean转换接收前台传的参数
转载:https://blog.csdn.net/u013476435/article/details/81538099 因前端整体传参时,参数名都不是驼峰写法,类似 music_name,music ...