变异方法 (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. 新功能初探 | MySQL 8.0 Multi-Valued Indexes功能简述

    顾名思义,索引上对于同一个Primary key, 可以建立多个二级索引项,实际上已经对array类型的基础功能做了支持,并基于array来构建二级索引.这意味着该二级索引的记录数可以是多于聚集索引记 ...

  2. 【HDOJ6684】Rikka with Game（博弈）

    题意:有一个由小写字母组成的字符串,A和B两个人轮流操作,A想让序列的字典序最大,B想最小 两人都能任意选择一位上的字母将其右移一位(a->b,b->c……z->a)或者直接结束游戏 ...

  3. 27 August

    高精度 struct bigint{ int a[1000],an; bigint operator = (int b){ an=0; while (b){a[an++]=b%10;b/=10;} r ...

  4. 牛客 Rabbit的数列 （线段树维护值为x的个数+区间覆盖）

    https://ac.nowcoder.com/acm/contest/907/C 链接:https://ac.nowcoder.com/acm/contest/907/C来源:牛客网 题目描述 Ra ...

  5. Dpr ppi 适配 等概念 弹性属性的讲解

    Dpr: Dpr的全称(Device pixel ratio)像素设备比例:就是说每个设备像素上占有的css位像素的个数 苹果手机常见的设备像素比:1.0安卓 iPhone2.0  3.0 如果是1. ...

  6. 洛谷P1441 砝码称重（搜索，dfs+bitset优化）

    洛谷P1441 砝码称重 \(n\) 的范围为 \(n \le 20\) ,\(m\) 的范围为 \(m \le 4\) . 暴力遍历每一种砝码去除情况,共有 \(n^m\) 种情况. 对于剩余砝码求 ...

  7. 关于web开发中路径的问题的总结

    web开发中的一个困扰web开发新人的是路径问题: 1:项目的静态资源的根路径:http://localhost:8080/sqec-monitor 即是部署在web服务器中(比如tomcat)中项目 ...

  8. LeetCode 114. Flatten Binary Tree to Linked List 动态演示

    把二叉树先序遍历,变成一个链表,链表的next指针用right代替 用递归的办法先序遍历,递归函数要返回子树变成链表之后的最后一个元素 class Solution { public: void he ...

  9. Convolutional Neural Networks(2):Sparse Interactions, Receptive Field and Parameter Sharing

    Sparse Interactions, Receptive Field and Parameter Sharing是整个CNN深度网络的核心部分,我们用本文来具体分析其原理. 首先我们考虑Feedf ...

  10. Win10.资料

    1.Win10版本consumer editions和business editions有什么区别?(http://www.winwin7.com/JC/10722.html) 2.密钥 win10 ...