- 什么是 MVVM，比之 MVC 有什么区别？
- 什么是 Virtual DOM，为什么 Virtual DOM 比原生 DOM 快？
- 前端路由原理，两种实现方式的区别？
- MVC
1.模型-Model 编写程序应有的功能(实现算法)，进行数据管理和数据库设计等等
2.视图-View 图形界面的展示
3.控制器-Controller 负责转发请求，对请求进行处理
- MVVM Model-View-ViewModel
- Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
- View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
- ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
- 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
- ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
Virtual DOM
相较于 DOM 来说，操作 JS 对象会快很多，我们可以通过 JS 来模拟 DOM
const ul = {
tag: 'ul',
props: {
class: 'list'
},
children: {
tag: 'li',
children: '1'
}
}
// 对应 DOM 为：
<ul class="list">
<li>1</li>
</ul>
- Virtual DOM 可以判断新旧两个 JS 对象的最小差异，并实现局部更新 DOM，从而提升性能
- 将 Virtual DOM 作为一个兼容层，让我们还能对接非 Web 端的系统，实现跨端开发。
- 通过 Virtual DOM 我们可以渲染到其他的平台，比如实现 SSR、同构渲染等等。
- 实现组件的高度抽象化
路由
本质就是监听 URL 的变化，然后匹配相应的路由规则，显示相应的页面，且无需刷新页面
- hash 模式
www.test.com/#/ 就是 hash URL，当 # 后面的 hash 值发生变化时，可以通过 hashChange 事件监听到 URL 的变化从而实现页面的跳转，并且无论 hash 值如何变化，服务端接收到的 URL 请求永远是 www.test.com
hash 模式相对简单且兼容性较好
window.addEventListener('hashchange', () => {
// ... 具体逻辑
})
- history 模式
history 模式是 html5 新推出的功能，主要是用 history.pushState 和 history.replaceState 来改变 URL
通过 history 模式改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录
// 新增历史记录
history.pushState(stateObject, title, URL)
// 替换当前历史记录
history.replaceState(stateObject, title, URL)
当用户做出浏览器动作时，比如点击后退按钮时会触发 popState 事件
window.addEventListener('popstate', e => {
// e.state 就是 pushState(stateObject) 中的 stateObject
console.log(e.state)
})
- hash 模式和 history 模式的区别
- hash 模式只可以更改 # 后面的内容，history 可以通过 API 设置任意同源的 URL
- history 可以通过 API 添加任意类型的数据到历史记录中，hash 模式只能更改哈希值也就是字符串
- hash 模式无需后端配置并且兼容性好，history 在用户手动输入地址并且刷新页面的时候会发起 URL 请求，后端需要配置 index.html 页面用于匹配不到静态资源的时候
React 和 Vue 的区别
- Vue 本质是一个 MVVM 框架，由 MVC 发展而来
React本质是前端组件化框架，不是一个完整的 MVC 框架，可以认为是 MVC 中的 V - Vue 的表单可以用 v-model 进行双向绑定，React 是单向数据流，由于我们一般会使用 Vuex 和 Redux 等单向数据流的状态来管理框架，因此很多时候我们感受不到这一点的区别
- Vue 修改状态比较简单，React 需要用 setState 来改变状态
- React 需要使用 JSX 语法相比 Vue 有一定的难度，Vue使用模版语法
- Vue 的定位就是降低前端开发的门槛，React 是让用户去接受他的思想
网友评论