vue的设计模式_笔记

简介: vue的设计模式_笔记

响应式原理

认识Object.prototype.constructor

返回创建实例对象的 Object 构造函数的引用。注意,此属性的值是对函数本身的引用,而不是一个包含函数名称的字符串。对原始类型来说,如1,true和"test",该值只可读。

var o = {};
o.constructor === Object; // true
var o = new Object;
o.constructor === Object; // true
var a = [];
a.constructor === Array; // true
var a = new Array;
a.constructor === Array // true
var n = new Number(3);
n.constructor === Number; // true

对象的构造函数
function Tree(name) {
   this.name = name;
}
var theTree = new Tree("Redwood");
console.log( "theTree.constructor is " + theTree.constructor );

改变constructor

obj instanceof Object 检测Object.prototype是否存在于参数obj的原型链上。

function Type() {};
var types = [
    new Array, [],
    new Boolean,
    true, // remains unchanged
    new Date,
    new Error,
    new Function,
    function() {},
    Math,
    new Number,
    1, // remains unchanged
    new Object,
    {},
    new RegExp,
    /(?:)/,
    new String,
    "test" // remains unchanged
];
for (var i = 0; i < types.length; i++) {
    types[i].constructor = Type;
    types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
};
console.log(types.join("\n"));

输出:

get、set
obj.__defineGetter__(prop, func)

prop

一个字符串,表示指定的属性名。

func

一个函数,当 prop 属性的值被读取时自动被调用。

// 请注意,该方法是非标准的:
var o = {};
o.__defineGetter__('gimmeFive', function() { return 5; });
console.log(o.gimmeFive); // 5
// 请尽可能使用下面的两种推荐方式来代替:
// 1. 在对象字面量中使用 get 语法
var o = { get gimmeFive() { return 5; } };
console.log(o.gimmeFive); // 5
// 2. 使用 Object.defineProperty 方法
var o = {};
Object.defineProperty(o, 'gimmeFive', {
  get: function() {
    return 5;
  }
});
console.log(o.gimmeFive); // 5
obj.__defineSetter__(prop, fun)

prop

一个字符串,表示指定的属性名。

fun

一个函数,当试图去为 sprop 属性赋值时被调用。通常你要给这个函数指定一个参数:

Object.defineProperty()

JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性。 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。

每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

MVVM设计模式(响应式原理)

View和Model之间并没有直接的联系,而是通过ViewMode进行交互,ViewModel通过双向数据绑定把View层和Model层连接了起来

const data = {};
let name = "张三";
Object.defineProperty(data, 'name', {
    get: function() {
        console.log('触发get')
        return name
    },
    set: function(newVal) {
        console.log('触发set')
        name = newVal
    }
})
//测试
console.log(data.name) // 触发get  张三
data.name = '李四' // 触发set


目录
相关文章
|
29天前
|
设计模式 Java
【设计模式系列笔记】责任链模式
责任链模式是一种行为设计模式,它允许你将请求沿着处理者链进行传递,直到有一个处理者能够处理它。每个处理者都有一个对下一个处理者的引用。责任链模式常用于处理请求的场景,例如在一个请求需要经过多个步骤或者多个对象来处理的情况下。
28 0
|
29天前
|
设计模式 缓存 监控
【设计模式系列笔记】代理模式
代理模式是一种结构型设计模式,它允许一个对象(代理对象)控制另一个对象的访问。代理对象通常充当客户端和实际对象之间的中介,用于对实际对象的访问进行控制、监控或其他目的。
50 1
|
29天前
|
设计模式
【设计模式】张一鸣笔记:责任链接模式怎么用?
【设计模式】张一鸣笔记:责任链接模式怎么用?
20 1
|
29天前
|
设计模式 算法 Java
【设计模式系列笔记】设计模式与设计原则
设计模式,是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 设计原则是一些通用的设计指导方针,它们提供了如何设计一个优秀的软件系统的基本思想和规则。指导着设计者如何组织代码以实现高内聚、低耦合、易扩展和易维护的软件系统。
38 4
|
29天前
|
设计模式 JavaScript 开发者
Vue的混入(Mixins):混入的使用和设计模式解析
【4月更文挑战第24天】Vue Mixins是实现组件复用的灵活工具,允许共享可复用功能。混入对象包含组件选项,如数据、方法和生命周期钩子,可被合并到使用它的组件中。通过组合模式和钩子注入模式,混入能提高代码复用和可维护性。然而,注意命名冲突、选项合并策略以及慎用全局混入以防止副作用。正确使用混入能提升开发效率和软件质量。
|
29天前
|
设计模式 算法 编译器
【设计模式系列笔记】访问者模式
访问者模式是一种行为设计模式,旨在将算法与对象结构分离,使得能够在不修改元素类的前提下定义新的操作。这一模式的核心思想是在元素类中添加一个接受访问者的方法,从而实现在不同元素上执行不同操作的能力。
41 0
|
29天前
|
设计模式 SQL 算法
【设计模式系列笔记】模板方法模式
模板方法模式是一种行为设计模式,它定义了一个算法的骨架,并允许子类在不改变该算法结构的情况下重新定义算法的某些步骤。这种模式属于行为型模式,它通过将算法的不同部分封装在不同的方法中,从而使子类能够在不改变算法结构的前提下定制算法的某些步骤。
38 0
|
29天前
|
设计模式 算法 Java
【设计模式系列笔记】策略模式
策略模式(Strategy Pattern)是一种行为设计模式,它定义了一系列的算法,将每个算法封装起来,并且使它们可以互相替换。策略模式使得算法可以独立于客户端而变化。
35 0
|
29天前
|
设计模式 Java
【设计模式系列笔记】状态模式
在Java中,状态模式是一种行为设计模式,它允许对象在其内部状态改变时改变其行为。状态模式的关键思想是将对象的状态封装成独立的类,并将对象的行为委托给当前状态的对象。这样,当对象的状态发生变化时,其行为也会相应地发生变化。
27 0
|
29天前
|
设计模式 消息中间件 存储
【设计模式系列笔记】观察者模式
观察者模式是一种设计模式,它允许一个对象(主题)维护一组依赖于它的对象(观察者)并在状态发生变化时通知它们。这种模式属于行为型模式。在观察者模式中,主题是被观察的对象,而观察者是依赖于主题的对象,当主题的状态发生变化时,所有注册的观察者都会得到通知并自动更新。
28 0