vue面试题之三：vue常见面试题①

3. vue常见面试题

1. vue的优缺点

优点：性能好，简单易用，前后端分离，双向数据绑定，单页面应用用户体验好。
缺点：不利于SEO优化。

2. keep-alive的作用是什么?

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重负渲染DOM。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component
</keep-alive>

Props:
- Include:字符串或正则表达式，只有匹配的组件会被缓存
- exclude：字符串或正则表达式，任何匹配的组件都不会被缓存

// 组件 a
export default {
  name: 'a',
  data(){
    return {}
  }
}

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存！-->
  </component>
</keep-alive>

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存 -->
  </component>
</keep-alive>

配合 vue-router 使用
- router-view 也是一个组件，如果直接被<keep-alive>包裹，所有路径屁哦诶到的视图组件都会被缓存

<keep-alive>
  <router-view>
    <!-- 所有路径匹配到的视图组件都回呗缓存！-->
  </router-view>
</keep-alive>

如果指向 <router-view> 里面的某个组件被缓存，需要增加 router.meta 属性

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home'，
      component: Home,
      meta: {
        keepAlive: true // 需要被缓存 false:不需要被缓存
        }
    }
  ]
})

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 被缓存的试图组件！-->
  </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
  <!-- 不被缓存的视图组件！-->
</router-view>

3. vue中如何获取DOM元素

通过给元素绑定ref=“XXX”,
通过this.$refs.XXX 或者 this.$refs['XXX']来获取

* 注意：vue中操作dom需要谨慎，尤其是添加或者删除dom的时候，

4. vue-loader是什么？使用它的用途有哪些？

vue-loader是解析 .vue 文件的一个加载器，将template/js/style转换成js模块。
js可以使用ES6语法，style样式可以用scss或者less，template 可以加jade等。

5. Vue 中为什么使用key？

用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点，可以高效的更新虚拟DOM。

6. axios解决跨域

1. 配置 BaseUrl, 配置访问的URL前缀。

import Vue from 'vue'
import App from './App'
import Axios from 'axios'

Axios.defaults.baseURL = '/api'
// 每次发送请求都回带一个 /api 的前缀。

1. 配置代理，在src文件夹下创建文件 vue.config.js文件。添加一下内容。

module.exports = {
  outputDir: 'dist', // build 输出目录
  assetsDir: 'assets', // 静态资源目录
  lintOnSave: false, // 是否开启eslint
  devServer: {
    open: true, //是否自动弹出浏览器页面
    host: 'localhost',
    port: '8080',
    https: false, // 是否使用 HTTPS协议
    hotOnly: false, // 是否开启热更新
    proxy: {
      '/api': {
        target: 'https://www.xxx.com/api', // api服务器的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

1. 修改请求的URL，

// 假设请求地址为 https://www.xxx.com/api/deatils/info
this.$axios.get('/details/info')
  .then()
  .catch()

7. $nextTick() 的使用

this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用他，然后等待dom更新。他跟全局的Vue.nextTick一样，不同的是回调的this自动绑定到调用他的实例上。

<template>
  <div>
    <div ref="wrap">{{value}}</div>
    <button @click="clickBtn">点击改变</button>
  </div>
</template>

<script>
export default {
  name: 'home',
  components: {
  },
  data() {
    return {
      value: '祝你面试成功'
    }
  },
  created() {
    console.log(`111: ${this.$refs['wrap']}`)
    this.$nextTick(() => {
      console.log(`222: ${this.$refs['wrap']}`)
    })
  },
  mounted() {
    console.log(`333: ${this.$refs['wrap']}`)
    this.$nextTick(() => {
      console.log(`444: ${this.$refs['wrap']}`)
    })
  },
  methods: {
    clickBtn() {
      this.value = '升职高薪'
      console.log(this.$refs['wrap'].innerText)
      this.$nextTick(() => {
        console.log(this.$refs['wrap'].innerText)
      })
    }
  }
}
</script>

image-20190920150934386.png

根据打印顺序可以看到，在created()执行的时候DOM并未进行任何渲染，而此时进行的DOM操作没作用，而在created()里面使用this.$nextTick()可以等待DOM生成以后再来获取dom对象。
根据上面的放马点击栗子可以看出，在方法里直接打印的话，由于dom元素还没有更新，因此打印出来的还是为改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值。
this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势。

8. vue组件中的data为什么必须是一个函数？

如果不用函数的话，实例化的组件是共享同样的一个data对象，当你修改一个属性的时候，data也恢复阿生改变。

当data是一个函数的时候，每个实例的data属性都是独立的，不会相互影响。

9. Vue中双向数据绑定是如何实现的？（vue双向数据绑定原理）

vue实现双向数据绑定的原理就是利用了Object.defineProperty()这个方法重新定义了对象获取属性值get()和设置属性值set()的操作来实现的。

// Object.defineProperty()方法
let obj = {}
let name
Obejct.defineProperty(obj,'name',{
  get: function() {
    console.log('获取')
    return val
  }
  set: function(newVal) {
    console.log('设置')
    }
})
obj.name = 'arthas' // 在给obj设置name属性的时候，触发了set这个方法
const val = obj.name // 在得到obj的name属性，会触发get方法。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="test"></div>
  <input type="text" id="text">
  <script>
    const obj = {}
    const test = document.querySelector('#test')
    const text = document.querySelector('#text')
    Object.defineProperty(obj,'name',{
      get: function() {
        return val
      },
      set: function(newVal) {
        text.value = newVal
      }
    })
    text.addEventListener('input', function(e){
      // 给obj的name属性赋值，进而触发该属性的set方法
      obj.name = e.target.value
    })
    obj.name = 'arthas' // 再给obj设置name属性的时候，触发了set这个
    test.innerHTML = obj.name // 调用obj的get属性获取name
  </script>
</body>
</html>

更深层次的点击链接查看