Vue基础面试题-前端开发

1.Vue框架的有点是什么轻量级框架：只关注视图层，大小只有几十KB简单易学：文档通顺清晰，语法简单数据双向绑定，数据视图结构分离，仅需操作数据即可完成页面相应的更新组件化开发：工程结构清晰，代码维护方便虚...

1.Vue框架的有点是什么

轻量级框架：只关注视图层，大小只有几十KB
简单易学：文档通顺清晰，语法简单
数据双向绑定，数据视图结构分离，仅需操作数据即可完成页面相应的更新
组件化开发：工程结构清晰，代码维护方便
虚拟DOM加载HTML节点，运行效率高

2.什么是MVVM

MVVM：是Model-View-ModelView的缩写，是一种脱胎于MVC模式的设计模式

Model:代表数据层，负责存放业务相关数据

View:代表视图层，负责页面上的数据展示

ViewModel:是同步View和Model之间的关联，实现同步关联的核心是DOM Listeners和Data Bindings 工具，前者用于监听View 中DOM的变化，会选择性的传给Model，后者监听Model数据变化，将其更新给View

3.Vue中组件之间传值的方法有哪些

获取父子组件实例$parent $children

父组件向子组件传值：props

子组件向父组件传值：this.$emit()方法触发自定义事件


const component = {
  props: ['value'],
  template: `
    <div>
      <input type="text" @input="handleInput" :value="value">
    </div>
  `,
  data () {
    return {
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}

//父组件
new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  template: `
    <div>
      <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
    </div>
  `,
  data () {
    return {
      value: '123'
    }
  }
})

//通过v-model实现数据双向绑定
template: `
    <div>
         <!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>-->
         <comp-one v-model="value"></comp-one>
    </div>
  `,

兄弟组件之间传值

1.共同传给父组件，由父组件分发（状态提升）

2.使用vuex

3.利用bus事件总线

vue.prototype.$bus=new Vue()
A组件：methods :{
     函数{
    this.$bus.$emit(‘自定义事件名’，数据)
} //发送 

B组件：created(){
    this.$bus.$on(‘A发送过来的自定义事件名’，函数)
} //进行数据接收

4.Vue中的生命周期

1.beforeCreated():在实例创建之间执行，数据未加载状态

2.created():在实例创建、数据加载后，能初始化数据，DOM渲染之前执行

3.beforeMount():虚拟DOM已创建完成，在数据渲染前最后一次更改数据

4.mounted():页面、数据渲染完成，真实DOM挂载完成

5.beforeUpdate():重新渲染之前触发

6.updated():数据以及更新完成，DOM也重新render完成，更改数据会陷入死循环

7.beforeDestory():销毁前执行

8.destory():销毁后执行

5.为什么Vue组件中的data必须是一个函数

如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。
如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。

6.Vue中v-if和v-show的区别

v-if：进行切换时，会直接对标签进行创建和销毁，不显示标签不会加载在DOM树种

v-show:在进行切换时，会对标签的display属性进行切换，通过display不显示来隐藏元素

一般频繁切换使用的话-v-show更适合

7.Vue中computed和watch的区别

计算属性computed：

1.支持缓存，只有依赖数据发生变化时，才会重新进行计算函数

2.计算属性内不支持异步操作

3.计算属性的函数中有一个get和set方法

4.计算属性是自动监听依赖值的变化，从而动态返回内容

侦听属性watch：

1.不支持缓存，只要数据发生变化，就会执行侦听函数

2.侦听属性内支持异步操作

3.侦听属性的值可以是一个对象，接收handler回调的，deep深度监听，immediate三个属性

4.监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情

watch: { 
	obj: { 
    	//handler接收两个参数（newVal：新值，oldVal：旧值 
    	handler: function(newVal, oldVal){ 
    		console.log(newVal); 
		}, 
	deep: true,//设置为true时会监听对象内部值的变化； 
	immediate: true//设置为true时会立即以表达式的当前值触发回调； 
	} 
}

8.$nextTick是什么

Vue实现响应式并不是数据发生变化后就立即更新DOM，使用vm.$nextTick是下次DOM更新循环结束之后立即执行延迟回调，在修改数据之后使用，则可以在回调中获取更新后的DOM

在下次DOM更新循环结束之后执行延迟回调，nextTick主要使用宏任务和微任务，根据执行环境分别尝试采用

9.v-for中key的作用

key是Vue使用v-for渲染列表是的节点标识，使用key之后，当列表项发生变化时，Vue会基于key的变化重新排列元素顺序，并且移除key不存在的元素，提升运行效率

10.常用的事件修饰符有哪些

.stop:阻止冒泡

.prevent:阻止默认行为

.self:仅绑定元素自身可触发

.once:只触发一次

11.Vue如何获取DOM元素

在标签元素设置ref属性，然后通过替换this.$refs.属性值获取

<div ref="test"></div>
const dom = this.$refs.test

12.v-on如何绑定多个事件

<!--单事件绑定-->
<input type="text" @click="onClick">
<!--多事件绑定-->
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur }">

