1.官方文档写到 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 什么是渐进式框架？
Vue 的核心库只关注视图层，还便于与第三方库或既有项目整合了；vue.js只提供了vue-cli生态中最核心的组件系统和双向数据绑定，vuex、vue-router都属于围绕vue.js开发的库
Vue与React、Angular的不同是，它是渐进的
1、可以在原有的大系统的上面，把一两个组件改用它实现，就是当成jQuery来使用。
2、可以整个用它全家桶开发，当Angular来使用。
3、可以用它的视图，搭配你自己设计的整个下层使用。
4、可以在底层数据逻辑的地方用OO(Object–Oriented)面向对象和设计模式的那套理念。
5、可以函数式，它只是个轻量视图而已，只做了最核心的东西。
使用Angular，必须接受以下东西
1、必须使用它的模块机制
2、必须使用它的依赖注入
3、必须使用它的特殊形式定义组件
所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰
使用React，你必须理解
1、函数式编程的理念
2、需要知道它的副作用
3、什么是纯函数
4、如何隔离、避免副作用 它的侵入性看似没有Angular那么强，主要因为它是属于软性侵入的
-
组件的 data 选项为什么必须是一个函数? 每个实例可以维护一份被返回对象的独立的拷贝，可以避免变量污染，影响其它组件
- scoped属性
scoped 的作用是防止组件样式之间相互污染
PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。
① 给dom节点添加一个 data-v-随机数 的唯一标识 ② 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式
scoped 样式穿透
stylus的样式穿透 使用>>>
sass和less的样式穿透 使用/deep/
- call、apply、bind 三者用法区别
① call 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
console.log(new Food('cheese', 5).name); // output: "cheese"
语法 function.call(thisArg, arg1, arg2, ...)
thisArg 可选的。在 function 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
arg1, arg2, ... 指定的参数列表。
返回值 使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。
使用 call 方法调用函数并且不指定第一个参数 非严格模式下，绑定为全局对象
var sData = 'Wisen';
function display() {
console.log('sData value is %s ', this.sData);
}
display.call(); // sData value is Wisen
严格模式下，this的值将是undefined
'use strict';
var sData = 'Wisen';
function display() {
console.log('sData value is %s ', this.sData);
}
display.call(); // Cannot read the property of 'sData' of undefined
注: 该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。
② apply() 方法调用一个具有给定 this 值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数。
语法 apply(thisArg) apply(thisArg, argsArray)
thisArg 在 func 函数运行时使用的 this 值。请注意，this 可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
argsArray 可选 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从 ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。
注： 虽然这个函数的语法与 call() 几乎相同，但根本区别在于，call() 接受一个参数列表，而 apply() 接受一个参数的单数组 当第一个参数为 null 或 undefined 时，可以使用数组展开语法实现类似的结果。
③ bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。 语法 function.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg 调用绑定函数时作为 this 参数传递给目标函数的值。如果使用new运算符构造绑定函数，则忽略该值。当使用 bind 在 setTimeout 中创建一个函数（作为回调提供）时，作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空，或者thisArg是null或undefined，执行作用域的 this 将被视为新函数的 thisArg。
arg1, arg2, ... 当目标函数被调用时，被预置入绑定函数的参数列表中的参数。 返回值 返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。
this.x = 9; // 在浏览器中，this 指向全局的 "window" 对象
var module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // 81
var retrieveX = module.getX;
retrieveX();
// 返回 9 - 因为函数是在全局作用域中调用的
// 创建一个新函数，把 'this' 绑定到 module 对象 // 新手可能会将全局变量 x 与 module 的属性 x 混淆 var boundGetX = retrieveX.bind(module); boundGetX(); // 81
.防抖和节流 防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。
防抖(debounce): 防抖触发高频率事件时n秒后只会执行一次,如果n秒内再次触发,则会重新计算。 概述:每次触发时都会取消之前的延时调用。 举例：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。
节流(thorttle): 高频事件触发,每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法。 概述:每次触发事件时都会判断是否等待执行的延时函数。 区别:降低回调执行频率,节省计算资源。 函数防抖一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。 举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。
未完待续
