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

拼搏现实的明天。 2024-04-20 09:25 54阅读 0赞

### 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>
      	
      </component>
    </keep-alive>

<keep-alive exclude="a">
      <component>
        
      </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>

[更深层次的点击链接查看][Link 1]

#### 以上是经过参考很多同行分享与官方文档，汇总的一份总结，如有不对，请指出，最后感谢大家观看，求点赞，求分享，求评论，求打赏~~ ####

[image-20190920150934386.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy85MTkxMDg4LTkxNDA1ZWFmMDA4NDdmMjQucG5n?x-oss-process=image/format,png
[Link 1]: https://www.jianshu.com/p/e7ebb1500613