Vue面试题（二）

1、vue优点
 轻量级框架，简单易学，双向数据绑定，组件化，视图、数据、结构分离，虚拟DOM操作，运行速度快。
2、vue父组件向子组件传递数据：props
3、子组件向父组件传递事件：$emit方法
4、v-show和v-if 指令的共同点和不同点
共同点：都能控制元素的显示和隐藏
不同点：v-show通过css的display:none控制隐藏，只编译一次；
v-if是动态向DOM树添加或删除DOM元素，若初始值为false，就不会编译。
v-if不断销毁和创建比较耗性能。
5、如何让CSS只在当前组件中有效
在组件的style前加上scoped
6、<keep-alive></keep-alive>作用
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
7、如何获取dom
ref="domName",this.$refs.domName
8、 vue中的指令及其用法
v-model双向数据绑定
v-for循环
v-if/v-show显示与隐藏
v-on事件
v-once只绑定一次
9、vue-loader是什么，使用它的用途有哪些
vue文件的一个加载器，将template/style/js 转换为js模块

用途：js可以写ES6，style样式可以Sass或less，template可以加jade
10、Key的作用
需要使用key来给每个节点做个唯一标识，Diff算法可以正确的识别此节点，作用是为了高效更新虚拟DOM
11、axios安装及使用
axios:请求后台资源的第三方模块
npm install axios --save 安装
JS使用import引进来
然后.get / .post请求数据，
返回在.then函数为成功，在.catch函数为失败
12、v-model的使用
v-model用于表单数据的双向绑定，他是一个语法糖，其背后做了2个操作：
v-bind绑定一个value属性；v-on指令给当前元素绑定input事件
13、请说出vue.cli项目中的src目录下每个文件夹和文件的用法
/assets文件夹放静态资源
/components是放组件
/router是定义路由相关的配置
/app.vue是一个应用主组件
/main.js是入口文件
14、computed和watch的使用场景
当一个属性受多个属性影响时需要用到computed,购物车商品结算时
当一条数据影响多条数据时使用watch,例如搜索数据
15、v-on可以监听多个方法吗
可以
<input type="text" v-on="{input:onInput,focus:onFocus,blur:onBlur,}"/>
16、$nextTick使用
当你修改data的值然后马上获取这个DOM元素的值，是不能获取到更新后的值，需要使用$nextTick这个回调，让修改后的data值更新渲染到dom元素之后再获取，才能成功
17、vue组件中data必须是函数
组件中的data写成函数，数据以函数返回值的形式定义，这样每次复用组件时，都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间，他们只负责各自维护的数据，不会造成混乱。
18、渐进式框架的理解
可以根据不同的需求选择不同的层级
19、vue双向数据绑定如何实现
vue双向数据绑定是通过数据劫持结合发布订阅者模式的方式来实现的，就是说数据和视图同步，数据发生变化，试图跟着变化;视图变化，数据也随之变化；核心是Object.defineProperty()方法
20、单页面应用和多页面应用区别及优缺点
单页面应用，指的是只有一个主页面的应用，浏览器一开始要加载所有必须的html,js,css.所有的页面内容都包含在这张主页面上，在写的时候，还会分开写 （页面片段），然后在交互时，由路由程序动态载入，单页面的页面跳转  金刷新局部资源。多用于PC端。
多页面，指的是一个应用中有多个页面，页面跳转时是整页刷新。
单页面优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点，SPA对服务器压力较小，前后端分离；页面效果炫酷（比如切换页面内容时的专场动画）
当页面缺点：
不利于SEO；导航不可用；如果一定要导航需要自行实现前进后退，初次加载耗时多，页面复杂度提高很多。
21、v-if和v-for优先级
v-if 和v-for一起使用时，v-for比v-if有更高优先级，这意味着 v-if将分别重复运行于每个v-for循环中。所以不推荐他们一起使用。如果一起用时，vue会提示v-if应放到外层去
22、assets和static区别
相同点：Assets和static都是存放静态资源文件；项目中所需要的资源文件图片，字体图标，样式文件都可以放在这2个文件夹。
不同点：assets中存放的静态文件都在项目打包时，会压缩体积，代码格式化，压缩后的静态资源文件会放置在static文件中跟着index.html一同上传到服务器。
static中的静态资源文件不会走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传服务器。
建议：将项目中template需要的样式文件，js文件等都放在assets中，走打包流程，减少体积。而项目中引进的第三方资源文件如iconfoont.css等文件则放在static中，因为这些第三方文件已经进行过处理，我们不需要二次处理，直接上传。

23、vue常用的修饰符：
.stop:防止事件冒泡
.prevent:防止执行预设的行为
.capture:与事件冒泡的方向相反，事件捕获由外到内
.self：只触发自己范围内的事件，不包含子元素
.once:只会触发一次
24、vue的2个核心点
数据驱动：viewmodel保证数据和视图的一致性
组件系统：应用类UI可以看做全部是由组件树构成的
25、vue和jQuery的区别

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM，而数据和界面实在一起的。
Vue是通过vue对象将数据和View完全分离开来，对数据进行操作不需要引用相应的dom 对象，数据和view是分离的，他们通过Vue对象的vm实现相互的绑定；这就是MVVM
 

26、引进组件的步骤：
在Template中引入组件；在Script的第一行用import引进路径；用component中写上组件名称
27、delete和vue.delete删除数组的区别
delete只是被删除的元素变成了empty/undefined其他元素的键值不变；Vue.delete直接删除了数组，改变了数组的键值。
28、SPA首屏加载慢解决
安装动态懒加载所需插件；使用CDN资源
29、Vue-router跳转和location.href有什么区别
使用location.href=/url来跳转，简单方便，但是刷新了页面；
使用router.push(/url)来跳转，使用了diff算法，实现了按需加载，减少了DOM的消耗。
vue-router在history模式下用了history.pushState(/url)无刷新页面，静态跳转。
30、vue slot
父组件需要在子组件内放一些DOM，那这个DOM是显示不显示，在哪显示，如何显示，是slot分发负责的活