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

目录
  • 如何解除数据之间的双向绑定
    • 问题
    • 结论
  • vue双向绑定2.0和3.0区别
    • vue2.0实现双向绑定
    • vue3.0实现双向绑定
    • vue2.0和Vue3.0双向绑定的区别
    • 观察者模式和发布者订阅者模式的区别

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

问题

在开发过程中，我想要的结果是，一个表格和数据data数组绑定，将data中的数据依次遍历渲染到表格。

而data的数据是通过另一个this.formValidate 来push，代码如下

            this.formValidate.BookISBN = res.data.Data.ISBN
            this.formValidate.BookName = res.data.Data.BookTitle
            this.formValidate.Author = res.data.Data.Author
            this.data2.push(this.formValidate)

这样写造成的结果是：每次添加新的数据时，data2中的所有数据都会变成刚刚添加的新数据，看下图

第一个记录录入

第二个记录录入

这就很尴尬，于是想解除数据的双向绑定。

结论

用JSON,对对象进行深拷贝。先上代码

            this.formValidate.BookISBN = res.data.Data.ISBN
            this.formValidate.BookName = res.data.Data.BookTitle
            this.formValidate.Author = res.data.Data.Author
            let formdata= JSON.parse(JSON.stringify(this.formValidate))
            this.data2.push(formdata)

使用这句话

let formdata= JSON.parse(JSON.stringify(this.formValidate))

其实是通过json之间的解析 创建的临时变量，不会随this.formValidate改变而改变。

其中parse和stringfy 两个函数是json与字符串之间数据结构转变的函数，不了解的可以自行查阅。

vue双向绑定2.0和3.0区别

vue2.0实现双向绑定

Vue2.0使用ES5的Object.defineProperty()实现数据劫持和双向绑定

Obejct.defineProperty()可以添加对象属性或者修改属性

用法：

Obejct.defineProperty(obj, prop, descriptor)

  • obj：目标对象
  • prop：对象属性
  • descriptor：属性特性

返回处理后的对象obj

如果没有给Object设置特性的话，默认configurable,enumrable.writable都为false

返回结果：

设置了setter，getter方法以后

这里可以看到Object.defineProperty()方法劫持了set方法，也就为Vue.2.0的双向绑定提供了思路

vue3.0实现双向绑定

Vue3.0使用ES6的Proxy代理setter，getter方法，代理整个对象，只要对象的某个属性发生变化，就可以劫持数据

vue2.0和Vue3.0双向绑定的区别

Vue2.0的Object.defineProperty()只能劫持对象中的某个属性，而Proxy可以监听整个对象

vue2.0如果对象的属性增加或者删除无法监听到，无法监听到数组基于下标的修改，还有无法改变length

观察者模式和发布者订阅者模式的区别

发布订阅模式多了一层类似代理的关系，调度中心

发布者-订阅者模式

发布订阅模式在观察者模式的基础上加上了一个中间层代理“通知”的角色，这让发布者不直接与沟通者联系，不知道有哪些订阅者订阅了自己，发布者只负责“发布”一个责任，而订阅者只负责接受信息然后更新。

订阅者把想要订阅的事件注册到调用中心去，发布者把更新发布到调用中心，调用中心统一通知订阅者

实现效果如下：

观察者模式

有时候观察者模式又称为发布订阅模式，但其实两种模式还是存在区别的，观察者模式是一对多关系，当对象改变，其他依赖它的对象都会更新改变

优点：

  • 降低目标与观察者之间的耦合关系，两者是抽象耦合关系，符合依赖倒置原则
  • 目标和观察者建立一套触发机制

缺点：

  • 依赖关系没有完全解除，可能出现循环利用
  • 当观察者很多的时候，通知需要花很多时间，影响程序效率

这里实现了简单的观察者模式，每次obj的name属性变化时，set都会监听到， 并且通知观察者更新数据

Vue模型的建立以及怎么实现的

对于一个template，先计算出dom树，生成render函数，然后绘制布局，最后绘制样式

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

赞 (0)

相关推荐

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

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

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

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

  • 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中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • Vue使用.sync 实现父子组件的双向绑定数据问题

    1.前言 最近在vue 项目中有一个需求, 就是我需要根据不同的类型在页面中放不同的组件, 组件需要跟当前页面的数据进行双向绑定,如果都写在同一个页面 代码会显得比较多,毕竟我当前页面已经7-800行代码了 所以我需要把一些元素定义成组件 ,封装起来,所以就会遇到 数据的传值绑定问题 2.父组件 首先我们来看看官方文档 [ https://cn.vuejs.org/v2/guide/components.html#sync-修饰符 ] .sync 修饰符所提供的功能.当一个子组件改变了一个 pr

  • Vue中如何定义数据示例详解

    前言 在开发的过程中,定义变量是一件非常高频且十分基础的事情,如何合理的根据变量的使用场景和作用域范围进行定义变量,是一件很小缺很容易犯错的事情 Vue2已经流行使用了这么多年,多数开发者在开发过程中喜爱在data选项中梭哈定义很多变量,这样做非常不利于代码的阅读性.维护性和性能,想要很好的使用变量,需要结合Vue和JS的特性 在Vue中,按照是否需要双向数据绑定,可以将变量分为两种: 一种是需要被Vue的数据劫持,将data的变化实时响应到view上 只要data只能够的msg变化, temp

  • Vue中v-for的数据分组实例

    使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-for,那分组呢?这里需要用到vue的computed特性,将数据动态计算分组. 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • 解决vue中修改了数据但视图无法更新的情况

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个

  • Vue中构造数组数据之map和forEach方法实现

    目录 一.手写实现 二.二者区别 三.使用场景 数组操作是前端最重要的数据操作,构造数组数据,又是数组操作中很常见的.本文将梳理下map和forEach方法在Vue项目中的使用. 想要深入理解这两个方法,一定要手写几次简易的实现,理解其中的要义.这里只考虑核心部分,一些边界问题就忽略了. 一.手写实现 简易map方法: Array.prototype.myMap = function(callback) { const res = []; for (let i = 0; i < this.len

  • 解决Vue2.x父组件与子组件之间的双向绑定问题

    最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex,但观摩了一下其他优秀的UI框架,发现使用Vuex会给其他使用者造成麻烦,于是决心找到寻求解决方法,在参考了几篇大牛们文章后,终于找到. 在这将解决方案贴出,希望能帮助到和我一样初次接触Vue这个框架的同行们. 子组件的代码逻辑 <template> <div class="ne-i

  • react 中父组件与子组件双向绑定问题

    在项目中我们可能会遇到类似这样的场景,也就是父子组件的双向数据绑定 首先,先把在head中引入react.js.react-dom.js和可选择的babel.js(这里需要注意引用的顺序,react.js必须在react-dom.js之前) <head> <script src="react.js"></script> <script src="react-dom.js"></script> <scr

  • 前端框架Vue父子组件数据双向绑定的实现

    目录 一.父子组件单向传值 1.父向子传值 2.子向父传值 二.父子组件数据双向绑定 实现思路: 父 向 子 组件传值:使用 props 属性.( props 是property[属性] 的复数简写 ) 子 向 父 组件传值:使用自定义事件. 一.父子组件单向传值 1.父向子传值 父向子组件传值,子组件接收到数据之后,保存到自己的变量中. //父组件写法 <cld :numP="num" ></cld> //子组件定义以及数据 components:{ cld:

随机推荐