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

前端之家收集整理的这篇文章主要介绍了vue双向数据绑定知识点总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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)

数据描述

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

属性添加特性描述 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,writable:true,// true enumerable:true,configurable:false // false }); obj.val = '书记'; // 这个时候是val发生了改变 delete obj.val 会返回false;并且val没有删除 --- 我是一个enumerable栗子 --- var obj = {}; Object.defineProperty(obj,enumerable:false,// false configurable:true }); for(var i in obj){ console.log(obj[i]) // 没有具体值 }

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

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

属性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]:目标属性是否可以被删除是否可以再次修改特性

存取器描述

方法;不允许使用writable和value两个属性

gettet&& setter

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

获取值触发 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是使用的发布订阅模式;点对点的绑定数据

2.实现

增加

页面很简单;包含:

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

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

2.1 定义

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

}

2.2 添加

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

包括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函数

2.4 xhWatcher

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

名称;对于文本节点;例如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函数

增加一个对象来存储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,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进行绑定

属性;我们监听他的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','innerHTML' )) } } }

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

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

最后

<Meta charset="UTF-8"> Document
增加

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

原文链接:https://www.f2er.com/vue/32748.html

猜你在找的Vue相关文章