Vue数据双向绑定底层实现原理


Posted in Javascript onNovember 22, 2019

简介:

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。简单的说,就是数据变视图变。

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。

下例为模拟,Vue数据双向绑定底层实现原理

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>数据双向绑定底层实现</title>
</head>
<body>
  <button onclick="changeTest()">点我改变</button>
  <div id="test">哈哈哈</div>

  <script>
    let test={};
    let middle='';
    Object.defineProperty(test,'name',{
      set(val){
        console.log('触发setter');//设置、修改时触发set
        middle=val;
        watcher();
      },
      get(){
        console.log('触发geter');//获取、使用时触发get
        return middle;
      }
    })
    function changeTest(){
      test.name="变变变";//触发setter
    }
    function watcher(){
      document.getElementById('test').innerHTML=test.name;//触发get
    }
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
详解JavaScript中return的用法
May 08 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
微信小程序实现多选功能
Nov 04 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 #Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 #Javascript
微信小程序动态设置图片大小的方法
Nov 21 #Javascript
通过原生vue添加滚动加载更多功能
Nov 21 #Javascript
小程序api实现promise封装过程解析
Nov 21 #Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 #Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 #Javascript
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
什么是短波收听SWL
2021/03/01 无线电
PHP网站备份程序代码分享
2011/06/10 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
javascript 打印页面代码
2009/03/24 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
开学典礼决心书
2014/03/11 职场文书
人事任命书范文
2014/06/04 职场文书
班风口号
2014/06/18 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
python如何获取网络数据
2021/04/11 Python
python实现黄金分割法的示例代码
2021/04/28 Python
go 实现简易端口扫描的示例
2021/05/22 Golang