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

目录
  • vue双向绑定带来的问题
    • 问题场景
    • 解决方案
  • vue双向绑定的原理总结
    • MVVM
    • vue当中的双向绑定

vue双向绑定带来的问题

问题场景

查询完表格数据后 通过作用域插槽，将该行数据传到修改页面（定义了个新对象存储数据），但是由于数据双向绑定，修改这个新对象的值，会影响到最初查询表格获取的值

如下

this.editForm = row

解决方案

方法1：通过json之间的解析，深拷贝创建一个与row无绑定关联的临时对象，再赋值给editForm

this.editForm = JSON.parse(JSON.stringify(row))

方法2：使用…展开运算符

this.editForm = {...this.editForm,...row}

方法3：$set也不会影响原数据，但只能操作单个数据，在上述场景可能不太适用（属性多久麻烦了）

this.$set(this.editForm,'roleName',row.roleName)
this.$set(this.editForm,'roleDesc',row.roleDesc)

这样就不会影响到最初的row啦！

vue双向绑定的原理总结

MVVM

视图模型双向绑定，是Model-View-ViewModel的缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。以前是操作DOM结构更新视图，现在是数据驱动视图。

优点：

1.低耦合。视图（View）可以独立于Model变化和修改，一个Model可以绑定到不同的View上，当View变化的时候Model可以不变化，当Model变化的时候View也可以不变；

2.可重用性。你可以把一些视图逻辑放在一个Model里面，让很多View重用这段视图逻辑。

3.独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。

4.可测试。

数据(model)变化主动触发ui(view)变化，同时ui(view)变化主动触发数据(model)变化，当然这里的ui变化指定表单中的用户输入，可通俗的理解为：在单向绑定的基础上给可输入元素（input、textarea等）添加change(input)事件，来动态修改model和view

vue当中的双向绑定

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调

使用 v-model / .sync 实现，v-model是 v-bind:value 和 v-on:input 的语法糖

  • v-bind:value 实现了 data ⇒ UI 的单向绑定
  • v-on:input 实现了 UI ⇒ data 的单向绑定

引申出这两个单向绑定如何实现

v-bind的实现

通过 Object.defineProperty API 给 data 创建 getter 和 setter，用于监听 data 的改变，data 一变就会安排改变 UI

v-on的实现

通过 template compiler 给 DOM 添加事件监听，DOM input 的值变了就会去修改 data。

Compile（指令解析器）

Compile主要做的事情是解析模板指令，将模板中变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新视图

Observer（数据监听器）

Observer的核心是通过Object.defineProprtty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者，订阅者就是Watcher

Watcher（订阅者）

Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：

  • 在自身实例化时往属性订阅器(dep)里面添加自己
  • 自身必须有一个update()方法
  • 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调

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

赞 (0)

相关推荐

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

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

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

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

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

  • 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数据双向绑定的实现方式讲解

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

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

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

  • vue双向绑定的简单实现

    vue双向绑定的简单实现

    研究了一下vue双向绑定的原理,所以简单记录一下,以下例子只是简单实现,还请大家不要吐槽~ 之前也了解过vue是通过数据劫持+订阅发布模式来实现MVVM的双向绑定的,但一直没仔细研究,这次深入学习了一下,借此机会分享给大家. 首先先将流程图给大家看一下 参考文章:Vue.js双向绑定的实现原理 我虽然参考的是这篇文章,下面的代码也是在阅读几遍后仿造的,自己只是简单添加了个递归实现所有dom子节点的双向绑定,以及添加了一些理解,但真正让我了然于心,让我可以独立写出2遍完整逻辑的其实是这张图,所以个

  • vue双向绑定及观察者模式详解

    vue双向绑定及观察者模式详解

    在Vue中,使用了Object.defineProterty()这个函数来实现双向绑定,这也就是为什么Vue不兼容IE8 1 响应式原理 让我们先从相应式原理开始.我们可以通过Object.defineProterty()来自定义Object的getter和setter 从而达到我们的目的. 代码如下 function observe(value, cb) { Object.keys(value).forEach((key) => defineReactive(value, key, value

  • 解决VUE双向绑定失效的问题

    双向绑定失效的原因有很多. lz就说最近遇到的. 是的,单价下的那个输入框我用了双向绑定(比如叫price,比如100).然后ipnut 键入中文时,(即使我做了输入验证).回车时虽然框中不会保留中文,但事实上VUE的双向绑定已经失效了.不管你后面输入什么,绑定的price保存的值只会是中文前的那个值(100). 这样就导致 表面好像没事,但是当你提交时就数据不对了. 还有一种是. 是日期控件(bootstrap的)的问题,部分控件才会.mmp哦,当lz用这个空间选定日期时.以为美滋滋的一次搞定

  • vue双向绑定数据限制长度的方法

    vue双向绑定数据如何限制长度?具体方法请阅读文章 问题描述 vue中输入框v-modle 双向绑定的数据:在需要的业务场景下需要对其进行字数长度限制: 解决方案 可以使用以下方法: 方法一: //方法一:输入框添加keypress方法:然后函数为: maxLength(attr,length){ let keyCode = event.keyCode; console.log("keyCode"); let len=0; console.log(this[attr].length);

  • Vue双向绑定实现原理与方法详解

    本文实例讲述了Vue双向绑定实现原理与方法.分享给大家供大家参考,具体如下: 昨天接到一个电话面试,上来第一个问题就是Vue双向绑定的原理.当时我并不知道如何监听数据层到视图层的变化,于是没答上来,挂电话后,我赶忙查了下资料,主要思路有如下三种. 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将"订阅"一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入

  • vue element-ui 绑定@keyup事件无效的解决方法

    解决办法: <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解

  • Vue双向绑定详解

    Vue双向绑定详解

    目录 1.双向绑定 2.那么其它标签选中会不会也有这个结果,答案当然是有: 3.我们再来看一个: 4.注意 总结 1.双向绑定 双向绑定就是 你们前端数据改变 你们data中的数据也会改变,同样的,你们data中的数据改变了 前端页面中的数据也同样会发生改变,而且,这个过程是不需要刷新的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

  • vue双向绑定简要分析

    vue双向绑定简要分析

    Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的.因为它提供了简洁易于理解的api,使得我们很容易上手. Vue与MVVM 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.Vue以数据为驱动,将自身的Dom元素与数据进行绑定,一旦创建绑定,Dom和数据保持同步. 其中ViewModel是Vue的核心,它是Vue的一个实例,作用于某个HTML元素上,可以是body也可以是

随机推荐