vue

1.mvvm 框架是什么？

前端页面中使用MVVM的思想，即MVVM/是整个视图层view的概念，属于视图层的概念。
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
模型指的是后端传递的数据。
视图指的是所看到的页面。
视图模型是mvvm模式的核心，它是连接view和model的桥梁。
它有两个数据传递方向：
一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
以上两个方向都实现的，我们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
实现了前后端分离

2.vue的优点是什么？（为什么大部分公司选择vue）

体积小：压缩后只有33k；
更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；
生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；

3.vue的两个核心点是什么？

1.数据驱动

Vue 响应式核心就是，getter 的时候会收集依赖，setter 的时候会触发依赖更新
vue将遍历data中对象的所有property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。
getter 的时候我们会收集依赖，依赖收集就是订阅数据变化watcher的收集，依赖收集的目的是当响应式数据发生变化时，能够通知相应的订阅者去处理相关的逻辑。
setter 的时候会触发依赖更新，之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

2.组件系统

组件的核心选项
1 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
2 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
3 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。
4 方法（methods）：对数据的改动操作一般都在组件的方法内进行。
5 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。
6 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用

4.三大框架的优缺点？（vue、Angular、React）

Angular:
优点：
2012年发布版本1.0，后由谷歌接手负责持续的开发维护。Angular是一个比较完善的前端框架，服务、模板、数据双向绑定、模块化、路由、过滤器、依赖注入等功能相当完整，同时模板功能强大，自带丰富的指令，易于操作。此外还引入了一些java的思想，所以有java基础的同学也能够较快上手的。
缺点：
官方文档可操作性不强，缺乏实例，很多功能的使用需要依赖搜索，对自学能力要求较高。入门容易，但是后期学习容易进入瓶颈，概念深入，不易理解。此外版本较多，没有做到很好的兼容，整体较重，渲染初始化慢。
React
优点：
是Facebook的内部项目开源，提出了一种新思路解决Web/Native开发。运用了Virtual Dom技术，比起Angularjs来说，更新dom的次数少，更新内容少，速度会更快。采用声明式设计，可以轻松描述应用，更加灵活，也能和已知的框架或库很好的配合。
缺点：
严格来说可能并不算是一个完整的框架，很多功能无法直接实现，发布较新，很多功能还需要进一步的完善，缺少大项目的实际应用。
Vue
优点：
轻量级！也简单易上手，官方介绍是构建用户界面的渐进式框架，可以灵活选取功能。简洁、轻量、快速、数据驱动、模块友好、组件化，这些特点都有利于更简单的开发页面，同时乘着近些年小程序的热潮，webapp的持续发展，Vue也是广泛使用。
缺点：
相对于家大业大的angular，历史不久的Vue，部分功能还不够完善，支持的库和拓展的丰富性还有待提升，同时对于老浏览器的支持也不太好。数据复杂起来也容易变得不好维护。

5.vue和jQuery的区别？

一、主体不同
1、vue.js：是一套用于du构建用户界zhi面的渐进式JavaScript框架。dao
2、jquery：是一个快速、简洁的JavaScript框架，zhuan是继Prototype之后又一个优shu秀的JavaScript代码库。
二、特点不同
1、vue.js：Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
2、jquery：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
三、优势不同
1、vue.js：目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2、jquery：提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

6.渐进式框架的理解？

主张最少，也就是弱主张，他是在vue核心库（视图模板引擎）的基础上，去逐步添加所需要功能（如，组件系统、路由、状态机等）
vue“渐进式”：是指先使用vue核心库，在vue核心库的基础上，根据自己需要再去逐渐增加功能。
Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。
在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。
更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。
所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念。

7.单页面应用和多页面应用区别及优缺点？

单页面应用
一个项目中只有一个完整的html页面，其他的都是部分的html片段组成。页面跳转只是局部刷新，不会重新加载全部资源。片段之间的切换快，比较容易实现转场动画。
多页面应用
一个项目是由多个完整的html页面组成，页面跳转所有的资源都要重新加载，页面之间的切换会出现卡顿空白的问题，不容易实现切换动画等

image.png

8.SPA首屏加载慢如何解决？

1.通过Gzip压缩
2.使用路由懒加载
3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去，减小项目打包后的大小
4.使用SSR渲染（服务器渲染）
5.将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；
6.在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；
7.加一个首屏loading图，提升用户体验；

9.scss的安装以及使用？

1.npm来安装 Sass

npm install \-g cnpm \--registry\=https://registry.npm.taobao.org
cnpm install -g sass

2.使用
2.1 首先要建立2个文件夹，文件夹名称可以随便起，再启动以下命令监听。

sass --watch sass:css  //（sass:css为文件夹名称，可以自设定）

2.2 在.scss 文档写入内容，另外一个css文件夹就会自动出现一个css的文档，在写代码时命令窗口不能关闭，负责无法执行css文档代码。

10.vue常用的UI组件库？

PC端:Element UI,iView,Muse-U，Ant Design Vue，AT-UI
移动端：Vant，Mint UI，Vux（微信），Mand Mobile

