很多时候需要保存数据然后复用该数据，因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. ES6 class继承

    ES6 class继承 class类的继承 class可以通过extends关键字实现继承,这笔ES5的通过修改原型连实现继承要清晰和方便很多. class Point{ } class ColorP ...

  2. 如何用SPSS做联合分析

    如何用SPSS做联合分析 如果产品的描述是由几个属性特征决定的,比如说mp3的音质.外形.容量.价格等等,商家为了确定哪个属性对消费者的影响最大,以及预测什么样的属性组合最受消费者的欢迎,选择的办法应 ...

  3. CCS开发指南

    第一章  CCS概述 1 1.1 CCS概述 1 1.2 代码生成工具 3 1.3 CCS集成开发环境 5 1.3.1 编辑源程序 5 1.3.2创建应用程序6 1.3.3 调试应用程序 6 1.4  ...

  4. Nonsense Time

    Nonsense Time 时间限制: 10 Sec  内存限制: 128 MB 题目描述 You a given a permutation p1,p2,…,pn of size n. Initia ...

  5. PHP jpgraph的一点小提示和方法

    PHP默认是不启用GD库的,因为需要在php.ini的配置文件中将extension=php_gd2.dll注释打开.打开后你就可以画一些你想画的各种奇葩图案了.什么?不会画?那回去学基础! 今天看了 ...

  6. Vue.js系列之项目搭建（vue2.0 + vue-cli + webpack ）

    1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令 ...

  7. 微信公众号菜单demo

    { "button": [ { "name": "客户中心", "sub_button": [ { "type ...

  8. SpringBoot随机数

    # 随机字符串 com.didispace.blog.value=${random.value} # 随机int com.didispace.blog.number=${random.int} # 随 ...

  9. Spring AOP（转）

    原文:Spring实现AOP的4种方式 Spring AOP 详解 Spring实现AOP的4种方式 先了解AOP的相关术语:1.通知(Advice):通知定义了切面是什么以及何时使用.描述了切面要完 ...

  10. fidder抓包使用(一)

    fidder是会占用 jupyter 端口的,在fidder里边最上边找到tools--->options-->connections里边的8888改成别的重启jupyter就好了