vue学习day01

Vue --day01总结

1. 什么是vue
2. vue开发者工具 vue-devtool
3. 声明式渲染，组件化应用构建
4. 常见的开发模式MVC MVP MVVM
5. vue中的模板语法和常见指令

1. 什么是vue?

vuejs是一套构建用户页面的渐进式框架。vue采用自底向上增量开发的设计。
包括：

1. 声明式渲染
2. 组建系统
3. 客户端路由
4. 大规模状态管理
5. 构建工具

2. 开发模式【面试题】

开发模式 不等于设计模式

• MVC(springMVC前后端不分离)
  M表示model, V表示view,C表示control。
  1. 控制层可以访问视图，让其更新；
  2. 控制层可以访问模型，更新数据；
  3. 视图层可以访问模型，获取数据渲染页面。
     好处：分层可以实现代码的复用
     坏处： 高内聚，低耦合。 需要优化。
• MVP
  M表示model, V表示view,P表示presenter。
  由presenter进行渲染视图，修改数据
  好处： 实现解耦
  坏处： 由于Js是单线程的，大量操作dom会产生重绘和回流现象，浏览器渲染页面需要一定的时间，此时，如果用户访问页面，浏览器无法响应，会出现卡顿现象。所以对MVP进行优化，减少dom操作。
• MVVM
  M表示model, V表示view,VM表示viewModel。
  视图模型负责视图和模型之间的信息转换，通过数据的双向绑定，使视图与模型之间的数据得以传递。
  （用双向数据绑定，不用进行dom操作，对浏览器影响降到最低，优化性能）。
  优点：
  1. 低耦合
  2. 可重用性
  3. 可测试

【面试题】为什么vue实例中的data是一个对象，组件中的data是一个函数？

1. vue开发的应用一般为单页面应用，一般情况下只有一个vue实例，实例中的数据可以在当前项目中共享，所以vue实例中的data是一个对象；
2. vue组件的出现是为了组件的视图和数据可以复用（可以简单理解为js的函数封装），被复用的组件在不同的复用位置可能在操作不同的数据，所以每一个组件中的data数据必须相互独立。因此，组件中的data是一个函数，函数内部返回一个只能让当前组件使用的数据。

【面试题】js的数据类型（8）

• 基本数据类型： string number boolean null undefined bigInt symbol
• 引用数据类型：object(function array date regExp)

【面试题】vue有哪些组件？

1. v-text: 更新文本内容
2. v-html: 更新富文本内容
3. v-show: 根据boolean，显示隐藏元素（display）
4. v-if: 显示隐藏元素（创建销毁）
5. v-for: 循环
6. v-on:(简写为： @): 事件绑定
7. v-model: 双向数据绑定
8. v-bind: 属性绑定
9. v-slot: 插槽
10. .v-pre: 模板内容不会编译
11. v-clock: 如果网络比较差，原始的模板语法会显示，加上去，没编译完了，不会显示，直到编译完成才显示页面
12. v-once: 只渲染元素和组件一次

【面试题】为什么有了插值表达式，还要v-text呢？

插值表达式和v-text都是显示数据的，但是插值表达式有个问题，如果频繁刷新页面或者网速特别慢的时候，页面会显出原始的模板语法，然后才显示内容，v-text就不会出现这种问题。

【面试题】为什么v-for要加key

key的作用：给每一个节点添加唯一的id，这也是diff的一种优化策略，可以根据key，更精准确、更快的找到对于的节点（为了高效的更新虚拟dom） 。

1. 如果不加key，vue会采用就地复制的原则，最小化移动元素，并且会尝试尽最大努力在同适当为位置对相同类型的元素做patch或reuse。
2. 如果使用了key，vue会根据key的顺序记录元素，曾经拥有key的元素如果不再出现，会被直接remove或者destoryed。