脚本宝典收集整理的这篇文章主要介绍了

【知识梳理】4.5MVVM框架类

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

1.MVVM框架

【知识梳理】4.5MVVM框架类-脚本宝典
参考资料:教你认清MVC,MVP和MVVM三种模式

2.双向绑定的原理

【知识梳理】4.5MVVM框架类-脚本宝典
Object.defineProperty()作用:能监听data的变化,当有变化时会调用回调函数,回调函数中写好了viewdata的关系,所以后续只需修改data即可。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

  • Object.defineProperty(obj, prop, descriptor)
  • obj:要在其上定义属性的对象。
  • prop:要定义或修改的属性的名称。
  • descriptor:将被定义或修改的属性描述符。
// 使用 __proto__
var obj = {};
var descriptor = Object.create(null); // 没有继承的属性
// 默认没有 enumerable,没有 configurable,没有 writable
descriptor.value = 'static';
Object.defineProperty(obj, 'key', descriptor);

// 显式
Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

Object.defineProperty()与reflect.defineProperty()的区别:

Object.defineProperty()是es5中的用法,返回一个新对象;
reflect.defineProperty()是es6中的用法,返回一个布尔值;

参考资料:Object.defineProperties()

3.设计模式

观察者模式:

  • 0.源:data,返回:view;
  • 1.监听者,observer,用于监听data发生变化(原理:object.defineProperty),并通知观察者列表;
  • 2.观察者列表,Dep,当监听到data发生变化时,会触发object.defineProperty中的set函数,set将循环一遍观察者列表,列表中每一个观察者对象都会调用自身的update回调,回调过程中会将数据更新到view中,;
  • 3.观察者,Watcher,定义更新的内容update,往观察者列表中增加内容;

图片描述

4.生命周期

  • 1.beforeCreated
  • 2.created
  • 3.beforeMount
  • 4.mounted
  • 5.beforeUpdate
  • 6.updated
  • 7.beforeDestory
  • 8.destoryed

lifecycle

总结

以上是脚本宝典为你收集整理的

【知识梳理】4.5MVVM框架类

全部内容,希望文章能够帮你解决

【知识梳理】4.5MVVM框架类

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过