13.Vue如何清除浏览器缓存

1.项目打包的时候给每个打包文件加上hash值，一般是在文件后面加上时间戳

2.在html文件中加入meta标签，content属性设置为no-cache

3.在后端服务器中进行禁止缓存设置

14.Vue-router路由有哪些模式

一般分两种：

1.hash模式：后面的hash值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次hash值的变化会触发hashchange事件，虽然出现在url中，但是不被包括在HTTP请求中，对后端没有影响，因此改变hash不会重新加载页面

2.history模式：利用HTML5新增的push State()和replace State()方法。用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，提供了对历史记录进行修改功能，只是当他们执行修改时，虽然改变了当前的URL，但是浏览器不会立即向后端发送请求

hash模式和history模式都属于浏览器自身的特性，

注意：$route和$router前者为当前router跳转对象里面可以获取name、path、query、params等,后者是导航到不同URL，使用$router.push方法

15.keep-alive的了解

Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

16.Vuex是什么，有哪几种属性

Vue设计的状态管理工具，采用集中式存储管理Vue中所以组件的状态

1.state属性：基本数据（定义我们需要管理的数组、对象、字符串等等）


import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' // 导入响应的模块，*相当于引入了这个组件下所有导出的事例
import * as actions from './actions'
import * as mutations from './mutations'


Vue.use(Vuex)
// 首先声明一个需要全局维护的状态 state,比如 我这里举例的resturantName
const state = {
    resturantName: '飞歌餐馆' // 默认值
    // id: xxx  如果还有全局状态也可以在这里添加
    // name:xxx
}

2.getters属性：从state中派生出的数据（接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来）

3.mutation属性：更新store中数据的唯一途径提交mutation，其接收一个一state为第一个参数的回调函数

4.action属性：提交mutation以更改state，其中包含异步操作

5.module属性:用于将store分割成不同模块，每个模块都有自己的state，mutation和getter

17.Vue-router有哪几种导航钩子

1：全局钩子： beforeEach(to,form,next)、 afterEach(to,form)

2：路由独享钩子：  beforeEnter(to,form,next)、 beforeLeave(to,form)

3:组件路由： beforeRouteEnter(to,form,next){
   this 不指向实例 组件还没创建
   next((vm) =>{
        vm就是实例
   })
}、 
beforeRouteUpdate(to,form,next){
路由改变 组价被复用的时候被调用
}、 
beforeRouteLeave(to,form,next){
离开的时候被调用
}

18.axios和ajax的区别

1.axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样

简单理解：ajax实现了网页的局部护具刷新，axios实现对ajax的封装，axios是ajax，ajax不止是axios

AJAX：异步JavaScript和xml，是一种创建交互式网页应用的网页开发技术

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。


$.ajax({
            url: 'http://jsonplaceholder.typicode.com/users',
            type: 'get',
            dataType: 'json',
            data: {
                //'a': 1,
                //'b': 2,
            },
            success: function (response) {
                console.log(response)；
            }
        })

AXIOS：用于浏览器和node.js的基于promise的HTTP客户端

1.从浏览器制作XMLHttpRequests

2.让HTTP从node.js请求

3.支持promiseAPI

4.拦截请求和响应

5.转换请求和响应数据

6.取消请求

7.自动转换为JSON格式

8.客户端支持防止XSRF


axios({
            url: 'http://jsonplaceholder.typicode.com/users',
            method: 'get',
            responseType: 'json', // 默认的
            data: {
                //'a': 1,
                //'b': 2,
            }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
        })