变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

下面上实例代码:

 <div id="example">

   <div>

     <button @click="concat()">concat</button>

     <button @click="slice()">slice</button>

     <button @click="filter()">filter</button>

   </div>

   <ul>

     <li v-for="item in items">

       {{item.list}}

     </li>

   </ul>

 </div>

 <script>

   var example = new Vue({

     el:"#example",

     data:{

       items:[

         {list:5},

         {list:6},

         {list:7}

       ],

       addValue:{list:10}

     },

     methods:{

       concat(){

      this.items= this.items.concat(this.addValue)

       },

       slice(){

       this.items = this.items.slice(1)

       },

       filter(){

       this.items = this.items.filter(function(item,index,arr) {

           return (index > 0)

         })

       }

     }

   })

以上操作并不会导致Vue丢弃现有DOM并重新渲染整个列表。Vue实现了一些智能启发式方法来最大化DOM元素重用，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作

#注意事项

 注意事项

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

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

 当你修改数组的长度时，例如：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)

上段文字的意思就是假如有一个数组

 // 第一类问题如下

 var arr = [1,2,3,4,5];

 arr[0] = 6; // 利用索引直接设置一个项时Vue检测不到

 //第一类问题需要这样解决:

 Vue.set(arr, 0, 6);

 //第二类问题如下:

 var arr = [1,2,3,4,5];

 arr.length = 2; // 这样Vue也是无法检测到的

 //第二类方法可以用splice解决

 arr.splice(2);

直接上代码结束这篇博客

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>注意事项</title>

 <script src="vue.js"></script>

 </head>

 <body>

   <div id="example">

     <div>

       <button @click="setVal">setVal</button>

       <button @click="setLength">setLength</button>

       <button @click="pop">pop</button>

     </div>

     <ul>

       <li v-for="item in items">{{ item }}</li>

     </ul>

     <p> {{ message }} </p>

   </div>

   <script>

   var watchFunc = function(){

     example.message = "数据发生变化";

     setTimeout(function(){

       example.message = "";

     },500)

   }

  var example = new Vue({

       el:"#example",

       data:{

         items:['Foo','Bar','BaZ',"Hello"],

         message:"",

       },

       watch:{

         items:watchFunc

       },

       methods:{

         pop(){

           this.items.pop()

         },

         setVal(){

           Vue.set(this.items,0,'match')

         },

         setLength(){

           this.items.splice(2);

         }

       }

     })

   </script>

 </body>

 </html>

Vue-列表渲染 非变异方法的更多相关文章

  1. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  2. Vue列表渲染-变异方法

    Vue 包含一组观察数组的变异方法,变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组 所以它们也将会触发视图更新.这些方法如下: push() pop() shi ...

  3. Vue.js高效前端开发 • 【Vue列表渲染】

    全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...

  4. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  5. Vue入门系列（三）之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  6. vue 列表渲染

    在Vue官网中写道,vue无法直接用索引设置元素, 如 vm.items[0] = {}: 提出的解决方法是用 : example1.items.$set(0, { childMsg: 'Change ...

  7. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  8. (尚009)Vue列表渲染

    变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面. 1.test009.html <!DOCTYPE html><html lang=& ...

  9. 14 Vue列表渲染

    列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...

随机推荐

  1. 20180826(02)-Java集合框架

    Java 集合框架 早在Java 2中之前,Java就提供了特设类.比如:Dictionary, Vector, Stack, 和Properties这些类用来存储和操作对象组. 虽然这些类都非常有用 ...

  2. RabbitMQ核心概念和AMQP协议（二）

    RabbitMQ是什么? RabbitMQ是一个开源的消息代理和队列服务器,用来通过普通协议,在完全不同的应用之间共享数据,RabbirMQ是使用Erlang语言来编写的,并且RabbitMQ是基于A ...

  3. Jquery取得Iframe中的元素

    DOM方法: 父窗口操作IFRAME:window.frames["iframeSon"].documentIFRAME操作父窗口: window.parent.document ...

  4. Linux shell 归纳之 ~/. 是什么意思

    假设用户名目录是:/home/test ~> cat ~/.profile ~ 是代表用户名目录/home/test/ .是代表隐藏文件, profile 就是home/test目录下的隐藏文件

  5. Mybatis 批量插入和更新小例

    SpringBoot配置Mybatis前文有博文,数据库mysql: package com.example.demo.biz.dto; public class User { private int ...

  6. centOS7挂在windows移动硬盘方法

    1,http://www.tuxera.com/community/open-source-ntfs-3g/ 下载ntfs-3g_ntfsprogs-2016.2.22这个压缩包,可用wget和浏览器 ...

  7. ssh公私钥免密登陆

    简介ssh Secure Shell(简写SSH) 为一项建立在应用层和传输层基础上的安全协议,专门为远程登录会话和其他网络服务提供安全性的协议. SSH安全机制分为两种,一种是基于口令的安全认证,一 ...

  8. pdo getLastInertID()无结果

    该函数只返回具有自增约素的表, 不然返回0. 使用exec()得到的是受影响的行数.

  9. [Linux] 004 安装

    1. 安装欢迎界面 Install or upgrade an existing system 安装或升级现有系统 Install system with basic video driver 安装过 ...

  10. [BZOJ4151]The Cave

    Solution: ​ 假设现在在点1,有许多形如 (x, y, z) 的限制条件,那么对于一组限制,必须先走到 x, y 的 \(\frac{z-dis(x, y)}{2}\) 级祖先,叫这些点为限 ...