有些时候，不得不想添加、修改数组和对象的值，但是直接添加、修改后getter、setter又失去了。

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

  1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时，例如： vm.items.length = newLength

为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将触发状态更新：

  1. // Vue.set
  2. Vue.set(example1.items, indexOfItem, newValue)
  1. // Array.prototype.splice`
  2. example1.items.splice(indexOfItem, 1, newValue)

避免第二种情况，使用 splice：

  1. example1.items.splice(newLength)

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

  1. Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

  1. this.$set(this.someObject,'b',2)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

  1. // 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
  2. this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
  1. this.someObject = _.extend({ a: 1, b: 2 }, this.someObject)

示例代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.  
  9.     <div id="app">
  10.         <ol>
  11.             <li v-for="data in list">{{data.id}} - {{data.name}}</li>
  12.         </ol>
  13.     </div>
  14.  
  15.     <script type="text/javascript" src="../underscore/underscore-min.js"></script>
  16.     <script type="text/javascript" src="./vue.2.1.8.min.js"></script>
  17.     <script type="text/javascript">
  18.         var oVue = new Vue({
  19.             el : '#app',
  20.             data : {
  21.                 list : [
  22.                     {id : 5},
  23.                     {id : 6}
  24.                 ]
  25.             }
  26.         });
  27.     </script>
  28. </body>
  29. </html>

Vue 响应式总结的更多相关文章

  1. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  2. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

  3. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  4. vue响应式数据变化

    vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...

  5. Vue响应式原理及总结

    Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...

  6. 详解Vue响应式原理

    摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

  7. vue响应式原理，去掉优化，只看核心

    Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...

  8. 深入Vue响应式原理

    深入Vue.js响应式原理 一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h =& ...

  9. vue响应式原理解析

    # Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...

  10. Vue响应式变化

    Vue有一个很方便的特性就是Vue的双向绑定,即响应式变化,在Vue2.X版本中,Vue响应式变化靠的是Object.defineProperty方法实现的,但是这个方法有个问题,就是对数组的支持不全 ...

随机推荐

  1. Eclipse中Ctrl+Alt+Down和Ctrl+Alt+Up不起作用

    不起作用是因为跟因特尔的快捷键冲突. 1.在桌面上右键,选择“图形属性......” 2.选择“选项和支持” 3.更改快捷键. 注意:单纯禁用英特尔的快捷键可能不起作用.

  2. Server对象

    Server是服务器对象,定义了一个与Web服务器相关的类,用于访问服务器上的资源. 属性 MachineName   获取服务器的计算机名.    返回本地计算机的名称 ScriptTimeout  ...

  3. android 手势识别学习

    引自http://www.cnblogs.com/android100/p/android-hand.html    http://blog.csdn.net/jiangshide/article/d ...

  4. 集合-字典（Lookup/SortedDictionary）

    Lookup<TKey, TElement>非常类似于Dictionary<TKey, TValue>,但是把键映射在一个值集上. 必须调用ToLookup方法创建Lookup ...

  5. 基于Spring的异步系统实现方案

    一般的实现方案 发送异步消息所使用的工具类: import java.util.Date; import javax.jms.Destination; import javax.jms.JMSExce ...

  6. Android网络开发之OkHttp--基本用法实例化各个对象

    1.实例化OkHttpClient对象,OkHttpClient包含了以下属性,以及set()和get()方法.但并没有包含具体的执行方法,详情见源码. //实例化OkHttpClent对象 priv ...

  7. OleDB连接字符串很基础却很重要

    --Oracle<add name="HISConnectionString" connectionString=" Server=127.0.0.1;Provid ...

  8. python第一天（文件流以及控制流）简单总结

    第一天的python学习主要是: (1)对python的一个大致了解 值得注意的是在window下开发要注意path的问题. (2)对python控制流的一个了解 常用的if ,while ,for ...

  9. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  10. 机器学习模型 bias 和 variance 的直观判断

    假设我们已经训练得到 一个模型,那么我们怎么直观判断这个 模型的 bias 和 variance? 直观方法: 如果模型的 训练错误 比较大,并且 验证错误 和 训练错误 差不多一样,都比较大,我们就 ...