变异方法 (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. 【leetcode】1051. Height Checker

    题目如下: Students are asked to stand in non-decreasing order of heights for an annual photo. Return the ...

  2. HTTP通信安全和Web攻击技术

    一.HTTPS,确保Web安全 在HTTP协议中可能存在信息窃听或身份伪装等安全问题,HTTP的不足: 通信使用明文(不加密),内容可能会被窃听  不验证通信方的身份,因此有可能遭遇伪装 无法证明报文 ...

  3. luoguP4721 【模板】分治 FFT (分治NTT)

    给定 $g[1....n-1]$,求 $f[0],f[1],...,f[n-1]$,其中   $f[i]=\sum_{j=1}^{i}f[i-j]g[j]$    变界为 $f[0]=1$ 答案模 9 ...

  4. Flutter端代码

    新建一个页面FirstScreen.dartmain.dart改动代码 导入import 'dart:ui' as ui;import 'package:flutter_module/FirstScr ...

  5. js里面常用的正则表达式

    在工作中经常碰到关于表单的验证,一般采取正则表达是比较简洁,代码量少,但是却经常忘记一些正则的用法.下面记录工作中经常用到的正则表达式. * 代表0次或者多次   +代表1次或者多次  ?代表0次或者 ...

  6. ZOJ 3822 ( 2014牡丹江区域赛D题) (概率dp)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5376 题意:每天往n*m的棋盘上放一颗棋子,求多少天能将棋盘的每行每列都至少有 ...

  7. PHP之导出CSV文件

    序言 Q1:什么是csv文件? A1:csv即 comma-separated values ,逗号分隔值.是一种通用的相对简单地文件格式,目前被较为广泛的使用.其最广泛的应用就是用来转移表数据. “ ...

  8. Repository模式--采用EF Fluent API使用EntityTypeConfiguration分文件配置Model映射关系

    EF中类EntityTypeConfiguration是一个很有用的类,在nopCommerence中就使用这个类来分文件分文件配置Model映射关系.今天我就来谈谈Repository模式在Enti ...

  9. 设计模式 - 建造者模式 Builder Pattern

    简介 场景 在创建复杂对象时,用户无须关心该对象所包含的属性以及它们的组装方式,只需要指定复杂对象的类型和内容就可以构建它们. 模式定义 建造者模式:将一个复杂对象的构建与表示分离,使得同样的构建过程 ...

  10. Nginx 在各种语言框架下的配置 - 以 codeigniter 为例

    对于各种语言常用的框架,Nginx 在官方的 Wiki 页面的 入门 部分提供了示例配置文件.具体可以参考这个页面的 Pre-canned Configurations 部分,这里列出了各种框架. 直 ...