前端学习--vue框架基础知识（一）

1.对于MVVM的理解

• MVVM是model-view-viewModel的缩写。

• model代表的是数据模型，可以定义数据的修改和操作业务逻辑。

• view代表的是ui组件，可以将数据模型转化ui展现出来。

• viewModel可以操作数据模型，处理用户交互等。它是将model和view连接起来的一个对象，view和model本身是没有任何联系的。但model和viewmodel之间交互式双向的，所以view的改变会反应到model上，而model的改变也会反应到view上。

JS是操作DOM结构更新视图，vue是数据驱动视图。

1.1MVVM的优点：

• .低耦合。视图（View）可以独立于Model变化和修改，一个Model可以绑定到不同的View上，当View变化的时候Model可以不变化，当Model变化的时候View也可以不变；

• 可重用性。你可以把一些视图逻辑放在一个Model里面，让很多View重用这段视图逻辑。

• 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。

• 可测试。

2.对vue生命周期的理解

每个Vue实例在创建时都会经过一系列的初始化过程，vue的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或者事件。

create阶段：vue实例被创建

create阶段：vue实例被创建

beforeCreate: 创建前，此时data和methods中的数据都还没有初始化

created： 创建完毕，data中有值，未挂载

mount阶段： vue实例被挂载到真实DOM节点

beforeMount：可以发起服务端请求，去数据

mounted: 此时可以操作DOM

update阶段：当vue实例里面的data数据变化时，触发组件的重新渲染

beforeUpdate :更新前

updated：更新后

destroy阶段：vue实例被销毁

beforeDestroy：实例被销毁前，此时可以手动销毁一些方法

destroyed:销毁后

• 第一次加载页面会触发哪些事件钩子 ？
  beforeCreate created beforeMount mounted

• DOM渲染在哪个周期完成？
  mounted

2.1组件生命周期

生命周期（父子组件） 父组件beforeCreate --> 父组件created --> 父组件beforeMount -->子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件 mounted --> 父组件mounted -->父组件beforeUpdate -->子组件beforeDestroy–> 子组件destroyed -->
父组件updated

加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

挂载阶段 父created->子created->子mounted->父mounted

父组件更新阶段 父beforeUpdate->父updated

子组件更新阶段 父beforeUpdate->子beforeUpdate->子updated->父updated

销毁阶段 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

3.computed与watch

• 既能用 computed 实现又可以用 watch 监听来实现的功能，推荐用 computed， 重点在于 computed 的缓存功能 computed 计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量 改变时，计算属性也会跟着改变；
• watch 监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法。
• watch 属性监听 是一个对象，键是需要观察的属性，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作,监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用。
• computed 计算属性 属性的结果会被缓存，当computed中的函数所依赖的属性没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。除非依赖的响应式属性变化时才会重新计算，主要当做属性来使用 computed中的函数必须用return返回最终的结果 computed更高效，优先使用。data 不改变，computed 不更新。

3.1使用场景 ：

• computed：当一个属性受多个属性影响的时候使用，例：购物车- - 商品结算功能
• watch：当一条数据影响多条数据的时候使用，例：搜索数据。

4.什么是Virtual DOM？为什么Virtual DOM比原生DOM快？

• Virtual DOM：用js模拟真实dom

      用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更时，重新构造一棵新的对象树。然后用新的树和旧的树进行比较两个数的差异。然后把差异更新到久的树上，整个视图就更新了。
      Virtual DOM 本质就是在 JS 和 DOM 之间做了一个缓存。既然已经知道 DOM 慢，就在 JS 和 DOM 之间加个缓存。JS 先操作 Virtual DOM对比排序/变更，最后再把整个变更写入真实 DOM。

• Virtual DOM在需要大量操作DOM的时候，能够很好的提高操作效率。通过在操作前确定需要做最小的修改，比原生DOM快。