你想知道的vue高频面试题（下）

1.方法和计算属性和侦听器区别

面试点 : 侦听器和计算属性区别 (1)计算属性有缓存机制,侦听器没有 (2)计算属性不支持异步操作, 侦听器支持异步操作 (3)计算属性是一个额外新增的属性， 侦听器只能侦听data中的属性 (4)计算属性有返回值return,侦听器不需要return (5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了，就会执行计算属性方法), 侦听器只能侦听一个数据的变化。

• 方法

  • 需要主动调用触发

  • 不会缓存

• 计算属性

  • 监听多个属性：只要计算属性内部数据变化就会触发

  • 有缓存机制（必须要说的）

• 侦听器

  • 监听一个属性

  • watch支持异步

---

2.请说下封装 vue 组件的过程

• 1.先分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能

  • 找出业务需求中存在复用的地方

• 2.具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法

---

3.vue组件传值

（1）父传子

1. 子组件props定义变量

2. 父组件在使用子组件时通过行内属性给props变量传值

特点：单向数据流

（2）

1.子组件：$emit触发的父事件

2.父在使用组件用@自定义事件名=父的方法（子把值带出来用）

特点：事件监听

（3）非父子组件

vuex

---

4.Vue 组件 data 为什么必须是函数

官方文档：https://cn.vuejs.org/v2/style-guide/#%E7%BB%84%E4%BB%B6%E5%90%8D%E4%B8%BA%E5%A4%9A%E4%B8%AA%E5%8D%95%E8%AF%8D%E5%BF%85%E8%A6%81

因为组件是需要在多个地方使用的

如果data是一个对象，对象是引用类型。 一旦某一个地方修改，就会全部修改data是一个函数，每一次复用组件的时候就会从这个函数返回一个新的对象。 这样组件在复用的时候就可以做到数据互不干扰。

---

5.scoped作用与原理

作用：组件css作用域，避免子组件内部的css样式被父组件覆盖

默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式

原理：给元素添加一个自定义属性 v-data-xxxxx

---

6.第一次加载页面会触发哪几个钩子函数？

• 四个钩子

  • beforeCreate,

  • created,

  • beforeMount,

  • mounted 这几个钩子函数

---

7.vue路由作用与原理

• 路由作用： 实现单页面应用

• 原理：监听location的hash值

---

8.路由之间是怎么跳转的？有哪些方式

1. <router-link to="需要跳转到页面的路径">

2. this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面

3. this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面

4. this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

---

9.vue-router怎么配置路由（路由配置六个流程）

1.引入组件

2.配置路由path和组件, 和生成路由对象routes

3.创建路由对象router

4.把路由对象挂载到new Vue()

5.页面使用<router-view></router-view> 承载路由

6.<router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)

---

10.$route和$router的区别？

routes : 数组。 路由匹配规则

router ： 对象。 路由对象

$router ： 对象。 用于跳转路由 和 传递参数

$route ：对象。 用于接收路由跳转参数