前端面试题之Vue

对SPA单页面的理解，它的优缺点分别是什么

SPA在Web页面初始化时加载相应的HTML、CSS、JavaScript。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用路由机制实现HTML内容的变换，UI与用户的交互，避免页面的重新加载。

优点：

1. 用户体验好且快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复的渲染；
2. SPA单页面对服务器的压力小；
3. 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理。

缺点：

1. 初次加载比较耗时：为实现单页Web应用功能及显示效果，需要在加载页面的时候将CSS、JavaScript这些都统一加载，部分页面按需加载；
2. 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈来管理；
3. SEO难度较大：由于所有的内容都在一个页面中动态替换显示，所以在SEO上比较弱。

Vue的生命周期有哪些

1. 创建：beforeCreate，created；
2. 载入：beforeMount，mounted；
3. 更新：beforeUpdate，updated；
4. 销毁：beforeDestroy，destroyed。

生命周期示意图：

Vue常用的指令有哪些

• v-html：会将html代码解析出来并进行渲染
• v-text：输出文本
• v-if：条件判断指令
• v-show：是否隐藏元素
• v-for：循环指令
• v-bind：属性绑定指令（数据的单向绑定）
• v-model：实现数据的双向绑定
• v-on：绑定事件指令
• v-once：表示元素和组件只会渲染一次
• v-pre、v-cloak

v-show与v-if的区别

1. v-show的本质是改变display的值。
2. v-if是动态向DOM树内添加或者删除DOM元素。

v-show就是控制CSS的display，而v-if是不停的销毁和创建，因此如果需要频繁切换使用v-show性能会更好一点。

什么是MVVM

MVVM是Model-View-ViewModel的缩写，它是一种设计思想。

• Model层代表数据模式，也可以在Model中定义数据修改和操作的业务逻辑
• View代表UI组件，它负责将数据模型转化为UI展现出来
• ViewModel是一个同步View和Model的对象

维基百科

Vue组件之间如何通信

props / $emit

父传子 - props

<div id="app">
  <cpn :cgame="games" :cmsg="msg"></cpn>
</div>
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cgame">{{item}}</li>
    </ul>
    <div>{{cmsg}}</div>
  </div>
</template>

var app = new Vue({
  el: ‘#app‘,
  data: {
    msg: ‘父传子‘,
    games: [‘tlbb‘, ‘yxlm‘, ‘cyhx‘]
  },
  components: {
    cpn: {
      template: ‘#cpn‘,
      props: [‘cgame‘, ‘cmsg‘]
    }
  }
})

子传父 - $emit

子传父自定义事件：$emit("自定义事件名",自定义事件传递的参数)

<div id="app">
  <cpn @fclick="dclick"></cpn>
  {{msg}}
</div>
<template id="cpn">
  <div>
    <div v-for="item in main" @click="itemClick(item)">{{item}}</div>
  </div>
</template>

var app = new Vue({
  el: ‘#app‘,
  data: {
    msg: ‘hehe‘
  },
  methods: {
    dclick(item) {
      console.log(item);
      this.msg = item
    }
  },
  components: {
    cpn: {
      template: ‘#cpn‘,
      data() {
        return {
          main: [
            { id: 0, name: ‘zww‘ },
            { id: 1, name: ‘lq‘ }
          ]
        }
      },
      methods: {
        itemClick(item) {
          this.$emit(‘fclick‘, item)
        }
      },
    }
  }
})

ref 与 $parent / $children

访问子实例 - $children

<div id="app">
  <cpn></cpn>
  <button @click="btnClick">按钮</button>
</div>
<template id="cpn">
  <div>子组件</div>
</template>

var app = new Vue({
  el: ‘#app‘,
  methods: {
    btnClick() {
      this.$children[0].showSon()
    }
  },
  components: {
    cpn: {
      template: ‘#cpn‘,
      data() {
        return {
          msg: ‘子组件‘
        }
      },
      methods: {
        showSon() {
          console.log("hh");
        }
      },
    }
  }
})

访问父实例 - $parent

<div id="app">
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <span>子组件</span>
    <button @click="btnclick">按钮</button>
  </div>
</template>

var app = new Vue({
  el: ‘#app‘,
  data: {
    msg: ‘父组件内容‘
  },
  components: {
    cpn: {
      template: ‘#cpn‘,
      methods: {
        btnclick() {
          console.log(this.$parent.msg);
        }
      },
    }
  }
})

访问子实例 - refs

ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。

<div id="app">
  <cpn ref="a"></cpn>
  <button @click="btnClick">按钮</button>
</div>
<template id="cpn">
  <div>子组件</div>
</template>

