vue中的v-model绑定数据深层次问题

vue有些赋值方式是非响应式的，页面不会刷新，可以参考下面（百度参考）：

Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如： vm.items.length = newLength

当第一种情况需求时，可以使用 this.$set(this.arr,index,newVal)

Vue 不能检测对象属性的添加或删除：

可以使用 this.$set(this.person,'age',12)

 当需要添加多个对象时， `Object.assign({},this.person,{age:12,name:'wee'})`

PS：Vue实现对数组、对象的深拷贝、复制

当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），如下

数组：

let a = [1,2,3];

let b = a;

b.push(4); // b中添加了一个4

alert(a); // a变成了[1,2,3,4]

对象：

let obj = {a:10};

let obj2 = obj;

obj2.a = 20; // obj2.a改变了，

alert(obj.a); // 20，obj的a跟着改变

这就是由于对象类型直接赋值，只是将引用指向同一个地址，导致修改了obj会导致obj2也被修改

所以在vue中，如果多个组件引用了同一个对象作为数据，那么当其中一个组件改动对象数据时，其他对象的数据也会同步改动。有这种双向绑定的需要的话，那么自然是最好的，但如果不需要这种绑定而希望各组件的对象数据之间相互独立，即是互不关联的对象副本的话，可以用下面的方法解决

computed: {

data: function () {

var obj={};

obj=JSON.parse(JSON.stringify( this .templateData)); //this.templateData是父组件传递的对象

return obj

}

总结

以上所述是小编给大家介绍的vue 数组和对象不能直接赋值情况和解决方法，希望对大家有所帮助。

vue中的v-model绑定数据深层次问题相关推荐

探讨Vue 数据监测原理-第五节-展开介绍 Vue中监测-【数组】数据的原理
文章目录探讨一下Vue 数据监测的原理本次探讨共的第五个章节第五节:展开介绍 Vue中监测-[数组]数据的原理 1. 案例 1.1. 页面案例 2. 数组形式|对象形式爱好的区别 2.1. 页面 ...
Vue中实现父子组件的数据的双向绑定（vue.sync的用法）
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的问题描述: 问题场景就是子组件传递数据给父 ...
vue中props的双向绑定
在vue的学习中,一开始我是自己写组件练手的,在这个过程中我遇到一个问题: props:父组件传递给子组件参数 (1)props直接在子组件里直接使用是可以实时更新的 (2)props如果在creat ...
vue 中 provide 和 inject 共享数据
project 和 inject 是 vue 2.2.0 新增内容.官网说明 >> https://cn.vuejs.org/v2/api/#provide-inject 1. 概述后代 ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
d3.js中选择元素和绑定数据
回顾一下如何选择元素在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部这两个函数返回的结果称为选择集. ...
vue中 $destroy 并且 removeChild 组件数据响失效
this.$destroy() 作用: 完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器.触发 beforeDestroy 和destroyed 的钩子. 当销毁一个组件时我们有 ...
vue中使用vuex-persistedstate插件实现数据持久化
vuex可以进行全局的状态管理,但刷新后数据会消失.vuex-persistedstate会将vuex的store中的数据默认缓存到浏览器的localStorage中安装vuex-persisted ...
Vue中使用moment将时间戳数据格式化显示(el-table中)
场景在使用el-table显示数据时,请求后台数据获取的时间格式是时间戳格式然后前端使用el-table进行显示数据 <el-table v-loading="loading&qu ...

vue中的v-model绑定数据深层次问题

vue中的v-model绑定数据深层次问题相关推荐

最新文章

热门文章