【学习日记】发布订阅和观察者、webpack、SPA、vue和jquery、computed和watch 2020-9-1

发布订阅模式和观察者模式的区别：

---

发布订阅模式，例如vue里面的数据双向绑定原理，Dep收集所有的依赖，当数据发生变化时，通知所有的依赖进行更新。有一个收集依赖的调度中心，可以自定义的做一些处理，例如某些依赖不需要更新。由调度中心来进行调度，实现通信。

观察者模式就是，订阅发布模式，例如为某个元素监听一个事件，当事件触发时执行回调。先订阅再发布。直接就是观察者和被观察者之间的通信，是由具体目标调度的，不需要调度中心。

webpack原理：

---

前端工程化构建工具，配置文件中配置entry入口开始解析文件，构建、遍历AST树，收集所有的依赖。根据各种loader，对特定的文件进行转换。最后根据output配置将生成代码块写在出口文件夹里。在这一系列过程中，plugin会在合适hook时机进行调用。
plugin会在合适的hook上tap一个函数，在webpack的compiler模块run的时候，在合适的时机call，运行plugin里的内容。

单、多页面应用：

---

单页面就是：
只有一个主页面，一开始加载所有页面的资源，所以初次加载消耗比较大。页面的跳转是基于hash或history，实现页面局部组件的刷新，页面之间传值可以通过url，也可以通过组件传值的方式。由于将页面分成了一个框架，和内部切换的组件，组件化开发所以维护成本比较低。但是不利于搜索引擎优化。

多页面应用：
多页面就是由多个完成的页面组成的，跳转使用a标签的href，每次刷新都是整页刷新，所以页面切换时加载比较慢。页面之间传值通过url、cookie、本地存储。由于多个页面的代码重复性高，所以开发成本高、维护成本高。但是比较利于搜索引擎优化。由于是服务端渲染，返回整个页面的html。

vue和jquery的区别：

---

jquery：主要是通过操作dom，来更改页面。
vue：是mvvm模式，通过数据双向绑定将model层和view层连接，实现页面更新。对数据进行操作不再需要操作dom。

vue的computed和watch的区别：

---

watch：的属性是data或者props里的内容，传入两个值，一个newval，一个oldval，当数据发生变化时，触发。可以执行一些异步操作。
computed：计算属性。根据data或props里的值，进行计算得到的属性。支持缓存，只有在所依赖的数据发生变化时，才会触发。里面不能执行异步操作。