Vue中常见的面试题（一）

Vue框架

上层框架 只关注数据驱动 借鉴MVVM模式 

MVVM是Model-View-ViewModel的简写，它是一种设计思想，它从WPF（Windows Presentation Foundation）的绑定概念衍生而来，并扩展到了前端JavaScript框架，使得视图层可以更加方便地和业务逻辑层进行分离。

在MVVM中，M（Model）是指数据模型，V（View）是指用户界面，VM（ViewModel）是指视图模型。ViewModel是M和V之间的桥梁，它负责将M的数据同步到V上，反之亦然。

具体来说，MVVM模式的实现过程如下：

1. 在M中定义数据模型，这个数据模型通常是一个JavaScript对象，它包含了各种属性和方法。
2. 在V中定义用户界面，这个用户界面通常是一些HTML元素，它们可以显示M中的数据。
3. 在VM中定义视图模型，这个视图模型是一个桥接M和V的中间件，它负责将M中的数据同步到V中，同时也要将V中的变化同步回M中。

MVVM模式的优点在于：

1. 实现了视图和业务逻辑的分离，使得前端开发更加清晰和易于维护。
2. 通过数据绑定和自动更新机制，减少了手动更新界面的工作量。
3. 使得前端开发可以和后端开发更好地协作，提高了开发效率。

1.生命周期 

从vue实例创建到虚拟dom产生到数据绑定数据监听到销毁得过程
  实例创建阶段
    beforeCreate 实例创建前
      初始化默认事件和默认生命周期，此时实例还没创建完成，无法访问data数据和methods方法
    created 实例创建完成
      初始化数据注入和数据监听，此时实例创建完成，可以访问data数据和methods方法
      最早得异步请求
  实例挂载阶段
    beforeMount 实例与模板绑定之前 完成模板编译
      查看有无el选项，有查看有无template选项，没有template选项会把el外部html作为模板编译，
      有el选项，有template选项，将template作为模板使用render函数编译。如果没有el选项，使用
      实例方法$mount()完成模板编译
      此时模板与实例还未绑定 无法访问dom元素
    mounted 实例与模板绑定完成 创建$el代替el选项
      此时可以访问dom元素
  实例更新阶段  只要数据发生改变就会触发生命周期
    beforeUpdate 实例更新前 
      此时可以获取到最新得数据 但是使用到数据dom元素还未更新完成  旧dom元素
    updated
      此时可以获取到最新得数据 使用到数据dom元素更新完成  新dom元素
  实例销毁阶段  $destroy销毁组件
    beforeDestroy 实例销毁前 此时可以修改数据和方法
    destroyed 实例销毁完成 此时移除监听器、子组件和事件监听，修改数据和方法失败，但是可以访问

2.模板语法 

1.文本插值 把vue变量渲染为普通文本使用mustache语法 {{msg}}
    2.v-html  输出html代码 返回数据是字符串html代码 输出html代码 可以给绑定v-html 
    3.v-bind 给标签属性绑定一个变量 动态绑定style class 其他数据类型 可以使用v-bind: 可以简写为:
    4.js表达式 
      调用方法 三目运算符 
      {{js表达式}}

v-if和v-show区别？

v-if条件表达式对应的是组件创建和销毁，满足表达式组件创建，不满足表达式组件销毁。
  v-if是惰性的，如果一开始不满足条件表达式，组件就不会被渲染，直到第一次条件为真才会渲染组件
  v-show无论初始条件为真或者假，都会被渲染，对应的就是CSS属性display切换,满足条件表达式
  组件显示到模板中，不满足条件表达式隐藏组件
  v-if有着更高得切换开销，如果条件很少改变情况可以使用v-if指令渲染，v-show用于频繁切换

key作用：

  因为vue使用diff算法，会高效复用组件，如果是同级别得组件，如果在有的
  情况不是重新创建，而是对已有组件进行复用。这样渲染效率变得低下，为了
  让组件不被复用，可以给组件设置一个唯一标识key值。

为什么组件data返回得是一个函数不是一个对象？

因为组件实例是可以被复用得，如果data是一个对象就会全局可见，只要其中一个使用到该组件得组件修改了
数据，剩下使用到该组件得组件数据也会被修改。data只能返回一个函数返回一个对象，对象数据只在当前
组件内可见！