vue.js中$set与数组更新方法

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

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

当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。

当然vue中给了解决方法，就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice，caoncat等修改数组，同时也将触发状态更新：

ex：

所以如果在实例创建后添加新的属性到实例上，则不会触发更新。

ps：现在有两个数组，分别为arr1，arr2，如果arr1以下标赋值改变数组，arr2以$set改变数组，结果是什么样呢？

data:{
 arr1 = ['a','b','c'];
 arr2 = [‘foo','bar','baz'];
}

vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');

根据开始我们说的根据下标索引改变数组不能触发状态更新，我们会知道：第一个数组的第二项改变不会在页面更新，只有第二个数组的更改会在页面更新。然而结果却是：

arr1 = ['a', 'alpha', 'b', 'c'];
arr2 = [‘foo', 'alpha', 'bar','baz'];

两个数组的值都更新了，也就是说，arr2用$set()方法更新时，页面会全部更新一遍。

以上这篇vue.js中$set与数组更新方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 详解VUE 数组更新
  • Vue.js中数组变动的检测详解
  • Vue数组更新及过滤排序功能
  • vue.js移动数组位置,同时更新视图的方法
赞 (0)

相关推荐

  • Vue.js中数组变动的检测详解

    前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

  • 详解VUE 数组更新

    1.数据方法分类: (1)原数组改变 push  pop  unshift  shift  reverse  sort  splice (2)原数组未变,生成新数组 slice  concat  filter 对于使原数组变化的方法,可以直接更新视图. 对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化. 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&

  • Vue数组更新及过滤排序功能

    Vue数组更新及过滤排序功能

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项 shift() 移除数组中的第一个项并返回该项,同时数组的长度减1 unshift() 在数组前端添加任意个

  • vue.js移动数组位置,同时更新视图的方法

    使用vue.js v-for绑定若干个选项,需要对选项进行排序上下移动操作. 需要对options里面数组的位置进行交换,通常是这样来写: 假设向前移动一个: var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引. var tempOption = this.options[index-1]; //存储前一个 this.options[index-1] = option;(this.options[index]) this.op

  • vue.js中$set与数组更新方法

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触

  • 详解从Vue.js源码看异步更新DOM策略及nextTick

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/answershuto/learnVue. 在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issue指出,

  • Vue.js实现开发购物车功能的方法详解

    Vue.js实现开发购物车功能的方法详解

    本文实例讲述了Vue.js实现开发购物车功能的方法.分享给大家供大家参考,具体如下: 购物车一般包含商品名称.单价.数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选: 我们把这个小项目分为三个文件: index.html (页面) index.js (Vue 脚本) style.css (样式) 1 index.js 首先在 js 中初始化 Vue 实例,整体模板如下: var app = new Vue({ el: '#app', data: { ... }, moun

  • vue 中 get / delete 传递数组参数方法

    在前后端交互的时候,有时候需要通过 get 或者 delete 传递一个数组给后台,但是这样直接传递后台无法接收数据,因为在传递的过程中数组参数会被转译,结果如下: 参数:{ name : [ 1, 2, 3 ] } 转译效果:http://aaa.com?name[]=1&name[]=2&name[]=3 目标效果:http://aaa.com?name=1&name=2&name=3 解决办法: 使用 qs 插件 将数组参数序列化 1.qs.stringify({ a

  • vue.js中mint-ui框架的使用方法

    vue.js中mint-ui框架的使用方法

    本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

  • Vue.js绑定HTML class数组语法错误的原因分析

    Vue.js绑定HTML class数组语法错误,详情如下所示: 昨天在官网教程上发现一个错误是这样的,下面看图 http://cn.vuejs.org/guide/class-and-style.html 当有多个条件class时这样写有些繁琐.在1.0.19+中,可以在数组语法中使用对象语法: 如果这样写是可以执行成功的,但有错误 data: { classA: 'class-a', classB: 'class-b', classC: 'class-c', isB: true, isC:

  • JS简单循环遍历json数组的方法

    本文实例讲述了JS简单循环遍历json数组的方法.分享给大家供大家参考,具体如下: 例如数据库里面的json字符串是这样的 var str = '[{"name":"宗2瓜","num":"1","price":"122"},{"name":"宗呱呱","num":"1","price":

  • JS生成随机打乱数组的方法示例

    JS生成随机打乱数组的方法示例

    本文实例讲述了JS生成随机打乱数组的方法.分享给大家供大家参考,具体如下: 一.比较乱的排序方法 function fnLuanXu(num) { var aLuanXu=[]; for (var i = 0; i < num; i++) { aLuanXu[i] = i; } for (var i = 0; i < num; i++) { var iRand = parseInt(num * Math.random()); var temp = aLuanXu[i]; aLuanXu[i]

  • Vue.js实现图片的随意拖动方法

    主要代码如下: <template> <div id="test_3"> <img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style"> </div> </template> <s

  • 浅谈vue.js导入css库(elementUi)的方法

    1.安装以下模块,让webpack可以解析css文件 cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev 2.安装elementUi模块 cnpm install element-ui@next -S 3.在webpack.base.conf.js中添加配置 { test: /\\\\\\\\.css$/, loader: "styl

随机推荐