vue的双向绑定原理_vue中数据双向绑定的原理

vue的双向绑定原理_vue中数据双向绑定的原理简析mvvm框架 目前angular,reat和vue都是mvvm类型的框架以vue为例 这里的vm 就是vue框架,它相当于中间枢纽的作用,连接着model 和view.当前台显示的view发生变化了,它会实时反应到viewModel上,如果有需要,viewModel 会通过ajax等方法将改变的数据传递给后台model 同时从后台model获取过来的数据,通过vm将…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

  1. 简析mvvm框架

目前angular,reat和vue都是mvvm类型的框架

以vue为例

vue的双向绑定原理_vue中数据双向绑定的原理

 

这里的vm 就是vue框架,它相当于中间枢纽的作用,连接着model 和view.

  • 当前台显示的view发生变化了,它会实时反应到viewModel上,如果有需要,viewModel 会通过ajax等方法将改变的数据 传递给后台model
  • 同时从后台model获取过来的数据,通过vm将值响应到前台UI上

 

  • 双向绑定原理

vue的双向绑定原理_vue中数据双向绑定的原理

vm的核心是view 和 data 

  • 当data 有变化的时候它通过Object.defineProperty()方法中的set方法进行监控,并调用在此之前已经定义好data 和view的关系了的回调函数,来通知view进行数据的改变
  • 而view 发生改变则是通过底层的input 事件来进行data的响应更改

vue是通Object.defineProperty()实现数据劫持的

Object.defineProperty( )是用来做什么的?它可以来控制一个对象属性的一些特有操作,比如读写权、是否可以枚举,这里我们主要先来研究下它对应的两个描述属性get和set

varBook= {}

       varname= '';

       Object.defineProperty(Book, 'name', {

           set:function(value) {

                name= value;

                console.log('你取了一个书名叫做'+ value);

           },

           get:function() {

                return'《'+ name+ '》'

           }

       })



       console.log(Book)

       Book.name= 'vue权威指南'; // 你取了一个书名叫做vue权威指南

        console.log(Book.name); // 《vue权威指南》

       // get 是在读取那么属性的时候触发的

       // set 是在设置属性值的时候触发的

 

实现方法: 观察者模式

vue的双向绑定原理_vue中数据双向绑定的原理

Observer(Objec.defineProperty中的set)监听data的变化,当data有变化的时候通知观察者列表Dep(里面有与data变化对应的update函数),watcher负责向观察者列表里添加(订阅)对应的更新函数,Dep里的更新函数执行完了之后将最新的值更新到view上。

具体的代码实现可参考:https://www.cnblogs.com/libin-1/p/6893712.html

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/180677.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • springBoot整合Mybatis-Plus需要的依赖_springboot中文手册

    springBoot整合Mybatis-Plus需要的依赖_springboot中文手册Springboot整合TKMapper使用TKMapper无需再创建mapper.xml文件首先基于springboot完成对MyBatis的整合,然后再对TKMapper进行整合1创建springboot项目勾选必要的依赖整合mybatis引入了mybatis的依赖,就需要配置数据库,创建application.yml文件spring:datasource:url:jdbc:mysql://192.168.1.2:3306/learn_tkmapper?serve

  • python中randint函数是什么意思_randint是什么函数

    python中randint函数是什么意思_randint是什么函数randint(a,b)随机生成整数:[a-b]区间的整数(包含两端)1fromrandomimportrandint2print("随机生成10个随机整数。")

  • 数组截取数据slice()函数「建议收藏」

    数组截取数据slice()函数「建议收藏」JavaScriptslice()方法定义和用法slice()方法可从已有的数组中返回选定的元素。语法arrayObject.slice(start,end)参数描述start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1指最后一个元素,-2指倒数第二个元素,以此类推。end 可选。 必需。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从start到数组结束的所

  • Java对象数组

    Java对象数组所谓的对象数组,就是指包含了一组相关的对象,但是在对象数组的使用中一定要清楚一点:数组一定要先开辟空间,但是因为其是引用数据类型,所以数组里面的每一个对象都是null值,则在使用的时候数组中的每一个对象必须分别进行实例化操作。 对象数组的声明先定义,再开辟空间类名称对象数组名[]=null;对象数组名=new类名称[长度]; 定义并开辟数组类名称对象数…

  • 软件安装管家(2021年4月15更新)

    软件安装管家(2021年4月15更新)在网上看到许多小伙伴在问软件安装管家公众号为什么不能用了,在这里就把他们的一些资源整理出来分享给大家啦!各位观众老爷赶紧点赞收藏吧!软件导航①电脑系统 ②办公软件③图像处理④影视动画⑤AutoCAD⑥3D设计⑦机械设计⑧建筑设计⑨网页设计⑩开发编程⑪数据分析⑫仿真模拟⑬行业软件软件目录①电脑系统 安装环境PE工具箱Vmware(虚拟机)Windows10U盘安装win10直接安装win10虚拟机装win10Win10官方原版镜像文件下载地址汇总Windows7U盘安装win7直接安装

  • java分布式-一致性「建议收藏」

    java分布式-一致性「建议收藏」java分布式-一致性

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号