vue常见面试题（一）

1.vue优点

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

2.vue父组件向子组件传递数据？

1.父组件将数据绑定在子组件上

<template>
  <transition name="slide">
    <music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
  </transition>
</template>

2.子组件接受数据props

export default {
   
  props: {
   
    bgImage: {
   
      type: String,
      default: ''
    },
    songs: {
   
      type: Array,
      default: () => []
    },
    title: {
   
      type: String,
      default: ''
    }
  },
}

3.子组件像父组件传递事件

在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了

父组件

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
   
    components: {
   
      child
    },
    methods: {
   
      fatherMethod() {
   
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
   
    methods: {
   
      childMethod() {
   
        this.$emit('fatherMethod');
      }
    }
  };
</script>

4.v-show和v-if指令的共同点和不同点

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

5.如何让CSS只在当前组件中起作用

将当前组件的修改为<style scoped>

6.的作用是什么?

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

7.如何获取dom

通过refs方法

HTML

<div id="App">
     <div class="aa" ref="menuItem" @click="aa($event)">aa</div>
    <div @click="bb"\>bb</div>
</div>

JS

<script>
     new Vue({
   
          el: '#App',
          methods: {
   
               bb: function() {
   
                    var getMenuText = this.$refs.menuItem.innerText;
                    console.log(getMenuText);//aa
               },
               aa: function(e) {
   
                    var el = e.target;
                    console.log(el);//<div class="aa">aa</div>
               }
          }
     })
</script>

8.说出几种vue当中的指令和它的用法？

v-if：判断是否隐藏；

v-for：数据循环；

v-bind:class：绑定一个属性；

v-model：实现双向绑定

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

vue文件的一个加载器。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

根据官网的定义，vue-loader 是 webpack 的一个 loader，用于处理 .vue 文件。

10.为什么使用key

当有相同标签名的元素切换时，需要通过key 特性设置唯一的值来标记以让Vue 区分它们，否则Vue 为了效率只会替换相同标签内部的内容。

11.axios及安装

1.axios是什么？

请求后台资源的模块

2.axios安装？

根目录运行

npm install axios -S

在使用的地方

import axios from  'axios'

12.axios解决跨域

首先在build/webpack.dev.conf.js设置代理

var express \= require('express')

var axios \= require('axios')

var app \= express()

var apiRoutes \= express.Router()

app.use('/api', apiRoutes)
before(apiRoutes) {
     
      apiRoutes.get('/api/getDiscList', function (req, res) {
     
        var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' // 原api  
        axios.get(url, {
     
          headers: {
     
            referer: 'https://c.y.qq.com/',  
            host: 'c.y.qq.com'  
          },  
          params: req.query  
        }).then((response) => {
     
          res.json(response.data)  
        }).catch((e) => {
     
          console.log(e)  
        })  
      })
}  

在页面中使用

export function getDiscList() {
   
  const url = '/api/getDiscList'

  const data = Object.assign({
   }, commonParams, {
   
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })

  return axios.get(url, {
   
    params: data
  }).then((res) => {
   
    return Promise.resolve(res.data)
  })
}
  

13.v-model的使用

用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model在内部使用不同的属性为不同的输入元素并抛出不同的事件：

• text 和 textarea 元素使用value属性和input事件；
• checkbox 和 radio 使用checked属性和change事件；
• select 字段将value作为 prop 并将change作为事件。
  详情链接

14.scss的安装以及使用

1、开始在vue项目中使用sass,在命令行输入一下命令进行安装（使用git命令行要用shift+insert 进行粘贴否则粘贴不上）

cnpm install node-sass --save-dev //安装node-sass 
cnpm install sass-loader --save-dev //安装sass-loader 
cnpm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！

2、这个时候你打开build文件夹下面的webpack.base.config.js
把里面的module改成这样的

module: {
    
　　　　rules: [ 
　　　　　　　　　　{
    
　　　　　　　　　　　　test: /\.vue$/, 
　　　　　　　　　　　　loader: 'vue-loader', 
　　　　　　　　　　　　options: vueLoaderConfig
　　　　　　　　　　}, 
　　　　　　　　　　{
    
　　　　　　　　　　　　test: /\.js$/, 
　　　　　　　　　　　　loader: 'babel-loader', 
　　　　　　　　　　　　include: [resolve('src'), 
　　　　　　　　　　　　resolve('test')] 
　　　　　　　　　　}, 
　　　　　　　　　　{
   
　　　　　　　　　　　　 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
　　　　　　　　　　　　 loader: 'url-loader', 
　　　　　　　　　　　　 options: {
    
　　　　　　　　　　　　　　　　limit: 10000,
　　　　　　　　　　　　　　　  name: utils.assetsPath('img/[name].[hash:7].[ext]')
                             } 
                 }, 
　　　　　　　　　　{
    
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: 'url-loader', 
                   options: {
    
                               limit: 10000, 
                               name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                            } 
                   }, 
　　　　　　　　　　{
    //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass! 
                     test: /\.scss$/,
                     loaders: ["style", "css", "sass"]
                  } 
               ] 
           }

3、在需要用到sass的地方添加lang=scss

 <style lang="scss" scoped="" type="text/css"> 
//你的sass语言 $primary-color: #333; 
   body {
   
        color: $primary-color; //编译后就成了 color:#333;类似于js的变量！ 
       } 
</style>

15. 请说出vue.cli项目中src目录每个文件夹和文件的用法？

assets文件夹是放静态资源；

components是放组件；

router是定义路由相关的配置;view视图；

app.vue是一个应用主组件；

main.js是入口文件

16.分别简述computed和watch的使用场景

一. methods和（watch、computed）的 区别

1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数

二. methods和computed的 相比 computed的好处

import Vue from 'vue'

new Vue({
   
  el: '#root',
  template: `
    <div>
      <p>Name: {
    {name}}</p>
      <p>Name: {
    {getName()}}</p>
      <p>Number: {
    {number}}</p>
      <p><input type="text" v-model="number"/></p>
      <p>FirsName: <input type="text" v-model="firstName"/></p>
      <p>LaseName: <input type="text" v-model="lastName"/></p>
    </div>
  `,
  data: {
   
    firstName: 'Jokcy',
    lastName: 'Lou',
    number: 0
  },
  computed: {
   
    name () {
   
      console.log('new name')
      return `${
     this.firstName}