vue数组双向绑定问题及$set用法说明

目录
  • vue数组双向绑定问题及$set用法
    • 以下这几种情况,Vue都会检测不到数据的变化
    • 数组实现响应式的七个方法
    • $set用法
  • vue中$set解决数据双向绑定

vue数组双向绑定问题及$set用法

在vue开发中，我们有时会遇到数据更新视图不更新问题，地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。

以下这几种情况,Vue都会检测不到数据的变化

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

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

由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除

数组实现响应式的七个方法

  • push() 可向数组的末尾添加一个或多个元素，并返回新的长度
  • pop() 从数组的尾部删除一个元素，返回删除的元素
  • unshift() 向数组的前面添加元素，返回值：数组的新长度
  • shift() 从数组头部删除一个元素，返回删除的元素
  • splice()

删除：两个参数，splice(index,num) 删除的第一项的位置以及要删除的项数

添加：三个参数，插入起始位置、删除的项数（为0）、插入的项，向指定位置插入任意数量的项。arr.splice(1,0,"or","ue")

替换：先删除再添加，三个参数：起始位置、删除的项数、要添加的项数。添加的与删除的数量不一定要一致。arr.splice(1,2,"or","ue")

  • sort() 对数组元素进行排序，默认根据字符串Unicode码进行排序，对数字进行排序时参数要传递一个比较函数。
    sortNumber(a,b){
          return a-b
    }；
  • reverse() 该方法用于颠倒数组中元素的顺序

上面的方法把原数组更改掉，可以选用这些方法来实现响应式。

flter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。使用这些方法会造成数据双向绑定失效。

  • filter() 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  • concat() 用于连接两个或多个数组。该方法不会改变现有的数组.
  • slice() 可从已有的数组中返回选定的元素,选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。该方法并不会修改数组，而是返回一个子数组.

$set用法

当数据没有被双向绑定的时候，我们可以使用$set

this.$set(原数组, 索引值, 需要赋的值)

vue中$set解决数据双向绑定

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

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

解决：用$set方法

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

解决：vm.items.splice(newLength)

