vue、react双向数据绑定的区别 您所在的位置:网站首页 单向数据流和双向数据流的优缺点 vue、react双向数据绑定的区别

vue、react双向数据绑定的区别

2024-07-18 07:23| 来源: 网络整理| 查看: 265

介绍:

Vue中的表单元素(input、label、ul li、textarea、select)可以通过v-model指令实现双向数据绑定,也就是说,当用户改变表单的值时,表单绑定的数据也会相应的同步响应,这一点也是Vue能够被很多人接受的原因之一。

原理:

透过MVVM模式实现vue的双向绑定数据。 首先需要一个监听器Observer监听数据(model)的变化,具体实现是利用Observer中Object.definePrototype()函数实现监听数据。 当数据发生变化就通知订阅者Watcher通知并执行绑定的更新函数,从而更新视图。 最后需要一个Compile解析器,解析V-model、V-on等节点,绑定对应的更新函数并初始化这类节点的模板数据。

MVVM模式概念:MVVM模式就是Model–View–ViewModel模式。它实现了View的变动,自动反映在 ViewModel。相反的,ViewModel的变动也会自动反应在View。ViewModel是作为Model和View桥梁的存在。

用法: What's Li ming's name: Hello {{ name }} new Vue({ el: "#app", data: { name: "" } });

 



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

      专题文章
        CopyRight 2018-2019 实验室设备网 版权所有