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

相关推荐

  • 高性能WEB开发(6) – web性能測试工具推荐「建议收藏」

    高性能WEB开发(6) – web性能測试工具推荐

  • cultureinfo 类 java_为国家,语言组合创建自定义CultureInfo

    cultureinfo 类 java_为国家,语言组合创建自定义CultureInfo我正在开发一个.net4.5应用程序,需要多语言支持多文化等.以下是国家/语言的示例列表俄罗斯/俄罗斯比利时/法国比利时/荷兰对于上述所有内容,可以根据上述文化名称创建CultureInfo对象ru-RUfr-BEnl-BE当用户进入站点时,我将Thread.CurrentThread.CurrentCulture和Thread.CurrentThread.CurrentUICulture设置…

  • 欧拉角_欧拉角 图

    欧拉角_欧拉角 图欧拉角来源 https://www.zhihu.com/question/47736315参考 https://zhuanlan.zhihu.com/p/45404840为何

  • python数组拼接字符串_Python练习题——数组拼接

    python数组拼接字符串_Python练习题——数组拼接##输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个。##示例1:#输入:[10,2]#输出:”102″##示例2:#输入:[3,30,34,5,9]#输出:”3033459″##1#classSolution:#defminNumber(self,nums):#nums_str=[str(i)…

  • window本地搭建git服务器_github搭建服务器

    window本地搭建git服务器_github搭建服务器服务器(Windows系统)自建git服务器超详细教程需要依赖(工具)轻量服务器(云服务器)一台——环境WindowsServer2019git工具包(https://git-scm.com/)gitea软件包(https://github.com/go-gitea/gitea/releases)下载安装git点击下载即可。(下载链接:https://git-scm.com/)下载如下:点击运行安装:注意:除了最后一步,其他全部【next】下一步即可。(安装路径直接装在服

  • 实例分割简述_图像实例分割

    实例分割简述_图像实例分割针对图像目标我们可以利用目标检测算法将其框出来也可以利用语义分割算法将属于猫的像素标记出来存在的弊端:1、目标检测可以区分个体但不够准确2、语义分割可以划分像素但不可以区分个体实例分割0、实例分割可以解决以上问题1、利用先验框获得建议框2、利用建议框获得预测框3、利用预测框获得语义分割结果…

发表回复

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

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