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

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

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

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

// Vue.set

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

example1.items.splice(indexOfItem, 1, newValue)

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

example1.items.splice(newLength)

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

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

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

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

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

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

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

示例代码:

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <div id="app">

        <ol>

            <li v-for="data in list">{{data.id}} - {{data.name}}</li>

        </ol>

    </div>

    <script type="text/javascript" src="../underscore/underscore-min.js"></script>

    <script type="text/javascript" src="./vue.2.1.8.min.js"></script>

    <script type="text/javascript">

        var oVue = new Vue({

            el : '#app',

            data : {

                list : [

                    {id : 5},

                    {id : 6}

                ]

            }

        });

    </script>

</body>

</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. emacs command

    eval-buffer用来执行.emacs不要再重启了,或cxce执行光标前的一行 eval-region load-file ~/.emacs goto-line global-set-key定义快 ...

  2. zf-监察系统的左侧菜单树的表

    Sys_Right 这个表

  3. Myeclipse或Eclipse中搭建Easyui环境

    1.下载Easyui.网址:http://www.jeasyui.com/download/index.php 2.下载后解压,里面的demo文件夹可以不用添加到工程中. 3.如图所示在工程datag ...

  4. Linux字符编码转换 UTF8转GB3212

    在LINUX上进行编码转换时,既可以利用iconv函数族编程实现,也可以利用iconv命令来实现,只不过后者是针对文件的,即将指定文件从一种编码转换为另一种编码.    一.利用iconv函数族进行编 ...

  5. log4j输出到指定日志文件

    log4j.properties: log4j.logger.myTest=DEBUG,console,FILE log4j.appender.console=org.apache.log4j.Con ...

  6. EL探索

  7. hihoCoder 1257 Snake Carpet（很简单的构造方法）

    2015 ACM / ICPC 北京现场赛 I 题 构造 注意一个小坑,每条蛇的输出是要从头到尾输出的. 还要注意的是,不能开数组去模拟构造过程,然后输出,那样会TLE的. #include < ...

  8. wex5 实战 微信6位数字密码输入设计

    微信支付使用是6位数字输入,用wex5能不能制作这种效果呢? 答案是肯定的. 根据网上提供的数字插件,研究源码后,与wex5进行整后修改,便于利用wex5框架优势. 一 效果演示: 弹出密码框 输入 ...

  9. zencart 掉炸天的tpl_main_page.php

    <?php /** * Common Template - tpl_main_page.php * * @version $Id: tpl_main_page.php 7085 2007-09- ...

  10. opencart添加任意页面到导航栏（修改一级菜单）

      pencart默认的黑色导航栏只显示分类目录下的一级分类,这块整个网页中最显眼的“风水宝地”怎么能让他闲置呢,因此我想到了为opencart导航栏添加自定义页面,它可以连接到任意一个网址或者ope ...