vue数据响应式原理知识点总结


Posted in Javascript onFebruary 16, 2020

vue2.0数据响应式原理

对象

Obect.defineproperty 定义对象的属性mjm

defineproperty 其实不是核心的为一个对象做数据双向绑定,而是去给对象做属性标签,设置一系列操作权限,只不过属性里的get和set实现了响应式

vue数据响应式原理知识点总结

var ob = {
  a: 1,
  b: 2
}
//1-对象 2-属性 3-对于属性的一系列配置
Object.defineProperty(ob, 'a' , { //a对象则是ob的绝对私有属性,,默认都是true
  writable: false,
  enumerable: false,
  configurable: false
})
ob.a = 3
console.log(Object.getOwnPropertyDescriptor(ob, 'a'))
console.log(ob.a) //1
var ob = {
  a: 1,
  b: 2
}

//1-对象 2-属性 3-对于属性的一系列配置
/**
 * vue双向数据绑定
 * 给ob的a属性设置get/set方法,则获取ob的a时,会触发get方法,设置ob的a时,会触发set方法
 */
Object.defineProperty(ob, 'a' , { //a对象则是ob的绝对私有属性,,默认都是true
  get: function(){
    console.log('a- get') 
  },
  set: function(){
    console.log('a- set')

  }
})
ob.a = 3
console.log(ob.a)
//正常用法,,,使用中转,不优雅

var ob = {
  a: 1,
  b: 2
}

//1-对象 2-属性 3-对于属性的一系列配置
/**
 * vue双向数据绑定
 * 给ob的a属性设置get/set方法,则获取ob的a时,会触发get方法,设置ob的a时,会触发set方法
 */
var _value = ob.a //_value 作为一个中转
Object.defineProperty(ob, 'a' , { //a对象则是ob的绝对私有属性,,默认都是true
  get: function(){
    console.log('a- get') 
    return _value;
  },
  set: function(newValue){
    console.log('a- set')
    _value = newValue;
  }
})
ob.a = 3
console.log(ob.a) //get方法必须return ,否则返回undefined

vue数据响应式原理知识点总结

vue数据响应式原理知识点总结

defineProperty 定义的get和set是对象的属性,那么数组怎么办?

做了个装饰者模式

/**
 * 概述  Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。
 *            被创建的对象继承另一个对象的原型,在创建新对象时可以指定一些属性。
 * 语法  Object.create(proto, [ propertiesObject ])
 */
//数组 -- 做了个装饰者模式
var arraypro = Array.prototype;
var arrob = Object.create(arraypro)
var arr = ['push', 'pop', 'shift']; //枚举这三个,vue中还有其他
arr.forEach((method, index)=>{
  arrob[method] = function(){
    var ret = arraypro[method].apply(this,arguments);
    dep.notify();
  }
})

vue3.0数据响应式原理 - Proxy

Proxy对象用于定义基本操作的自定义行为 ,用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。

和defineProperty类似,功能几乎一样,但是用法不同

为什么要是用Procy?
  1、defineProperty只能监听某个属性,不能对全对象监听
  2、所以可以省去 for in 提升效率
  3、可以监听数组,不用再去单独对数组做特异性操作
改造的observer:

vue.prototype.observer = function(obj){ //注册get/set监听
  var self = this;
  this.$data = new Proxy(this.$data, {
    get: function(target, key, receiver){
      return target[key]
    },
    set: function(target, key, value, receiver){
      // return Reflect.set(target, key, value);
      // return target[key] = value
      target[key] = value;
      self.render();
    }
  })
}

Proxy 用途 -- 校验类型 -- 真正的私有变量

Diff算法和virtua doml

//1-对象 2-属性 3-对于属性的一系列配置

以上就是小编给大家整理的全部相关知识点,感谢大家的学习如果有任何疑问可以联系三水点靠木小编。

Javascript 相关文章推荐
js 金额文本框实现代码
Feb 14 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
javascript实现的简单计时器
Jul 19 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue中利用iscroll.js解决pc端滚动问题
Feb 15 #Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 #Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 #Javascript
js表达式与运算符简单操作示例
Feb 15 #Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 #Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 #Javascript
es6 super关键字的理解与应用实例分析
Feb 15 #Javascript
You might like
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python中用于计算对数的log()方法
2015/05/15 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python2与python3共存问题的解决方法
2018/09/18 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
一道SQL面试题
2012/12/31 面试题
自我评价范文分享
2014/01/04 职场文书
函授药学自我鉴定
2014/02/07 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
员工辞职信范文大全
2015/05/12 职场文书
高考升学宴主持词
2019/06/21 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