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 函数对象的多重身份
Jun 28 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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 处理图片的类实现代码
2009/10/23 PHP
php一个找二层目录的小东东
2012/08/02 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jquery操作select大全
2014/04/25 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
Python实现的金山快盘的签到程序
2013/01/17 Python
python正则表达式re模块详解
2014/06/25 Python
python中的sort方法使用详解
2014/07/25 Python
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
python实现简单登陆流程的方法
2018/04/22 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
python Gabor滤波器讲解
2020/10/26 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
2014年父亲节活动方案
2014/03/06 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2014年电厂工作总结
2014/12/04 职场文书
葬礼主持词
2015/07/02 职场文书