详解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 相关文章推荐
浅谈Node.js中的定时器
Jun 18 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
Vue实现下拉加载更多
May 09 Vue.js
详解如何用模块化的方式写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
全文搜索和替换
2006/10/09 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python操作redis方法总结
2018/06/06 Python
用Django写天气预报查询网站
2018/10/21 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
python 实现图片批量压缩的示例
2020/12/18 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
大学三年计划书范文
2014/04/30 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
身份证丢失证明
2015/06/19 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js