11.vue构建初始化工程步骤？

搭建Vue项目步骤如下：
①、打开cmd,cd到项目存放路径如：

cd C:\Users\lenovo\Desktop\bus_total

②、全局安装 vue-cli，cmd里输入命令行：

npm install -g vue-cli

③、创建一个基于 webpack 模板的新项目，在项目所在文件夹下，先进行初始化，即当前目录输入：

vue init webpack

根据提示，进行YES/NO，即安装是否安装配置路由之类的。

?Generate project in current directory? Yes
? Project name bus_total
? Project description A Vue.js project
? Author 王利平 <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

④、新建目录：vue init webpack my-project。（该步骤与第3步骤一样，选一即可）
⑤、安装依赖，进入项目所在文件夹，即当前文件夹、输入：

npm install

⑥、启动项目

npm run dev

⑦在浏览器中输入：

http://localhost:8080/

能看到：Welcome to Your Vue.js App页面则表示成功。

1.Vue中双向数据绑定是如何实现的？

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。我们先来看Object.defineProperty()这个方法：

var obj  = {};
Object.defineProperty(obj, 'name', {
        get: function() {
            console.log('我被获取了')
            return val;
        },
        set: function (newVal) {
            console.log('我被设置了')
        }
})
obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
var val = obj.name;//在得到obj的name属性，会触发get方法

首先我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上都会，接着为input会添加监听事件，修改值就会为该属性赋值，触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。

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

assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;view视图；
app.vue是一个应用主组件；
main.js是入口文件

3.package.json 里面的配置解释？

默认的package.json文件直接使用命令：npm init --yes生成

{
"name": "pingdingshan", //包名字
"version": "1.0.0", //包版本，x.x.x的格式，符合语义化版本规则
"description": "", //一些描述信息
"main": "index.js",  //入口文件，一般是index.js
"module": "./es/index",  //es6编译入口文件
"scripts": {   //指定了运行脚本命令的npm命令行缩写，默认是空的test
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": "http://.../h5-components.git",   //项目代码存放的地方
"homepage": "http://...",   //项目主页url，（包的官网）
"author": "",  //作者信息
"license": "ISC",   //许可证，默认是ISC、有的默认是MIT
"files": [   //包含在项目中的文件(夹)数组，可以声明一个.gitignore来忽略部分文件
"lib",
"es",
"dist",
"assets"
],
"config": {  //字段用于添加命令行的环境变量。
"port": 8089,
"entry": {
"h5-components": [
"./index.js"
]
}
},
"dependencies": {   //在生产环境中需要用到的依赖
"antd-mobile": "^2.2.0",
"classnames": "^2.2.1",
"exif-js": "^2.3.0"
},
"devDependencies": {   //在开发、测试环境中用到的依赖
"file-loader": "^1.1.5",
"less-loader": "^4.1.0",
"lodash": "^4.17.4",
"lodash-webpack-plugin": "^0.11.4",
"mini-css-extract-plugin": "^0.4.1"
},
"sideEffects": [   //如果没有这个值，打包时会出错，参照css issue
"*.scss"
],
"browserslist": [   //指定该模板供浏览器使用的版本
"iOS >= 8",
"Firefox >= 20",
"Android > 4.2",
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}

npm run 可列出package.json中scripts的所有脚本命令
npm run test就会执行：echo “Error: no test specified” && exit 1

3.assets和static的区别？

assets和static两个都是用于存放静态资源文件。
放在static中的文件不会进行构建编译处理，也就不会压缩体积，在打包时效率会更高，但体积更大在服务器中就会占据更大的空间
放在assets中的文件会进行压缩体积、代码格式化，压缩后会放置在static中一同上传服务器。
因此建议样式文件放在assets中进行打包，引入的第三方文件放到static中，因为引入的文件已经做过打包处理

4.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

5.$nextTick的使用？

this. $nextTick()方法主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$ nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就会被大量使用，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。

new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    msg1: '',
    msg2: '',
    msg3: ''
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML
      })
      this.msg3 = this.$refs.msgDiv.innerHTML
    }
  }
})

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

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

7.v-on可以监听多个方法吗？

v-on可以监听多个方法

8.为什么使用key？

key在vue中，有跟它意思一样的关键的作用，整个框架对数据的渲染方面，起到了至关重要的作用
当更新数据的过程中，如果没有key的存在，系统会自动默认更新数据之间所要区分的key值为undefined，根据undefined＝＝undefined，所以数据更新时会忽略特殊比对值的情况下自动按照对比为true的情况去更新渲染数据
特别是中途插入删除数据的过程中，会因为中间某条数据的缺少而进行从从数据更新点之后的所有数据的重新更新以及多出数据的重新创建，这跟vue框架的本质原则相违背。
添加key这个唯一标识后，vue中patch算法会按照前后对比的原则，收尾找相同节点，将数据一一比对，相同的节点就会只做循环，不会发生任何更新，减少多余更新渲染，最后只将更改后的数据渲染到框架中。（sameVnode方法来判断节点是否相同）

