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 相关文章推荐
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
javascript实现完美拖拽效果
May 06 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
node.js基础知识小结
Feb 26 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
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 Smarty生成EXCEL文档的代码
2008/08/23 PHP
php简单提示框alert封装函数
2010/08/08 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
javascript中的window.location.search方法简介
2013/09/02 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
vue中appear的用法
2017/08/17 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
简单了解JavaScript异步
2019/05/23 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
Vue项目打包编译优化方案
2020/09/16 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
简介Django中内置的一些中间件
2015/07/24 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python实现两个文件夹的同步
2019/08/29 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
直接有效的自我评价
2014/01/11 职场文书
房产买卖委托公证书
2014/04/04 职场文书
物流专业自荐信
2014/05/23 职场文书
怎么写工作检讨书
2014/11/16 职场文书
医院科室评语
2015/01/04 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL