vue2_设计模式

@TOC

响应式原理

认识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