基本原理

Vue 采用了数据劫持结合发布-订阅的模式, 通过 Object#defineProperty 方法劫持各个成员的 getter, setter. 在数据变动的时候发布消息给订阅者触发相应的回调, 由于是在不同数据变动时触发的消息. 也就可以精确的将变更发送给绑定的视图. 而不是对所有的数据都进行更新. 具体的步骤为:

1. es6 模块引用 commonjs, 可以直接使用. Commonjs 模块不会被编译而是会原样输出没有 default 属性.
2. es6 模块引用 es6 模块, 被调用者和调用者都会添加 {__esModule: true}, 实际导出的内容都是通过 __webpack_require__.d 添加到导出对象上的. 仅仅导入但没有使用的内容会被 tree-shaking 掉
3. commonjs 引用 es6 模块, es6 模块会被添加 {__esModule: true}, 如果 es6 模块中包含 export default 那么导出的模块就会被添加 default 属性. 印证了require'balabala').default 这个玩意儿
4. commonjs 引入 commonjs, 不会被解析. 直接原样输出

PS: 在 es6 模块化中, export 和 export default 可以混用. 然而在 commonjs 中 exports 和 module.exports 不能混用. 无论是在 node 环境还是在 webpack 中.

JavaScript 使用的是事件驱动的设计模式, 为元素添加事件监听函数, 当这个元素的相应事件被触发那么其添加的事件监听函数就被调用. 作为 js 和 html 沟通的基础, 任何文档或者浏览器窗口发生的交互都要通过绑定事件进行 ~

浏览器缓存分为两种: 一种是需要发送 HTTP 请求, 基于服务器的判断来决定是否使用缓存, 即协商缓存. 还有一种为不需要发送 HTTP 请求, 直接读取浏览器存储在本地的缓存内容作为结果返回, 即强缓存.

强缓存

强缓存, 就是浏览器直接读取本地缓存, 无需通过服务器确认的缓存形式. 在 http 1.0 时期, 定义的 Expires 字段就是控制了响应强缓存的有效时间.

计算属性是数据层到视图层的数据转化映射, 会基于其所依赖的属性进行缓存. 只有在相关依赖变化时才会重新求值. 如果依赖没有变化每次访问计算属性都会立即返回之前计算的结果, 不再执行 get 函数. Method 则不同, 每次调用都会执行. 具体区别如下:

1. computed 是响应式的 method 不具备响应式能力
2. 调用方式不一样, computed 可以想访问vue 实例的成员一样调用, method 只能执行函数调用
3. computed 可以指定以一个函数作为只读属性, 也可以定义 get/set 变成可读写属性. 这个是 method 做不到的
4. computed 不能执行异步的逻辑, 当 computed 中包含异步逻辑时会导致取值无效