vue双向数据绑定知识点总结


Posted in Javascript onApril 18, 2018

1.原理

vue的双向数据绑定的原理相信大家都十分了解;主要是通过ES5的Object对象的defineProperty属性;重写data的set和get函数来实现的

所以接下来不使用ES6进行实际的代码开发;过程中如果函数使用父级this的情况;还是使用显示缓存中间变量和闭包来处理;原因是箭头函数没有独立的执行上下文this;所以箭头函数内部出现this对象会直接访问父级;所以也能看出箭头函数是无法完全替代function的使用场景的;比如我们需要独立的this或者argument的时候

1.2 defineProperty是什么

语法:

Object.defineProperty(obj, prop, descriptor)

参数:

obj:必要的目标对象

prop:必要的需要定义或者修改的属性名

descriptor:必要的目标属性全部拥有的属性

返回值:

返回传入的第一个函数;即第一个参数obj

该方法允许精确的添加或者修改对象的属性;通过赋值来添加的普通属性会创建在属性枚举期间显示(fon...in;object.key);这些添加的值可以被改变也可以删除;也可以给这个属性设置一些特性;比如是否只读不可写;目前提供两种形式:数据描述(set;get;value;writable;enumerable;confingurable)和存取器描述(set;get)

数据描述

当修改或者定义对象的某个属性的时候;给这个属性添加一些特性

var obj = {
 name:'xiangha'
}
// 对象已有的属性添加特性描述
Object.defineProperty(obj,'name',{
 configurable:true | false, // 如果是false则不可以删除
 enumerable:true | false, // 如果为false则在枚举时候会忽略
 value:'任意类型的值,默认undefined'
 writable:true | false // 如果为false则不可采用数据运算符进行赋值
});
但是存在一个交叉;如果wrirable为true;而configurable为false的时候;所以需要枚举处理enumerable为false
--- 我是一个writable栗子 ---
var obj = {};
Object.defineProperty(obj,'val',{
 value:'xiangha',
 writable:false, // false
 enumerable:true,
 configurable:true
});
obj.val = '书记'; // 这个时候是更改不了a的
--- 我是一个configurable栗子 ---
var obj = {};
Object.defineProperty(obj,'val',{
 value:'xiangha',
 writable:true, // true
 enumerable:true,
 configurable:false // false
});
obj.val = '书记'; // 这个时候是val发生了改变
delete obj.val 会返回false;并且val没有删除
--- 我是一个enumerable栗子 --- 
var obj = {};
Object.defineProperty(obj,'val',{
 value:'xiangha',
 writable:true,
 enumerable:false, // false
 configurable:true
});
for(var i in obj){
 console.log(obj[i]) // 没有具体值
}

综上:对于我们有影响主要是configurable控制是否可以删除;writable控制是否可以修改赋值;enumerable是否可以枚举

所以说一旦使用Object.defineProperty()给对象添加属性;那么如果不设置属性的特性;则默认值都为false

var obj = {}; 
Object.defineProperty(obj,'name',{}); // 定义了心属性name后;这个属性的特性的值都为false;这就导致name这个是不能重写不能枚举不能再次设置特性的
obj.name = '书记'; 
console.log(obj.name); // undefined
for(var i in obj){
 console.log(obj[i])
}

