Understanding the VueJS Instance笔记 | 天一阁

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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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可以实现代理模式,如果在上面的代码后面加上如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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