var app = new Vue({
  el: ‘#app‘,
  methods: {
    btnClick() {
      this.$refs.a.showSon()
    }
  },
  components: {
    cpn: {
      template: ‘#cpn‘,
      data() {
        return {
          msg: ‘子组件‘
        }
      },
      methods: {
        showSon() {
          console.log("hh");
        }
      },
    }
  }
})

$emit / $on

$attrs / $listeners

Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

它实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

使用Vuex统一管理状态有如下好处：

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护；
2. 能够高效地实现组件之间的数据共享，提高开发效率；
3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步；

Vuex有如下几个核心概念：

1. State：用于数据的存储，提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储；
2. Getter：用于对Store中的数据进行加工处理形成新的数据，类似Vue中的计算属性，Store中数据发生变化，Getter的数据也会跟着变化；
3. Mutation：用于变更Store中的数据，且不能用于处理异步操作；
4. Action：用于处理异步任务，如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据；
5. Module：类似于命名空间，用于项目中将各个模块的状态分开定义和操作；

Vue中key值的作用是什么

key的作用主要是为了高效的更新虚拟DOM。

v-model的原理

v-model就是一个语法糖，它背后本质是包含了两个操作：

• v-bind绑定一个value属性
• v-on给当前元素绑定input事件

<input type="text" v-model="message">
<!-- 等价于 -->
<input type="text" :value="message" @input="message = $event.target.value">

Class与Style如何动态绑定

Class

对象语法

绑定class对象语法：对象的键是类名，值是布尔值。

<div v-bind:class="{ active: isActive, size: isSize }">对象绑定Class</div>

data: {
  isActive: true,
  isSize: false
}

数组语法

绑定class数组语法：数组中的成员直接对应类名。

<div v-bind:class="[isActive,isSize]">数组绑定class</div>

data: {
  isActive: ‘active‘,
  isSize: ‘size‘
}

Style

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }">对象绑定Style</div>

data: {
  activeColor: ‘red‘,
  fontSize: 60
}

数组语法

<div v-bind:style="[styleColor, styleSize]">数组绑定Style</div>

data: {
  styleColor: {
    color: ‘red‘
  },
  styleSize: {
    fontSize: ‘23px‘
  }
}

computed和watch的区别

computed

computed是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会被缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。

应用场景：当我们需要进行数值计算，并且依赖于其它数据时，应该使用computed，可以利用computed的缓存特性，避免每次获取值时，都要重新计算。

watch

watch是去监听一个值的变化，然后执行相对应的函数。它可以接受2个参数（newValue, oldValue）,即变化的最新值和上一次变化的旧值。它是没有缓存的。

应用场景：如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

Vue的修饰符有哪些

表单修饰符

.lazy：让数据在失去焦点或者回车时才会更新同步；
.number：自动将用户的输入值转为数值类型；
.trim：自动过滤用户输入的首尾空白字符；

事件修饰符

.stop：阻止冒泡；
.prevent：阻止默认行为；
.self：只会触发自己范围内的事件，不包含子元素；
.once：事件将只会触发一次；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.passive：Vue还对应addEventListener中的passive选项提供了.passive修饰符，能够提升移动端的性能。

不要把.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

.enter：回车键；
.tab：制表键；
.delete：含删除和退格键；
.esc：返回键；
.space: 空格键；
.up：向上键；
.down：向下键；
.left：向左键；
.right：向右键；

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta

鼠标按钮修饰符

.left：左键点击；
.right：右键点击；
.middle：中键点击；

.exact修饰符

.exact：修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

vue-router路由模式有几种

有两种模式，分别为hash模式和history模式

hash模式

地址栏URL中的#符号。比如此URL：https://www.cnblogs.com/LqZww/p/13544020.html#4261640972，hash的值为#/42616409711。

1. url路径会出现#字符；
2. hash值不包括在Http请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求；
3. hash值的改变会触发hashchange事件；

history模式

利用了HTML5 History Interface中新增的pushState()和replaceState()方法。这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

1. 整个地址重新加载，可以保存历史记录，方便前进后退；
2. 依赖H5 API和后台配置，没有后台配置的话，页面刷新时会出现404；

待完善！

Vue是如何实现数据的双向绑定的

如何理解Vue的单向数据流

vue-router是什么

\(route和\)router的区别

vue-router如何响应路由参数的变化

完整的vue-router导航解析流程

vue-router有哪几种导航钩子

vue-router的几种实例方法以及参数传递

vue-router的动态路由匹配以及使用

vue-router如何定义嵌套路由

组件及其属性

vue-router实现路由懒加载

前端面试题之Vue

原文：https://www.cnblogs.com/LqZww/p/13580368.html