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

 更新时间:2022年09月24日 08:53:18   作者:方沐雨  
这篇文章主要介绍了关于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中绑定的回调

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue.js云存储实现图片上传功能

    vue.js云存储实现图片上传功能

    示对象存储是腾讯云提供的一种存储海量文件的分布式存储服务,本文主要介绍了用vue.js实现图片上传功能,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue 粒子特效的示例代码

    vue 粒子特效的示例代码

    本篇文章主要介绍了vue 粒子特效的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 基于 vue-skeleton-webpack-plugin 的骨架屏实战

    基于 vue-skeleton-webpack-plugin 的骨架屏实战

    这篇文章主要介绍了基于 vue-skeleton-webpack-plugin 的骨架屏实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue-create创建VUE3项目详细图文教程

    vue-create创建VUE3项目详细图文教程

    create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代前端工具链),为开发提供极速响应,下面这篇文章主要给大家介绍了关于vue-create创建VUE3项目的相关资料,需要的朋友可以参考下
    2024-03-03
  • vue项目兼容IE浏览器的教程步骤

    vue项目兼容IE浏览器的教程步骤

    Vue的小伙伴们,困扰大家的IE浏览器支持Vue的问题,目前已经找到了一个比较好的解决方案,下面这篇文章主要给大家介绍了关于vue项目兼容IE浏览器的教程步骤,需要的朋友可以参考下
    2023-03-03
  • vue中手机号,邮箱正则验证以及60s发送验证码的实例

    vue中手机号,邮箱正则验证以及60s发送验证码的实例

    下面小编就为大家分享一篇vue中手机号,邮箱正则验证以及60s发送验证码的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • .html页面引入vue并使用公共组件方式

    .html页面引入vue并使用公共组件方式

    这篇文章主要介绍了.html页面引入vue并使用公共组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue debug 二种方法

    vue debug 二种方法

    这篇文章主要介绍了vue debug 二种方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue双向绑定详解

    Vue双向绑定详解

    这篇文章主要介绍了Vue 实现双向绑定的四种方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能够给你带来帮助
    2021-11-11
  • 如何解决vue项目打包后文件过大问题

    如何解决vue项目打包后文件过大问题

    这篇文章主要介绍了如何解决vue项目打包后文件过大问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论