Understanding the VueJS Instance笔记

vuejs也是javascript代码，他符合所有的js规则。一个webapp可以完全使用vuejs，同样也可以使用js + vue，仅让vue控制或reactive一部分HTML页面功能。

Vue实例

通过vue实例，并传入一个约定好的对象结构，就可以实现相关逻辑。一个页面上的内容可以被多个vue实例分别控制。直接new出多个Vue实例，保存在变量里面就可以直接修改。

vue内置很多变量，都是以$开头的，可以直接进行操作。比如$data, $el, $refs。

修改$data，可以直接在Vue实例外部，对Vue实例进行数据操作。$data我理解就是application state, 就是modal。而$el所指定的模板就是view。methods就是业务逻辑。

$ref

Vue可以通过关键字ref，来得到某个元素的指针。从而直接修改相关的innerText等js原生属性，这样会比使用querySelector方便一些。

$el

每个vue实例必须挂载一个页面模板，这个通过创建实例时，el选项指定，也可以通过$mount函数在创建实例后进行指定。同时vue还可以支持component实现组件。组件就是可以复用页面和逻辑。

Vue通过初始化data和event，挂载上模板，就等待相应相关事件了。数据发生变化后，就会更新Dom，这里面用到了一个virtualDom的技术，我不是特别能够明白其中的原理，但感觉上，就是对两个树结构的数据，进行增量更新。貌似核心算法叫做snabbdom，具体的还要在深入研究下。http://www.jianshu.com/p/b461657e49c0

Vue在官网上，对他能提供的API写了文档，也是需要后续再看的。https://cn.vuejs.org/v2/api/

JS getter/setter

js的语法一直让我头疼，感觉上就是没有语法技巧特别多。可以把文本变代码，可以把map变数组，这些都是之前没有过的体验。他很多功能只是看上去“像”而已。

比如这个getter和setter。

var person = {
  birthYear: 1991,
  get age(){
    var myDate = new Date();
    return (myDate.getFullYear() - this.birthYear);
  },
  set age(value){
    var myDate = new Date();
    this.birthYear = myDate.getFullYear() - value;
  }
};

console.log(person.age);
person.age = 20;
console.log(person.birthYear);

比如这样一段代码，就使得person这个对象好像有两个属性，一个是birthYear, 另一个是age，而且修改birthYear时，age能够相应变化，修改age的时候，birthYear也会变化。如果是用C++开发确实可能要写很多代码才能实现。确实js增加了很多语法特性，尽管有些功能不是很习惯，但是确实能节省代码量，而且更容易维护。

https://stackoverflow.com/questions/812961/javascript-getters-and-setters-for-dummies

JS Proxy代理模式

js有个原生对象Proxy可以实现代理模式，如果在上面的代码后面加上如下代码：

let validator = {
  set : function(obj, prop, value){
    if (prop === 'age'){
      if (value>100)
      {
        console.log('Error age');
        return false;
      }
    }
    obj[prop] = value;
    return true;
  }
};
let realPerson = new Proxy(person, validator);
console.log(realPerson.age);
realPerson.age = 150;
console.log(realPerson.age); //Error age
realPerson.age = 50;
console.log(realPerson.age);

这样增加一个validator后，可以增加对age属性赋值时，额外的逻辑判断。而且不必修改原来的对象逻辑。这个代理模式能够实现很多功能，而且代码逻辑更加清晰，代码更容易维护。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy