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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
js select常用操作控制代码
Mar 16 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
vue.js开发环境搭建教程
May 04 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 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
文件上传程序的全部源码
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
js charAt的使用示例
2014/02/18 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
判断网页编码的方法python版
2016/08/12 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
django云端留言板实例详解
2019/07/22 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
python 实现控制鼠标键盘
2020/11/27 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
优秀班主任经验交流材料
2014/06/02 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
Python如何配置环境变量详解
2021/05/18 Python