Vue 数据绑定的原理分析


Posted in Javascript onNovember 16, 2020

原理

其实原理很简单,就是拦截了Object的get/set方法,在对数据进行set(obj.aget=18)时去重现渲染视图

实现方式有两种

  • 方式1

定义了同名的get/set就相当于定义了age

var test = {
   _age: 18,
   get age() {
     console.log('触发get');
     //直接会this.age会进入死递归的
     return this._age;
   },
   set age(age) {
     console.log('触发set');
     this._age = age;
   }
 };

为了让test不显示多余的变量,可以把_age定义在外部

var _age = 18;
 var test = {
   get age() {
     console.log('触发get');
     //直接会this.age会进入死递归的
     return _age;
   },
   set age(age) {
     console.log('触发set');
     _age = age;
   }
 };
  • 方式2

使用这种方式完美的解决了对象内包含多余的变量的问题

function test() {
   var _age = 18;
   Object.defineProperty(this, "age", {
     get: function () {
       console.log('触发get');
       return _age;
     },
     set: function (value) {
       console.log('触发set')
       _age = value;
     }
   });
 }
 var t = new test();
 t.age=18;

实现数据到视图的绑定

这里的渲染只是一个简单的正则替换

要实现Vue那么强大的功能还要自己实现一个模板引擎

Vue 数据绑定的原理分析

<div id="test">
  <p>name:</p>
  <p>age:</p>
</div>
function Element(id, initData) {
  var self = this;
  var el = document.getElementById(id);
  var templet = el.innerHTML;
  var _data = null;

  if (initData) {
    _data = {};
    for (var variable in initData) {
      _data[variable] = initData[variable];
      bind(variable, self);
    }
  }

  function bind(variable, obj) {
    Object.defineProperty(self, variable, {
      set: function (value) {
        //使用_data里的数据,避免死递归
        _data[variable] = value;
        //每次被设置新值的时候重新渲染界面
        render();
      },
      get: function () {
        return _data[variable];
      },
    });
  }

  //渲染
  function render() {
    var temp = templet;
    temp = temp.replace(/\{\{(.*)\}\}/g, function (s, t) {
      if (_data[t]) {
        return _data[t];
      }
    });
    el.innerHTML = temp;
  }

  //初始化时候手动渲染一次
  render();
}

var app = new Element('test', {
  name: 'zhangsan',
  age: 18
})

实现视图到数据的绑定

这里做一个简单的input改变的事件监听

每次渲染之后都要重新添加事件,用时间委托可以实现,但是input的focus位置不能保留

可见Vue内部的渲染和事件绑定肯定不是像这里demo写的那么简单,这里只是大致的原理(可能并不是这样的。。。)

Vue 数据绑定的原理分析

<div id="test">
  <input type="text" value="">
  <br>
  <span></span>
</div>
function Element(id, initData) {
  var self = this;
  var el = document.getElementById(id);
  var templet = el.innerHTML;
  var input = el.getElementsByTagName('input')[0];
  var _data = initData;

  Object.defineProperty(self, 'data', {
    set: function (value) {
      _data = value;
      render();
    },
    get: function () {
      return _data;
    },
  });

  //渲染
  function render() {
    var temp = templet;
    temp = temp.replace(/\{\{(data)\}\}/g, function (s, t) {
      return _data;
    });
    el.innerHTML = temp;

    //重新添加事件,其实应该用事件委托的
    input = el.getElementsByTagName('input')[0];
    inputchange();
    input.focus();
  }

  function inputchange() {
    if (window.attachEvent) {
      input.attachEvent("oninput", temp);
    } else if (window.addEventListener) {
      input.addEventListener("input", temp, false);
    }

    function temp() {
      self.data = input.value;
    }
  }

  //初始化时候手动渲染一次
  render();
}
var app = new Element('test', '');

以上就是Vue 数据绑定的原理分析的详细内容,更多关于Vue 数据绑定的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
深入探究node之Transform
Jul 20 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 #Javascript
Vue指令实现OutClick的示例
Nov 16 #Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 #Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 #Javascript
小程序自定义弹框效果
Nov 16 #Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 #Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 #Javascript
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
Ionic2开发环境搭建教程
2020/08/20 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
Python中os.path用法分析
2015/01/15 Python
详解Python爬虫的基本写法
2016/01/08 Python
python实现图书管理系统
2018/03/12 Python
Windows下安装Scrapy
2018/10/17 Python
Python笔记之代理模式
2019/11/20 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python中pow函数用法及功能说明
2020/12/04 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
食品安全宣传标语
2014/06/07 职场文书
小学教师教学反思
2016/02/24 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android