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 浏览器检测代码精简版
Mar 04 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
js select实现省市区联动选择
Apr 17 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
vue mounted组件的使用
Jun 18 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Django的信号机制详解
2017/05/05 Python
transform python环境快速配置方法
2018/09/27 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python图像处理入门(一)
2019/04/04 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
三星法国官方网站:Samsung法国
2019/10/31 全球购物
三个Unix的命令面试题
2015/04/12 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
秋天的雨教学反思
2014/04/27 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
2015年考研复习计划
2015/01/19 职场文书
居安思危观后感
2015/06/11 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书