重点知识-Vue.js基础

1. 什么是MMVVM模式？

MVVM模式即（Model-view-viewmodel），中Model为模型（我们在JS中操作的数据），view为视图（也就是我们看到的界面），viewmodel为控制器，它的出现，将模型与视图分离开，两者只能通过该控制器间接通信。在该模式下，当数据也就是模型发生改变的时候，控制器就会接到通知，然后告知视图，实现同步数据刷新

2. MVVM模式与MVC模式对比

MVC

• Model-模型：我们通过JS操作的数据
• View-视图：我们看到的页面
• Control-控制器：用于处理用户的请求，将指定数据手动渲染到指定页面的DOM节点

MVVM

• Model-模型：我们通过JS操作的数据
• View-视图：我们看到的页面
• ViewModel：用于处理请求的数据，将数据自动渲染到指定页面的DOM节点

3. Vue实例的生命周期钩子有哪些，具体有什么用

beforeCreate：实例创建前触发，此时Vue实例还未创建，$data还不存在（数据还未双向绑定）

created：实例创建后触发，此时Vue实例已经创建，$data已存在

beforeMount：

• $el挂载前触发，此时会判断是否存在el，如果没有那么等待调用vm.$mount(el)手动关在，再执行后续逻辑
• 检查配置对象中是否 template 属性
  • 如果有template属性，就把template中的内容编译到render函数中渲染
  • 如果没有template，就把 el 中的内容作为 template编译
• 此时 this.$el 已存在，但页面数据并没有渲染
• 此钩子函数结束后，立即执行使用 $el 渲染显示数据并替换掉 el

mounted：此时页面已经渲染完成，$el已经挂载到DOM结构中

beforeUpdate：数据修改前触发

updated：数据更改后触发

beforeDestory：调用vm.$destory()，实例销毁前触发

destoryed：调用vm.$destory()，实例销毁后触发

4. 简单的描述一下Vue中的模板语法

Vue使用“Mustache”语法（即双大括号），将数据解释为普通文本

使用模板语法后，这些数据会双向绑定，实现实时刷新效果

我们可以使用v-指令来动态设置属性、样式、内容等待

5. 计算属性与实例方法的区别

• 计算属性：

  • 是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。意味着只要数据没有发生改变，那么多次访问计算属性，它会立即返回之前的计算结果，而不会再次执行函数
  • 计算属性没有参数

• 方法：

  • 不会缓存，每当触发再次渲染时，就会再次执行函数
  • 方法允许传递参数

• 如果有一个对性能开销较大的计算，例如需要遍历一个巨大的数组并进行大量计算，选择计算属性；否则选择方法，或者我们不希望缓存，也选择方法；或者我们需要使用到参数，来动态的处理逻辑，需要选择方法；

6. v-if与v-show的区别

• v-if：

  • 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
  • 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块
  • 有更高的切换开销，如果运行时条件很少改变，使用v-if较好

• v-show：

  • 不管初始条件是什么，元素总是会被渲染，只是简单地基于 CSS 进行切换
  • 内容需要频繁的切换，使用v-show较好

7. 什么是变异方法与非变异方法？如何解决非变异方法数据不刷新的问题？

• 变异方法：原生JS中提供了一系列操作数组的方法，而Vue对其中的一部分方法进行了包裹，当我们使用这些方法时，将会触发视图的更新
• 非变异方法：它们不会改变原来的数组，而是返回新的数组，我们需要使用Vue.set API来触发视图刷新

8. 组件中允许修改prop吗？如果希望在组件中，调整prop的值，应该如何操作？

在组件中，我们不允许修改prop，但是我们可以间接的修改

我们可以通过在调用组件的时候，使用.sync修饰符，设置对应prop属性为同步，这样我们就可以在组件中，使用$emit来呼叫对应prop的修改

9.axios同步和异步