很多时候需要保存数据然后复用该数据，因vue的双向绑定总是不能保存原始数据

随笔记录解决方式

1. 不要把变量放置在data中

2. 保存至新的变量

object :  

let obj= Object.assign({}, oldObj) => 保存一个新的对象obj, 操作obj不会对oldObj造成影响

 

array:

let arr= [].concat(oldArr) => 保存一个新的数组arr, 操作arr不会对oldArr造成影响
 
 
 
 

vue 保存数组和对象, 避免双向绑定影响的更多相关文章

  1. vue 数组和对象的双向绑定不响应问题

    对象和数组的数据类型是对象,对象是对象这个是毫无疑问的.数组可以把索引当成键名,把索引对应的元素当成该键名的键值. vue对象有些操作不能双向绑定的原因是vue未改变原对象,以及未给新增属性增加set ...

  2. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  3. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  4. Vue 改变数组中对象的属性不重新渲染View的解决方案

    Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...

  5. vue 关于数组和对象的更新

    在日常开发中,我们用的最多的就是 绑定数据 <div v-for="item in data" :key="item.id"> <!-- 内容 ...

  6. vue - 数据驱动，组件化， 双向绑定原理

    1.数据驱动 传统的前端数据交互是用Ajax从服务端获取数据,然后操作DOM来改变视图: Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它让 ...

  7. vue遍历数组和对象的方法以及他们之间的区别

    前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组   1,使用vue数组变异方法 pop() 删除数组最后一 ...

  8. Vue 使用数组和对象控制Class

    直接上代码: <!doctype html> <html lang="en"> <head> <meta charset="UT ...

  9. vue核心之响应式原理(双向绑定/数据驱动)

    实例化一个vue对象时, Observer类将每个目标对象(即data)的键值转换成getter/setter形式,用于进行依赖收集以及调度更新. Observer src/core/observer ...

随机推荐

  1. 将数组按指定个数分割,并以"|"做分割

    ```js function sliceArray(arr,num){ let newArr=[] for (var i = 0; i < arr.length; i+=num) { if(ar ...

  2. ie浏览器将网页转成pdf

    今天同事让我帮他将网页转成pdf,学了一个.先推荐一个超图的数据库使用指南:http://support.supermap.com.cn/DataWarehouse/WebDocHelp/6.1.1/ ...

  3. 禁用 ipv6

    # 禁用整个系统所有接口的IPv6 net.ipv6.conf.all.disable_ipv6 = # 禁用某一个指定接口的IPv6(例如:eth0, lo) net.ipv6.conf.lo.di ...

  4. vim编辑器操作②

    本文主要介绍vim的常用编辑命令: 字符编辑: x:删除光标所在处的字符: #x:删除光标所在处起始的#个字符: 替换命令: r:替换光标所在处的字符: rCHAR; 例如:替换list中的l为大写L ...

  5. 洛谷P3298 泉

    时空限制 1000ms / 128MB 题目描述 作为光荣的济南泉历史研究小组中的一员,铭铭收集了历史上x个不同年份时不同泉区的水流指数,这个指数是一个小于. 2^30的非负整数.第i个年份时六个泉区 ...

  6. 【python之路26】字符串之格式化%和format

    Python基础之杂货铺   字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式, ...

  7. TZ_05_Spring_转账事务基于xml的开发

    事务:通过接口的动态代理加强AccountService 实现转账的事务 ApplicationContext.xml <?xml version="1.0" encodin ...

  8. TZ_05_Spring_Proxy基于接口的动态代理和基于类的动态代理

    代理:为了增强方法在不添加代码的情况下 1.Proxy基于接口的动态代理 /** * 模拟一个消费者 * @author Administrator * */ public class Client ...

  9. import schedule ImportError: No module named schedule

    安装pip sudo apt-get install python-pip 安装schedule模块 pip install schedule PS: 如果已经安装pip,可能出现以下问题,按照提示重 ...

  10. node学习记录之res,req处理方法

    上一篇中,我们讲述了怎么去用node搭建一个服务器环境,然后设置路由 在路由中我们用了一些方法,req.query("id") , res.end() , res.send()这三 ...