详解VUE 数组更新


Posted in Javascript onDecember 16, 2017

1、数据方法分类:

(1)原数组改变

push
 pop
 unshift
 shift
 reverse
 sort
 splice

(2)原数组未变,生成新数组

slice
 concat
 filter

对于使原数组变化的方法,可以直接更新视图。

对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化。

示例代码:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vue示例</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <template v-for="book in books">
          <li>书名:{{book.name}}</li>
          <li>作者:{{book.author}}</li>
        </template>
      </ul>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          books: [{
              name: 'vuejs',
              author: 'a'
            },
            {
              name: 'js高级',
              author: 'b'
            },
            {
              name: 'java',
              author: 'c'
            }
          ]
        }
      });
      //直接可以使得视图改变
      //app.books.push({name: 'c++',author: 'd'});
      //需要更新原数组
      app.books = app.books.concat([{name: 'c++',author: 'd'}]);
    </script>
  </body>
</html>

注意:以下不会触发视图的更新。

(1)通过索引直接设置项。

(2)修改数组长度,app.books.length=1。

若不想改变原数组,可以使用计算属性来过滤数组,如:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vue示例</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <template v-for="book in filterBooks">
          <li>书名:{{book.name}}</li>
          <li>作者:{{book.author}}</li>
        </template>
      </ul>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          books: [{
              name: 'vuejs',
              author: 'a'
            },
            {
              name: 'js高级111',
              author: 'b'
            },
            {
              name: 'java33333',
              author: 'c'
            }
          ]
        },
        computed:{
          filterBooks:function(){
            return this.books.sort(function(a,b){
              return a.name.length>b.name.length?1:-1
            })
          }
        }
      });
    </script>
  </body>
</html>

那么vue如何监听数据的变化呢?

1)如何追踪变化

每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

2)变化检测问题

受现代 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。例如:

var vm = new Vue({
 data:{
 a:1
 }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

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

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

还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名,?是我们在项目中用过的一次,this.imgLen=3,目的使this.userImgsh=["审核成功","审核成功","审核成功"]

var _this=this
for (var i = 0; i <this.imgLen;i++) {
  if(_this.userImgsh[i] === '审核成功') continue;
    _this.$set(_this.userImgsh, i, '审核成功');
}

总结

以上所述是小编给大家介绍的详解VUE 数组更新问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
详解如何用模块化的方式写vuejs
Dec 16 #Javascript
浅谈 Vue 项目优化的方法
Dec 16 #Javascript
在vue-cli中组件通信的方法
Dec 16 #Javascript
动手写一个angular版本的Message组件的方法
Dec 16 #Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 #Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 #Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 #Javascript
You might like
header跳转和include包含问题详解
2012/09/08 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
python 随机数生成的代码的详细分析
2011/05/15 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
眼镜促销方案
2014/03/15 职场文书
公司节能减排倡议书
2014/05/14 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers