vue2-day1

Vue 是用户界面的渐进式框架，自底向上的增量的开发设计。核心库只关注视图层，声明式渲染和组件系统是Vue的核心库所包含内容

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统

只要是有this就不是函数，看见大字母也说明是类

vue把数据劫持了，比对的时候就简单，但是挟持数据会占用计算机的资源，其性能就会降低，这也是vue被人诟病的原因

在vue2中的优化手段，定义的数据语言尽可能的扁片化和对其进行冻结

v-if: 如果条件不成立，则不创建或删除已创建元素，初始化它的性能更高一些，如果频繁切换则性能低一些,权限显示相关，建议用v-if

v-show: 如果条件不成立，通过样式来隐藏，初始化它的性能低一些，如果频繁切换则性能更好一些

修改数组中原型链的方法，不能直接修改原型中的方法，如果直接修改全局都会受到影响。要把原方法提前保存下来，不然会重复引用，陷入死循环；重写原型链中的方法，说白了就是你自己的方法，而不是全局中的方法

MVVM模式

MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染

M（model）：普通的javascript数据对象

V（view）：前端展示页面

VM（ViewModel）：用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例

优点：

- 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，
  当 View变化的时候Model可以不变，当Model变化的时候View也可以不变。
- 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
- 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
- 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

为什么使用虚拟DOM

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。
如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，
而是将这10次更新的diff内容保存到本地一个JS对象中，
最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。
所以，用JS对象模拟DOM节点的好处：
页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，
等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制，从而提高性能。
减少不必要的重排和重绘
提高项目的可维护性（组件化）
跨平台

Diff比对

 

vue中当数据发生改变的时候，对应监听的set方法会执行，调用数据中的Dep.notify方法通知所有的订阅者，订阅者就会通过patch函数对比新旧虚拟节点是否一样，如果用新的虚拟节点则整个替换老节点，如果不是使用新节点，则根据子节点情况来进行同层比较。

patch主要做4个判断（以节点长度短的为基准）
- 没有新节点，直接触发旧节点的destory钩子，进行销毁。
- 没有旧节点，此时根本不需要比较了，直接全部都是新建
- 旧节点和新节点一样时，直接调用 patchVnode 去处理这两个节点
- 旧节点和新节点自身不一样，当两个节点不一样的时候，直接创建新节点，删除旧节点

key值的作用：在使用diff算法比较新旧dom树的时候，可以更准确更快得找到oldDom树中对应的节点。（利用key的唯一性生成map对象来获取对应节点，比遍历方式更快）patchVnode

注：{{}}括起来的区域，就是一个就是js语法区域，在里面可以写部份的js语法。不能写 var a = 10; 分支语句 循环语句

高阶函数

JavaScript的一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
JavaScript中的内置高阶函数：map(); reduce(); filter(); sort();

删除对象中的属性有什么方法

 - 从对象上删除属性的语义正确方法是使用delete关键字。
- 将属性设置为undefined

for in 和 for of 什么时候用

在vue中这两者没有区别。

- for in 是ES5的语法标准，而for of则是ES6语法标准。
  遍历数组
- for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。而且,for in所遍历的下标是Strign类型而不是Number类型。
- for in 遍历时可以遍历到当前数组的所有属性名和方法名。包括其原型链上定义的属性名和方法名
- for of遍历时则不会遍历原型链上的属性和方法且不会遍历定义在数组上的属性和方法。
  遍历对象
- 使用for in遍历对象会遍历对象原型链的方法名和属性名,for in 循环实际是为循环可枚举(enumerable)对象而设计的 使用 for of 遍历   对象则会报错
  原因：因为能够被for of正常遍历的数据类型都需要实现一个遍历器Iterator。而数组、字符串、Set、Map结构，早就内置好了Iterator         （迭代器），它们的原型中都有一个Symbol.iterator方法，而Object对象并没有实现这个接口，使得它无法被for of遍历。
       可以通过为Object实现一个Iterator来使Object可以使用正常for of遍历
 

 

Proxy 和Object.defineProperty的比较

/Proxy 的优势如下:
- Proxy代理整个对象，Object.defineProperty只代理对象上的某个属性；
- 数组新增删除修改时，Proxy可以监听到；
- Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等，是 Object.defineProperty 不具备的；
- 如果对象内部要全部递归代理，则Proxy可以只在调用时递归，而Object.defineProperty需要在一开始就全部递归，Proxy性能优于       Object.defineProperty；
- 对象上定义新属性时，Proxy可以监听到；
- proxy 只会代理第一层对象，但是配合 Reflect.get/set 中的 receiver，可以实现深层观测
  proxy 还可能触发多次 set/get 操作，这个可以通过 新值和旧值的比对来避免（或者可以通过 key 值也可以避免）

 Object.defineProperty 的优势如下:
- 兼容性好，支持 IE9及以上，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。