this.$set(Object, key, value)
//this.$set(this.list[i],"flag",true)

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于vue双向绑定带来的问题及解决

    关于vue双向绑定带来的问题及解决

    目录 vue双向绑定带来的问题 问题场景 解决方案 vue双向绑定的原理总结 MVVM vue当中的双向绑定 vue双向绑定带来的问题 问题场景 查询完表格数据后 通过作用域插槽,将该行数据传到修改页面(定义了个新对象存储数据),但是由于数据双向绑定,修改这个新对象的值,会影响到最初查询表格获取的值 如下 this.editForm = row 解决方案 方法1:通过json之间的解析,深拷贝创建一个与row无绑定关联的临时对象,再赋值给editForm this.editForm = JSON

  • vue中如何解除数据之间的双向绑定

    vue中如何解除数据之间的双向绑定

    目录 如何解除数据之间的双向绑定 问题 结论 vue双向绑定2.0和3.0区别 vue2.0实现双向绑定 vue3.0实现双向绑定 vue2.0和Vue3.0双向绑定的区别 观察者模式和发布者订阅者模式的区别 如何解除数据之间的双向绑定 问题 在开发过程中,我想要的结果是,一个表格和数据data数组绑定,将data中的数据依次遍历渲染到表格. 而data的数据是通过另一个this.formValidate 来push,代码如下 this.formValidate.BookISBN = res.d

  • vue 双向绑定问题$emit无效的解决

    vue 双向绑定问题$emit无效的解决

    目录 vue 双向绑定问题$emit无效 父组件 子组件 vue双向绑定指令 功能 效果展示 vue 双向绑定问题$emit无效 父组件变量传给子组件,子组件$emit 触发父组件的方法修改父组件的变量,但是父组件的值变了,子组件的值没有改变 父组件 <div>     // 子组件     <son :status.sync="status"/> </div> <script> export default {     data(){

  • vue3自定义组件之v-model实现父子组件双向绑定

    vue3自定义组件之v-model实现父子组件双向绑定

    vue3 v-model父子组件双向绑定 vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法: // vue2的v-model双向绑定方法 model: {      prop: 'value', //3.x默认值改为了modelValue      event: 'input' //3.x默认值改为了update:modelValue    }, //使用 this.$emit('input', index); vue3.x采用以下方式(v-model默认对应的

  • Vue数据双向绑定的实现方式讲解

    Vue数据双向绑定的实现方式讲解

    目录 前言 一.input和textarea 二.radio和CheckBox 三.select 四.双向绑定的修饰符 前言 在web开发应用中,很多项目都会用到表格一列的组件进行数据的传输.获取和提交,在开发使用中,表格类组件数据的传输,我们一般可以使用v-model将输入的数据同步到data属性中,这个指令可以为不同的输入元素使用不同的属性,这个指令一般在form表单中的input等等元素上面来创建双向的数据绑定. 一.input和textarea 在vue实战项目中,vue里面的data属

  • vue数组双向绑定问题及$set用法说明

    目录 vue数组双向绑定问题及$set用法 以下这几种情况,Vue都会检测不到数据的变化 数组实现响应式的七个方法 $set用法 vue中$set解决数据双向绑定 vue数组双向绑定问题及$set用法 在vue开发中,我们有时会遇到数据更新视图不更新问题,地址没有改变,vue就监测不到数据变化.这个时候,双向绑定就失效了. 以下这几种情况,Vue都会检测不到数据的变化 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,

  • Vue 的双向绑定原理与用法揭秘

    本文实例讲述了Vue 的双向绑定原理与用法.分享给大家供大家参考,具体如下: Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 <div id="app"> <h2>What's your name:</h2> <input v-model="name" /> <div>Hello

  • vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)

    vue MVVM双向绑定实例详解(数据劫持+发布者-订阅者模式)

    目录 实现过程 1.实现一个Observer 2.实现Watcher 3.实现Compile 总结 参考文献:https://www.jb51.net/article/160654.htm https://www.jb51.net/article/239554.htm MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Model层代表的是模型.数据,可以在Model层中

  • 详解vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位: 代码: 效果图: 是不是看起来跟vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步来实现这个SelfVue.由于本文只是为了学习和分享,所以只是简单实现下原理,并没有考虑太多情况和设计,如果大家有什么建议,欢迎提出来. 本文主要介绍两大内容: 1. vue数据双向绑定的原

  • Vue数据双向绑定原理及简单实现方法

    Vue数据双向绑定原理及简单实现方法

    Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫持.vue是通过Object.defineProperty()来实现数据劫持

  • 理解Proxy及使用Proxy实现vue数据双向绑定操作

    1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种机制,类似于代理的含义,它可以对外界访问对象之前进行过滤和改写该对象. 如果对vue2.xx了解或看过源码的人都知道,vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来实现对数据的监控的,具体了解 Object.defineProperty可以看我上一篇文

  • vue 数据双向绑定的实现方法

    vue 数据双向绑定的实现方法

    1. 前言 本文适合于学习Vue源码的初级学者,阅读后,你将对Vue的数据双向绑定原理有一个大致的了解,认识Observer.Compile.Wathcer三大角色(如下图所示)以及它们所发挥的功能. 本文将一步步带你实现简易版的数据双向绑定,每一步都会详细分析这一步要解决的问题以及代码为何如此写,因此,在阅读完本文后,希望你能自己动手实现一个简易版数据双向绑定. 2. 代码实现 2.1 目的分析 本文要实现的效果如下图所示: 本文用到的HTML和JS主体代码如下: <div id="ap

  • Vue.js双向绑定实现原理详解

    Vue.js双向绑定实现原理详解

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 参考文章:http://www.jb51.net/article/100819.htm 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = { }; /

  • Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是

随机推荐