面试题

VUE常用指令

{{}} 插值表达式

v-cloak解决vue页面闪烁问题

当网络比较卡的时候，我们可以为最外层的div元素添加 v-cloak 防止用户看到插值表达式

注意: 必须写一个css样式 [v-cloak]{ display:none} 不然没有效果

解决办法:

<style>
　　[v-cloak]{ display:none} // css样式
</style>
 
<div id="app" v-cloak>{{ msg }}</div>

v-html

在元素的属性节点上添加v-htmll如:<p v-html="msg"></p> // 覆盖原有内容

会解析标签

msg 是 '<div>你好</div>'
<p v-text="msg"></p>

 // 显示的结果是: 你好

v-text

在元素的属性节点上添加v-text 如:<p v-text="msg"></p> // 覆盖原有内容

不会解析标签

msg 是 '<div>你好</div>'
<p v-text="msg"></p>

显示的结果是: <div>你好</div>

v-bind 属性绑定简写 :

v-on 事件绑定简写@

v-if 条件绑定是动态的移除或者显示判断的值如果是true 的话显示 false 移除

v-show 是控制 display属性的 node / block

v-if和v-show的作用，都是切换界面上元素的显示或隐藏的

v-model 数据的双向绑定

v-for :key 循环

v-if 和 v-show的区别

v-if是动态的控制元素的显示或移除

v-show 是控制元素的显示或隐藏 v-show只是控制 display 属性

vue双向绑定的原理

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

vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

父向子组件传递数据

父组件向子组件传递数据是用属性绑定子组件用 props接收

子组件向父组件传递数据

子组件向父组件传递数据是用事件绑定用 $meit 接收

MVC与MVVM

MVC主要是后端的分层开发思想,把一个完整的后端项目,分成三个部分:

　　Model: (数据层) 主要负责数据库的操作

　　View:(视图层) 所有前端页面,统称 view层

Controller: (业务逻辑层) 主要处理对应的业务逻辑

MVVM是前端页面的分层开发思想, 主要关注视图层分离, 也就是说: MVVM把前端的视图层,分为了三部分 Model, View ViewModel

　　Model: 是页面中,需要用到的数据

　　View 是页面中的HTML结构

　　ViewModel 是一个中间的调度这, 提供了双向数据绑定的概念

keep-alive标签的作用

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

axios与ajax的区别

1、功能不同

Axios：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

AJAX：AJAX 是与服务器交换数据并更新部分网页的，在不重dao新加载整个页面的情况下Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
2、特点不同

Axios从浏览器中创建 XMLHttpRequests，可以从 node.js 创建 http 请求，支持 Promise API，可以拦截请求和响应、转换请求数据和响应数据。
Ajax是一种用于创建快速动态网页的技术，Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

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

computed: 当一个属性受多个属性影响的时候就需要用到computed

watch: 当一条数据影响多条数据的时候就需要用watch

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

因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
　　组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

$router与$route

$router对象是全局路由的实例，是router构造方法的实例。

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

vue-router实现路由懒加载（动态加载路由）

const 组件名称 = () => import(/* webpackChunkName: "组名" */ '文件路径')

vuex 是什么？

vue框架中状态管理。在main.js引入store，注入。

vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

如何获取dom?
ref="domName" 用法：this.$refs.domName

DOM的操作

创建元素 document.createElement('标签')

添加元素父节点.appendChind(节点)

删除元素父节点.removeChind(节点)

替换元素父节点.replaceChild(新节点, 旧节点)

什么是闭包?

①、闭包就是能够读取其他函数内部变量的函数。

②、将函数内部和函数外部连接起来的桥梁。

状态码

2xx (成功)表示成功处理了请求的状态代码

3xx (重定向) 表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。

4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错

原生ajax请求有几个步骤?

// ①创建XMLHTTPRequest对象//1. 创建XMLHttpRequest对象
function getXhr () {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        //IE7+ 和 非IE 中都有 XMLHttpRequest对象
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
    return xmlhttp;
}
var ajax = getXhr();
// ④onreadystatechange事件:  readyState的值每次发生变化都会触发该事件。
ajax.onreadystatechange = function(){
if (ajax.readyState==4 && ajax.status === 200){ //如果等于4的话，说明已经完全接收到返回数据，并且可以在浏览器中使用了，
//以字符串形式接收后端的返回值
alert（'ajax.responseText'）//PHP程序最终会被解析为一段字符串，responseText接收的就是这段字符串
}
}
// ②准备ajax请求
ajax.open('get','路径');
// ③发送ajax请求
ajax.send(null);

defer和async

defer并行加载js文件，会按照页面上script标签的顺序执行
async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行

闭包的三大特性:

函数嵌套函数

函数内部可以引用外部的参数和变量

参数和变量不会被垃圾回收机制回收

vue指令