10-19 钟申义 日志

什么是MVVM/MVC，他们的区别?

什么是MVVM:

传统前端三大部分：html；css；js。

​ 缺点：html和css的功能都太弱了，对于页面的改变都要js来编写，就导致需要js编写大量的重复的增删改查操作。

现代前端三大部分：数据模型（mdel) ;界面（view）; 控制器（viewmodel）：试图模型/控制

​ 数据模型（model）：集中保存界面中的所有变量名和变量值。模型，指程序中创建的或者从远程获取的数据，
​ 一般使用js中的data对象保存，类容会直接显示在view中。
​ 界面（view）：视图，指网页中的元素和样式，一般指的就是html和css。view是html网页中的一个需要动态加载的父元素（“div#app”）。
​ html中的视图，也被称为模板template，如果发生template错误，那么就在HTML中查找就可以了。
​ 控制器（viewmodel）：试图模型/控制：用于替代之前的Dom/jquery操作，封装了重复的增删改查操作，把模型中的数据和view中
​ 的HTML元素“绑定”到一起。 vue类型提供的就是一种强大的viewmodel对象，可以自动同步数据和页面元素。
​ 专门负责自动将模型中的变量值同步到界面中去

mvc：

​ MVC是 Model-View- Controller 的简写。即模型-视图-控制器。MVC中的M和V的意思和MVVM中的M和V指的意思一样。C即Controller指的是页面业务逻辑。
​ 使用MVC的目的就是将模型和视图的代码分离。MVC是单向通信。也就是View和Model必须通过Controller来承上启下。MVC和MVVM的区别并不是VM取代了C，
​ ViewModel存在的目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作操作业务等还是应该放在Contronller中实现。也就是所MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早，前端并不那么成熟，很多业务逻辑也是在后端实现，所以前端并没有真正意义上的MVC模式

mvvm和mvc区别：

​ 都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量
​ 的DOM 操作使页面渲染性能降低，加载速度变慢， 影响用户体验。vue数据驱动，通过数据来显示视图层而不是节点操作。

v-for为什么一定要加key？

因为 vue 在更新渲染 dom 的时候是根据新旧 dom 数进行对比的，使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点

vue的双向绑定（解释原理）

主要是通过数据劫持object.defineProperty和发布订阅者模式实现的，通过object.defineProperty监听数据发行变化然后通知定阅者

虚拟DOM树问题

虚拟 DOM 是什么？

“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼

VNode 是什么？

Vue 在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”

vue的父传子，子传父（传值问题）

父组件往子组件传值 props

子组件往父组件传值，通过 emit 事件

不同组件之间传值，通过 eventBus（小项目少页面用 eventBus，大项目多页面使用 vuex）

vue.js的核心思想

数据驱动（基于操作 dom 的方式）：Dom 是数据的一种自然映射（双向数据绑定），手动改变 DOM 非常麻烦，使用vue.js 之后，只需要改变数据，通过改变 Directives 指令，当数据发生变化，会通过数据指令去修改对应的 DOM

Vue.js 还会对事件进行一定的监听，当我们改变视图（view）的时候通过 DOM Listeners 来改变数据

组件化：组件的设计原则：页面上每一个独立的可视/可交互区域视为一个组件，每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护，展示面不过是组件的容器，组件可以嵌套自由组合形成完整的页面

vue的路由跳转问题

声明式（标签跳转）

编程式（ js 跳转）router.push('index')

心得

今天学的axios，只是跟着打实现了，根本没有理解具体意思。