9.vue初始化页面闪动问题？

根dom上加上 style=“display: none;” :style="{display: ‘block’}"

10.vue禁止弹窗后的屏幕滚动？

methods : {
   //禁止滚动
   stop(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
    },
    /***取消滑动限制***/
    move(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
    }
}

11.vue如何引进本地背景图片？

第一种，只引入单个图片，这种引入方法在异步中引入则会报错。比如需要遍历出很多图片展示时

第二种，可引入多个图片，也可引入单个图片。 vuelic3版本没有static文件夹。可将静态图片存放到public目录下，直接引入即可

12.vue修改打包后静态资源路径的修改？

1、js，css路径不对
解决办法：打开config/index.js，将其中的assetsPublicPath值改为’./’

image.png

2、css中引用的图片资源找不到
我的login.vue文件中有一段css，其中引用了一个背景图片，是这样写的
1.login{height:100%;background: url("../assets/login_bg.jpg") no-repeat; background-size: cover;color: white;}
“src/assets/”文件夹下有这张图片，打包后路径发生变化这个图片就找不到了，stackflow上有一个解决办法，很简单
打开“build/utils.js”，增加一行代码即可

image.png

13.vue的属性名称与method的方法名称一样时会发生什么问题？

报错 "Method 'xxx' has already been defined as a data property"
vue会把methods和data的东西，全部代理到vue生成对象中。
会产生覆盖所以最好不要同名
键名优先级：props > data > methods

14.你有使用过babel-polyfill模块吗？主要是用来做什么的？

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。 Babel默认不转码的API非常多，详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件
在低版本浏览器里不能正常显示

15.vue为什么要求组件模板只能有一个根元素？

Vue其实并不知道哪一个才是我们的入口，因为对于一个入口来讲，这个入口就是一个Vue类，Vue需要把这个入口里面的所有东西拿来渲染，处理，最后再重新插入到dom中。如果同时设置了多个入口，那么vue就不知道哪一个才是这个‘类’。
通过这个‘根节点’，来递归遍历整个vue‘树’下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置。那么这个入口，就是这个树的‘根’，各个子元素，子组件，就是这个树的‘枝叶’，而自然而然地，这棵‘树’，就是指一个vue实例了

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

相同点：v-show和v-if都能控制元素的显示和隐藏。
不同点：
实现本质方法不同
v-show本质就是通过设置css中的display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show都会编译，初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，就不会编译了
性能
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
注意点：因为v-show实际是操作display:" "或者none，当css本身有display：none时，v-show无法让显示

17.的作用是什么?

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载
包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染
比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染
常用的两个属性include/exclude，允许组件有条件的进行缓存
两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态

18.如何获取dom？

根据ID获取
使用getElementById()方法可以获取带有ID的元素对象
根据标签名获取
使用getElementsByTagName()方法获取元素的标签
通过HTML5新增的方法获取
使用getElementsByClassName()方法获取元素
使用document.querySelector()选择器返回任意元素的第一个元素的对象
使用querySelectorAll()返回指定选择器的所有元素对象集合
特殊元素获取

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

1、v-if：判断是否隐藏
2、v-for：数据循环
3、v-bind:class：绑定一个属性
4、v-model:实现数据双向绑定
这里重点说明一个v-if和v-show的区别：
共同点：都是通过判断绑定数据的true/false来展示的
不同点：v-if只有在判断为true的时候才会对数据进行渲染，如果为false代码删除。除非再次进行数据渲染，v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
v-show是无论判断是什么都会先对数据进行渲染，只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下，改变数据的值可以使数据展示或隐藏

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

vue-loader是解析 .vue 文件的一个加载器，跟 template/js/style转换成 js 模块；
用途：js可以写es6、style样式可以scss或less；template可以加jade等；

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

当前组件

最新面试题目vue

vue

1.mvvm 框架是什么？

2.vue的优点是什么？（为什么大部分公司选择vue）

3.vue的两个核心点是什么？

1.数据驱动

2.组件系统

4.三大框架的优缺点？（vue、Angular、React）

5.vue和jQuery的区别？

6.渐进式框架的理解？

7.单页面应用和多页面应用区别及优缺点？

8.SPA首屏加载慢如何解决？

9.scss的安装以及使用？

10.vue常用的UI组件库？

11.vue构建初始化工程步骤？

1.Vue中双向数据绑定是如何实现的？

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

3.package.json 里面的配置解释？

3.assets和static的区别？

4.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

5.$nextTick的使用？

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

7.v-on可以监听多个方法吗？

8.为什么使用key？

9.vue初始化页面闪动问题？

10.vue禁止弹窗后的屏幕滚动？

11.vue如何引进本地背景图片？

12.vue修改打包后静态资源路径的修改？

13.vue的属性名称与method的方法名称一样时会发生什么问题？

14.你有使用过babel-polyfill模块吗？主要是用来做什么的？

15.vue为什么要求组件模板只能有一个根元素？

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

17.的作用是什么?

18.如何获取dom？

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

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

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