总结特性:

  • value:设置属性的值
  • writable ['raɪtəbl] :值是否可以重写
  • enumerable [ɪ'nju:mərəbəl]:目标属性是否可以被枚举
  • configurable [kən'fɪgərəbl]:目标属性是否可以被删除是否可以再次修改特性

存取器描述

var obj = {};
Object.defineProperty(obj,'name',{
 get:function(){} | undefined,
 set:function(){} | undefined,
 configuracble:true | false,
 enumerable:true | false
})
注意:当前使用了setter和getter方法;不允许使用writable和value两个属性

gettet&& setter

当设置获取对象的某个属性的时候;可以提供getter和setter方法

var obj = {};
var value = 'xiangha';
Object.defineProperty(obj,'name',{
 get:function(){
  // 获取值触发
  return value
 },
 set:function(val){
  // 设置值的时候触发;设置的新值通过参数val拿到
  value = val;
 }
});
console.log(obj.name); // xiangha
obj.name = '书记';
console,.log(obj.name); // 书记

get和set不是必须成对出现对;任写一个就行;如果不设置set和get方法;则为undefined

哈哈;前戏终于铺垫完成了

补充:如果使用vue开发项目;尝试去打印data对象的时候;会发现data内的每一个属性都有get和set属性方法;这里说明一下vue和angular的双向数据绑定不同

angular是用脏数据检测;Model发生改变的时候;会检测所有视图是否绑定了相关的数据;再更新视图

vue是使用的发布订阅模式;点对点的绑定数据

vue双向数据绑定知识点总结

2.实现

<div id="app">
 <form>
  <input type="text" v-model="number">
  <button type="button" v-click="increment">增加</button>
 </form>
 <h3 v-bind="number"></h3>
 </div>

页面很简单;包含:

  1. 一个input,使用v-model指令
  2. 一个button,使用v-click指令
  3. 一个h3,使用v-bind指令。

我们最后也会类似vue对方式来实现双向数据绑定

var app = new xhVue({
  el:'#app',
  data: {
  number: 0
  },
  methods: {
  increment: function() {
   this.number ++;
  },
  }
 })

2.1 定义

首先我们需要定义一个xhVue的构造函数

function xhVue(options){
 
}

2.2 添加

为了初始化这个构造函数;给其添加一个_init属性

function xhVue(options){
 this._init(options);
}
xhVue.prototype._init = function(options){
 this.$options = options; // options为使用时传入的结构体;包括el,data,methods等
 this.$el = document.querySelector(options.el); // el就是#app,this.$el是id为app的Element元素
 this.$data = options.data; // this.$data = {number:0}
 this.$methods = options.methods; // increment
}

2.3 改造升级

改造_init函数;并且实现_xhob函数;对data进行处理;重写set和get函数

xhVue.prototype._xhob = function(obj){ // obj = {number:0}
 var value;
 for(key in obj){
  if(obj.hasOwnProperty(ket)){
   value = obj[key];
   if(typeof value === 'object'){
    this._xhob(value);
   }
   Object.defineProperty(this.$data,key,{
    enumerable:true,
    configurable:true,
    get:function(){
     return value;
    },
    set:function(newVal){
     if(value !== newVal){
      value = newVal;
     }
    }
   })
  }
 }
}
xhVue.prototype._init = function(options){
 this.$options = options;
 this.$el = document.querySelector(options.el);
 this.$data = options.data;
 this.$method = options.methods;
 this._xhob(this.$data);
}

2.4 xhWatcher

指令类watcher;用来绑定更新函数;实现对DOM更新

function xhWatcher(name,el,vm,exp,attr){
 this.name = name; // 指令名称;对于文本节点;例如text
 this.el = el; // 指令对应DOM元素
 this.vm = vm; // 指令所属vue实例
 this.exp = exp; // 指令对应的值;例如number
 this.attr = attr; // 绑定的属性值;例如innerHTML
 this.update();
}
xhWatcher.prototype.update = function(){
 this.el[this.attr] = this.vm.$data[this.exp];
 // 例如h3的innerHTML = this.data.number;当numner改变则会触发本update方法;保证对应的DOM实时更新
}

2.5 完善_init和_xhob

继续完善_init和_xhob函数

// 给init的时候增加一个对象来存储model和view的映射关系;也就是我们前面定义的xhWatcher的实例;当model发生变化时;我们会触发其中的指令另其更新;保证了view也同时更新
xhVue.prototype._init = function(options){
 this.$options = options;
 this.$el = document.querySelector(options.el);
 this.$data = options.data;
 this.$method = options.methods;
 
 this._binding = {}; // _binding
 this._xhob(this.$data);
}
// 通过init出来的_binding
xhVue.prototype._xhob = function(obj){ // obj = {number:0}
 var value;
 for(key in obj){
  if(obj.hasOwnProperty(ket)){
   this._binding[key] = {
    // _binding = {number:_directives:[]}
    _directives = []
   }
   value = obj[key];
   if(typeof value === 'object'){
    this._xhob(value);
   }
   var binding = this._binding[key];
   Object.defineProperty(this.$data,key,{
    enumerable:true,
    configurable:true,
    get:function(){
     return value;
    },
    set:function(newVal){
     if(value !== newVal){
      value = newVal;
      // 当number改变时;触发_binding[number]._directives中已绑定的xhWatcher更新
      binding._directives.forEach(function(item){
       item.update(); 
      });
     }
    }
   })
  }
 }
}

2.6 解析指令

怎么才能将view与model绑定;我们定义一个_xhcomplie函数来解析我们的指令(v-bind;v-model;v-clickde)并这这个过程中对view和model进行绑定

xhVue.prototype._xhcompile = function (root) {
 // root是id为app的element的元素;也就是根元素
 var _this = this;
 var nodes = root.children;
 for (var i = 0,len = nodes.length; i < len; i++) {
  var node = nodes[i];
  if (node.children.length) {
   // 所有元素进行处理
   this._xhcompile(node)
  };
  // 如果有v-click属性;我们监听他的click事件;触发increment事件,即number++
  if (node.hasAttribute('v-click')) {
   node.onclick = (function () {
    var attrVal = nodes[i].getAttribute('v-click');
    // bind让data的作用域与methods函数的作用域保持一致
    return _this.$method[attrVal].bind(_this.$data);
   })();
  };
  // 如果有v-model属性;并且元素是input或者textrea;我们监听他的input事件
  if (node.hasAttribute('v-model') && (node.tagName = 'INPUT' || node.tagName == 'TEXTAREA')) {
   node.addEventListener('input', (function (key) {
    var attrVal = node.getAttribute('v-model');
    _this._binding[attrVal]._directives.push(new xhWatcher(
     'input', 
     node, 
     _this,
     attrVal, 
     'value'
    ));
    return function () {
     // 让number的值和node的value保持一致;就实现了双向数据绑定
     _this.$data[attrVal] = nodes[key].value
    }
   })(i));
  };
  // 如果有v-bind属性;我们要让node的值实时更新为data中number的值
  if (node.hasAttribute('v-bind')) {
   var attrVal = node.getAttribute('v-bind');
   _this._binding[attrVal]._directives.push(new xhWatcher(
    'text', 
    node, 
    _this,
    attrVal,
    'innerHTML'
   ))
  }
 }
}

并且将解析函数也加到_init函数中

xhVue.prototype._init = function(options){
 this.$options = options;
 this.$el = document.querySelector(options.el);
 this.$data = options.data;
 this.$method = options.methods;
 
 this._binding = {}; // _binding
 this._xhob(this.$data);
 this._xhcompile(this.$el);
}

最后

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div id="app">
  <form>
   <input type="text" v-model="number">
   <button type="button" v-click="increment">增加</button>
  </form>
  <h3 v-bind="number"></h3>
 </div>
</body>
<script>
 function xhVue(options) {
  this._init(options);
 }
 xhVue.prototype._init = function (options) {
  this.$options = options;
  this.$el = document.querySelector(options.el);
  this.$data = options.data;
  this.$method = options.methods;

  this._binding = {}; // _binding
  this._xhob(this.$data);
  this._xhcompile(this.$el);
 }

 xhVue.prototype._xhob = function (obj) {
  var value;
  for (key in obj) {
   if (obj.hasOwnProperty(key)) {
    this._binding[key] = {
     _directives: []
    }
    value = obj[key];
    if (typeof value === 'object') {
     this._xhob(value);
    }
    var binding = this._binding[key];
    Object.defineProperty(this.$data, key, {
     enumerable: true,
     configurable: true,
     get: function () {
      console.log(`get${value}`)
      return value;
     },
     set: function (newVal) {
      if (value !== newVal) {
       value = newVal;
       console.log(`set${newVal}`)
       // 当number改变时;触发_binding[number]._directives中已绑定的xhWatcher更新
       binding._directives.forEach(function (item) {
        item.update();
       });
      }
     }
    })
   }
  }
 }

 xhVue.prototype._xhcompile = function (root) {
  // root是id为app的element的元素;也就是根元素
  var _this = this;
  var nodes = root.children;
  for (var i = 0, len = nodes.length; i < len; i++) {
   var node = nodes[i];
   if (node.children.length) {
    // 所有元素进行处理
    this._xhcompile(node)
   };
   // 如果有v-click属性;我们监听他的click事件;触发increment事件,即number++
   if (node.hasAttribute('v-click')) {
    node.onclick = (function () {
     var attrVal = node.getAttribute('v-click');
     console.log(attrVal);
     // bind让data的作用域与method函数的作用域保持一致
     return _this.$method[attrVal].bind(_this.$data);
    })();
   };
   // 如果有v-model属性;并且元素是input或者textrea;我们监听他的input事件
   if (node.hasAttribute('v-model') && (node.tagName = 'INPUT' || node.tagName == 'TEXTAREA')) {
    node.addEventListener('input', (function (key) {
     var attrVal = node.getAttribute('v-model');
     _this._binding[attrVal]._directives.push(new xhWatcher(
      'input',
      node,
      _this,
      attrVal,
      'value'
     ));
     return function () {
      // 让number的值和node的value保持一致;就实现了双向数据绑定
      _this.$data[attrVal] = nodes[key].value
     }
    })(i));
   };
   // 如果有v-bind属性;我们要让node的值实时更新为data中number的值
   if (node.hasAttribute('v-bind')) {
    var attrVal = node.getAttribute('v-bind');
    _this._binding[attrVal]._directives.push(new xhWatcher(
     'text',
     node,
     _this,
     attrVal,
     'innerHTML'
    ))
   }
  }
 }

 function xhWatcher(name, el, vm, exp, attr) {
  this.name = name; // 指令名称;对于文本节点;例如text
  this.el = el; // 指令对应DOM元素
  this.vm = vm; // 指令所属vue实例
  this.exp = exp; // 指令对应的值;例如number
  this.attr = attr; // 绑定的属性值;例如innerHTML
  this.update();
 }
 xhWatcher.prototype.update = function () {
  this.el[this.attr] = this.vm.$data[this.exp];
  // 例如h3的innerHTML = this.data.number;当numner改变则会触发本update方法;保证对应的DOM实时更新
 }
 var app = new xhVue({
  el: '#app',
  data: {
   number: 0
  },
  methods: {
   increment: function () {
    this.number++;
   }
  }
 });
</script>

</html>

所有的代码;复制到编辑器就可查看效果了~~

Javascript 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 #Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 #Javascript
JS实现二维数组横纵列转置的方法
Apr 17 #Javascript
redux中间件之redux-thunk的具体使用
Apr 17 #Javascript
Vue进度条progressbar组件功能
Apr 17 #Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 #Javascript
Angular数据绑定机制原理
Apr 17 #Javascript
You might like
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP实现验证码校验功能
2017/11/16 PHP
重定向实现代码
2006/11/20 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
Python操作MySQL数据库9个实用实例
2015/12/11 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Django与JS交互的示例代码
2017/08/23 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Django框架实现的分页demo示例
2019/05/25 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
python 图像增强算法实现详解
2021/01/24 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
小学生自我评价范例
2013/09/24 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
会计求职信
2014/05/29 职场文书
党支部承诺书
2015/01/20 职场文书
教师求职简历自我评价
2015/03/10 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript