VUE常见的题目

1.src和href的区别 ？

（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script、img 、iframe；

2.页面元素隐藏方式 和各自特点？

 display: none; 直接"销毁"元素在页面中的位置;,

visibility: hidden; 直接让元素不可见,但元素的物理空间位置还是存在的;

opacity: 0;元素仅仅只是透明了,位置还是存在的

zoom通过改变元素大小的方式来隐藏属性

3.用过哪些盒模型，以及他们各自的区别？

box-sizing: content-box 是W3C盒子模型

box-sizing: border-box 是IE盒子模型

区别:

        标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin

        怪异盒模型（IE盒子模型），设置的width或height是对 实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin

4.谈谈你的移动端适配方案有哪些?

流式布局        响应式布局        弹性布局

5.js 数据类型有几种？它们之间的区别是什么？

Number、String、 boolean、 Undefined、Null

区别:栈区内存由编译器自动分配释放,存放函数的参数值,局部变量的值等,其操作方式类似于数据结构中的栈。

堆区内存一般是由程序员分配释放若程序员不释放,程序结束时可能由垃圾回收机制回收。

6.数据类型强制转化和隐式转化的分别怎么使用？

强制类型转换：

parseInt()     将字符串强类型制转换为数字整数类型

parseFloat()  将字符串类型转换为浮点类型

Number()      只能将纯数字的字符转换为数字

隐式类型转换：

只做值的判断，实际隐式转换了类型，然后才进行的比较

7.let const 和 var 的区别 ？

1.var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

3.const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

8.箭头函数和普通函数的区别 ？

(1)箭头函数没有prototype(原型),所以箭头函数本省没有this

(2)箭头函数的this在定义的时候继承自外层第一个普通函数的this

(3)如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)

(4)箭头函数本身的this指向不能改变，但可以修改它要继承的对象的this。

(5)箭头函数的this指向全局，使用arguments会报未声明的错误。

(6)箭头函数的this指向普通函数时,它的argumens继承于该普通函数

(7)使用new调用箭头函数会报错，因为箭头函数没有constructor

(8)箭头函数不支持new.target

(9)箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名

(10)箭头函数相对于普通函数语法更简洁优雅

9.解释什么叫回调地狱 以及怎么解决回调地狱 ？

就是函数作为参数层层嵌套     

怎么解决：通过promise链式调用的方式

unction buildCatList(list, returnVal) {

    return new Promise(function (resolve, reject) {

        setTimeout(function (name) {

            var catList = list === '' ? name : list + ',' + name

            resolve(catList)

        }, 200, returnVal)

    })

}



buildCatList('', 'Panther').then(function (res) {

return buildCatList(res, 'Janguar')

}).then(function (res) {

return buildCatList(res, 'Lion')

}).then(function (res) {

console.log(res)

})本质上还是函数套函数

10.说明原生ajax的实现步骤？

1创建对象

2设置请求方式和请求地址

3发送请求

4监听状态变化

5返回数据

步骤:

var xhr = new XMLHttpRequest()

xhr.onreadystatechange = function(){

        if(xhr.readyState != 4)return;

        if(xhr.status == 200 && xhr.readyState == 4){

                console.log(xhr.responseText)

        }else{

                console.log("请求失败")

        }

}

xhr.open("get","http://localhost:3030")

xhr.send()

11.什么情况下会导致跨域？

不同源策略时会导致跨域

12.vue 有几个生命周期 以及各个生命周期的调用时机 ？

有8个：

beforeCreate创建前    created创建后    

befoerMount 载入前   mounted载入后  

beforeUpdate更新前   updated更新后       

beforeDestroy销毁前   destroyed销毁后

13. 使用vue中的v-for时,为什么要绑定 :key?  如果不绑定会有什么效果？

        因为虚拟dom有一个diff算法,key是唯一的,不会让数据产生混乱,可以高效更新的虚拟dom

        (1)如果不绑定:key，则每删除数组中一个元素，v-for都会先删除所有元素副本，再重新建整个列表——修改效率低。绑定:key是给每个元素副本添加一个唯一的标识，在删除数组元素时，可根据唯一标识找到对应的一个元素对象，删除即可，其它元素不受影响——修改效率高。

        (2)Vue的v-for不绑定key，默认行为和绑定key="index"是差不多的，官方没有默认这种行为的情况下，会导致所有列表DOM重新渲染。key="index"这种行为无法最大化性能，比如在第一个元素插入新元素，会导致所有列表DOM重新渲染。绑定key后，发现绑定的key值的元素变化了，就重新渲染该元素，而不是全部元素都重新渲染，会提高性能。性能主要是DOM渲染影响。key绑定id一类的唯一键好处就是。
在列表中插入某个元素，不会像index那样导致后面的元素全部重新渲染，而是根据绑定id的元素是否变化渲染。        

14.v-show 和 v-if 的作用和区别, v-bind 和 v-model的作用和区别？

v-show切换元素的didplay属性，来控制元素显示隐藏初始化会渲染，适用于频繁切换显示隐藏元素，不能在上使用。

v-if通过销毁并且重建组件来控制组件显示隐藏，初始化不会渲染，不适用于频繁切换显示隐藏的组件，能在上使用。

v-bind:绑定节点属性

v-model:双向绑定

1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"。

2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id  === :id  

3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

15.vue 组件通信如何实现，至少列举3种方式并说明各自的局限性？

父组件向子组件通信

子组件通过props属性,绑定父组件数据,实现双方通信

子组件向父组件通信

将父组件的事件在子组件中通过$emit触

非父子组件、兄弟组件之间的数据传递

/*新建一个vue实例作为中央事件总嫌*/

let event = new Vue();

/*监听事件*/

event.$on('eventName',(val) => {

        //......do something

});

/*触发事件*/

event.$emit('eventName', 'this is a message.')

16.详细说明vue组件中 data ，computed 和 watch的区别？

data:Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。

Computed：是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算。

Watch： 是调用一次执行一次 如果监听数据变化都会执行回调。

17.keep-alive的作用是什么？ 使用它的目的是什么？

作用:是一个内置组件。

目的:可以使被包含的组件保留状态  避免重新渲染。

18.vue-router的作用是什么？ 为什么不使用a标签？

作用:

1.根据url锚点路径,在容器中加载不同的模块,本质作用是页面导航。

2.完成SPA(Singal Page Application)的开发

        (1)一种特殊的Web应用。它将所以的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML,JavaScript,CSS。

        (2)一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用JavaScript的动态的变换HTML(采用的是div切换显示和隐藏),从实现UI与用户的交互。

不使用a标签:至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，你必须使用vue-router来进行管理。

19.vuex 是什么？ 怎么使用？为什么用使用它？

Vuex是什么: VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

使用:1.首先需要安装vuex

2.然后src新建一个store文件夹中新建一个js文件,就是为了更好的管理项目

3.然后再index设置一些公用值和方法,引入vue和vuex

        (1)使用 vue/react 等框架，需要关注点基本就是数据，因为框架解决了数据和页面更新的实现。页面和数据的关系是y=f(x)

        (2)那么我们需要关注数据(model) 和 视图(组件) 之间的关系.

 为什么使用:Vuex 可以帮助我们管理共享状态，同时也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
        如果不打算开发大型单页应用，使用 Vuex 可能是繁琐多余的。如果应用够简单，最好不要使用 Vuex。一个简单的event bus 就足够您所需了。但是，如果需要构建是一个中大型单页应用，你很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

20.请谈一下你对 使用原生js开发和 使用vue开发的看法。(至少20字以上)

1.数据的自动绑定
2.页面参数传递和页面状态管理。
3.模块化开发、无刷新保留场景参数更新
4.代码的可阅读性（模块化开发带来的）
5.基于强大的nodejs，拥有npm包管理器，可以很好滴管理包的版本
6.各子组件样式不冲突
7.视图,数据,结构分离
8.虚拟dom
9.各种指令;过滤器

vue缺点
vue是单页面页面，对于搜索引擎不友好，影响seo。比如两个vue路由（页面），它的路径是这样的：index.html#aaa 和 index.html#bbb，但对于搜索引擎来说，都是同一个页面，就是index.html。这样搜索引擎就无法收录你的页面。

注:转载。