我当时 做的pre 的视频地址， 感兴趣的可以看看：
https://www.bilibili.com/video/BV1K54115775
前端框架
前端框架解决的问题
在我们介绍主流前端框架之前我们先搞清楚，前端框架解决的核心问题是什么：
前端框架解决的核心问题在于数据和视图同步，
以一个功能实现为例：更新输入框值
Jquery 是怎么实现的
步骤：
- 定义修改的值
- 找到需要修改的元素
- 修改元素的值为我们给定的值
那么我们有很多元素都要修改呢？ 如果我们需要多次操作，一个简单的方法就是多次重复这段代码， 当然我们更加clever一点， 更优雅些， 使用函数优化
但是这样还不够优雅， 因为我们把这个username写死了， 我们只有当修改username的值时候才会调用这个函数，
我们进一步的思考：
我们关注的点在于目标元素、数据，这两者可以在编译时确定，只要我们更新这个数据，系统就更新对应引用这个数据的元素，从而将我们从指定元素、修改元素的重复劳动中脱离出来，这是一个基本的思路。
| 框架 | 目前实现 |
|---|---|
| Vue | 绑定数据和节点在一起，在数据更新时，更新对应的元素 |
| React | 直接对整个组件diff，找到前后不同的地方，内部根本不需要知道数据和节点的对应关系 |
| Angular | 脏检查和proxy结合 （感兴趣可自行了解） |
当然前端还有很多不同的地方例如 数据驱动方案，组件化设计，这些大家可以慢慢比较思考
Vue框架介绍
Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。
核心思想： 数据驱动、组件化
选择原因
正如，例子里说的
开源带来的选择综合征是我们 IT 开发人员通病，新技术层出不穷啊， 我们选择哪个好呢？
-
前端人员， 有开发经验
没什么多讲的
-
门槛低、上手快
Vue 上手简单的原因是无需复杂配置，只需要一个 HTML 与相关文件就能跑起来
-
人性化，符合用户习惯Vue + 第三方控件 = 效率高 & 使用便利 & 组件化架构
比如 Vue 的 API 跟传统 Web 开发者熟悉的模板契合度非常高。Vue 的单文件组件是以模板+JavaScript+CSS 的组合模式呈现，它跟 Web 现有的 HTML、JavaScript、CSS 能够更好地配合；Vue 提供反应式的数据，当数据改动时，界面就会自动更新，而 React 里面则还需要调用方法 SetState
前端架构
正如某位大佬所说
我们评价一个框架合不合适很大程度上在于 框架是否能够实现你的架构设计目标 , 如果不能, 那你可能要审慎的看待是否使用这个框架了.
我们回忆刚才讲的Vue是如何更新数据的： 绑定数据和节点在一起，在数据更新时，更新对应的元素
主流前端架构特点以及介绍
当前主流框架
架构介绍
-
View层：视图展示。包含UIView以及UIViewController，View层是用户在屏幕上看到的结构、布局和外观，也称UI， 当ViewModel对Model进行更新的时候，会通过数据绑定更新到View
-
ViewModel层：视图适配器，连接视图与数据的中间件。 数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据变化的时候，viewModel能够监听到这种变化，并及时的通知view做出修改。同样的，当页面有事件触发时，viewModel也能够监听到事件，并通知model进行响应。Viewmodel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。
-
Model：数据模型与持久化抽象模型。数据模型很好理解，就是从服务器拉回来的JSON数据。而持久化抽象模型暂时放在Model层，按照经验，我们通常把数据库、文件操作封装成Model，并对外提供操作接口。
-
Binder：MVVM的灵魂。可惜在MVVM这几个英文单词中并没有它的一席之地，它的最主要作用是在View和ViewModel之间做了双向数据绑定。如果MVVM没有Binder，那么它与MVC的差异不是很大。
-
Vue采用数据劫持&发布-订阅模式的方式，通过ES5提供的 Object.defineProperty() 方法来劫持（监控）各属性的 getter 、setter ，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。要实现Vue中的双向数据绑定，大致可以划分三个模块：Compile、Observer、Watcher
选择原因
MVVM的前代MVC架构，存在的问题：
Massive View Controller，也就是胖VC。在编码过程中，controllor 不仅要负责业务逻辑，还要控制View的展示。编写代码基本的过程是这样的，在Activity、Fragment中初始化Views，然后拉取数据，成功后把数据填充到View里。Activity、Fragment杂糅了Controller和View，耦合变大。
假如有如下场景： 我们基于MVC开发完第一版本，然后企业需要迭代2.0版本，并且UI界面变化比较大，业务变动较小，怎么办呢？ 当2.0的所有东西都已经评审过后。这个时候，新建布局，然后开始按照新的效果图，进行UI布局。然后还要新建Activity、Fragment把相关逻辑和数据填充到新的View上。 如果业务逻辑比较复杂，需要从Activity、Fragment中提取上个版本的所有逻辑，这个时候自己可能就要晕倒了，因为一个复杂的业务，一个Activity几千行代码也是很常见的。千辛万苦做完提取完，可能还会出现很多bug。
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点：
- 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2.可重用性 你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3.独立开发 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4.可测试 界面素来是比较难于测试的，测试可以针对ViewModel来写。
前端性能思考
图片加载
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：
（1）安装插件
npm install vue-lazyload --save-dev
复制代码
（2）在入口文件 man.js 中引入并使用
import VueLazyload from 'vue-lazyload'
复制代码
然后再 vue 中直接使用
复制代码
或者添加自定义选项
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
复制代码
（3）在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：
<img v-lazy="/static/img/1.png">
复制代码
以上为 vue-lazyload 插件的简单使用，如果要看插件的更多参数选项，可以查看 vue-lazyload
预取
滑动列表分段获取资源，先取第一页，然后预取后面的页
如果你的应用存在非常长或者无限滚动的列表，那么需要采用 窗口化 的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。 你可以参考以下开源项目 vue-virtual-scroll-list 和 vue-virtual-scroller 来优化这种无限列表的场景的。
长列表性能优化
Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
reference：
https://zhuanlan.zhihu.com/p/139209805
https://blog.csdn.net/powertoolsteam/article/details/106800293
https://juejin.cn/post/6844903913410314247
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
