Vue的基础面试题整理

一. vue的优点
　　1. 轻量级框架：只关注视图层，是一个构建数据的试图集合，大小只有十几kb;
　　2. 双向数据绑定；
　　3. 组件化： 保留了react的优点，实现了html的封装和重用，构建单数据应用方面有优势；
　　4. 试图/模型/结构分离：使数据更改更为简单；
　　5. 虚拟DOM: dom的操作是非常耗费性能的，不再使用原生的dom操作节点，极大的解放dom
操作，但是具体操作的还是dom，不过是换了另一种方式；
　　6. 运行速度更快： 相比较react而言，都是操作虚拟dom，就性能而言，vue存在很大优势；
　　7. 简单易学，国人开发，中文文档，容易理解和学习

二. vue父组件向子组件如何传数据？
　　1. 父组件通过属性的方式给子组件传值
　　　　在data里定义变量，在methods里的方法里获取数据，将数据给到data里的变量，再v-bind
　　　　的指令将父组件的data里拿到的数据绑定到子组件上

　　2. 子组件使用props接受父组件传递的属性
　　　　子组件props中接受的属性参数只需要给其定义好数据类型，然后直接在模板中使用即可！

三. 子组件向父组件如何传数据？
　　1. 子组件通过this.$emit()的自定义事件方式将值传递给父组件
　　　this.$emit('change', params) ----- 事件名 ，参数
　　2. 在父组件中注册该事件，并绑定父组件的方法接收数据
　　　在父组件上绑定change的方法，方法接收参数

四. v-show 和 v-if 的共同点和不同点
　　相同点：
　　　　v-if与v-show都可以动态控制dom元素显示隐藏
　　不同点：
　　　　1. v-if 是动态的向dom树添加或者删除dom元素，而v-show是通过dom元素的display样式
　　　　　　来控制显隐；
　　　　2. v-if是惰性的，只有在条件第一次变为了真时，才开始局部编译，编译被缓存后，然后再
　　　　　　切换的时候进行局部卸载，而v-show是无论首次条件是否是真，都被编译缓存，而且保存dom元素；
　　　　3. v-if有更高的切换消耗，v-show有更高的初始渲染消耗；
　　　　4. v-if适合运营条件不大可能改变， v-show适合频繁切换；

五. 如何让css只在当前组件中起作用, scoped的原理和作用
　　在style上加scoped属性
　　用途： 防止全局同名css污染
　　原理： 在标签上加v-data-something属性，再在选择器时加上对应的[v-data-something],即
　　　　　css带属性选择器，以此完成类似作用域的选择方式

六. 如何获取dom
     1. 使用ref属性
　　　　给相应的元素添加ref="name",然后通过this.refs.name 或者 this.refs['name']获取
　　2. 通过js原生的加id的方式
　　　　直接给相应的元素加id，然后再通过document.getElemnetById('id')获取

七. vue-loader是什么，使用它的用途？
　　作用：解析和转换.vue文件，提取出其中的逻辑代码script,样式代码style,以及html模板
　　　　template，在分别把他们交给对应的loader去处理；
　　用途：js可以写es6, styley样式可以写sass、less, template可以加在jade等
　　css-loader: 加载由vue-loader提取出来的css代码

八. 你知道vue中key的原理吗？
　　1. key的作用主要是为了提交高效的更新虚拟dom,其原理是vue在patch(补丁)的过程中通过key
　　　　可以精准的判断两个节点是否是同一个，从而频繁的更新不同元素，是整个patch的过程更加高效
　　　　减少dom操作，提高性能；
　　2. vue中使用相同的标签名的元素过渡的时候需要使用key进行区分，否则vue之后更新其内部属性
　　　　而不会触发过渡效果；

九. v-model的作用
　　1. v-model是vue的双向绑定指令，能将页面上控件输入的值同步更新到相关绑定的data属性，
　　　　也会在更新data绑定属性的时候，更新页面上控件的值；
　　2. v-model主要提供了两个功能，view层输入值影响data的属性，data属性值发生改变会更新
　　　　view层的数据变化；
　　3. v-model其实是使用v-bind和input事件监听值的变化；
　　　　其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相
　　　　关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面
　　　　输入能实时更新相关data属性值。

十. axios的安装及使用, axios 的特点
　　安装：
　　　　1. npm install axios 或者 bower install axios 或者 直接在index.js中加入：
　　　　　　< script src = "https://unpkg.com/axios/dist/axios.min.js" > < /script>
　　使用：
　　　　2. 在main.js中引入axios
　　　　　　import axios from 'axios'
　　　　3. 创建基本的axios配置
　　　　　　var $http = axios.create({})
　　　　4. 挂载到vue的原型
　　　　　　Vue.prototype.$http = $http
　　　　5. 发送请求
　　　　　　this.$http.post('/api/customer/sendMsg', param).then(function(res) {
　　　　　　　　console.log(res);
　　　　　　})
　　特点：
　　　　Axios是一个基于promise的http库，可以用在浏览器和node.js中
　　　　　　1. 从浏览器中创建XMLHttpRequests;
　　　　　　2. node.js创建http请求；
　　　　　　3. 支持promise API;
　　　　　　4. 拦截请求和响应；
　　　　　　5. 取消请求；
　　　　　　6. 自动换json数据;
　　　　　　7. axios中发送的参数是data(适用于post、put请求)和 params(适用于get请求);

十一. 分别简述watch和computed的使用场景
　　区别：
　　　　1. watch 属性监听 ----- 监听属性的变化
　　　　　computed 计算属性 ---- 通过属性计算得来的属性
　　　　2. watch中的函数时不需要调用的
　　　　    computed内部的函数调用的时候不需要加()
            3. watch 需要在属性变化时执行异步或者开销较大的操作时使用
　　　　　computed 在对任何复杂的逻辑或一个数据属性在他所依赖的属性发生变化时，也要发生变化
　　　　　时使用
　　　　4. watch 一个对象，键是需要观察的表达式，值是对应的回调函数，主要用来监听某些特定数据
　　　　　　的变化，从而进行某些具体的逻辑操作；
　　　　　computed 中的函数必须用return返回最终的结果； computed 的属性结果会被缓存，除非
　　　　　　依赖的响应式属性变化才会被重新计算， 如果所依赖的属性没有发生变化，那么调用当前的函数
　　　　　　结果会从缓存中读取；

　　场景：
　　　　1. watch 当一条数据影响多条数据的时候就要用watch ----- 搜索数据
　　　　2. computed 当一个属性受多个属性影响的时候 ----- 购物车商品结算的时候

十二.  $nextTick的原理
　　　用法：在下次dom更新循环结束之后执行延迟回调，在修改数据之后立即执行这个方法来获取
　　　　　　更新之后的dom;

十三. vue组件中的data为什么必须是一个函数
　　如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组
　　件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。
　　而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会
　　变的结果。

十四. v-on 可以监听多个方法吗？
　　可以
　　1. v-on在vue2.x中测试,以下两种均可
　　　　<button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来1</button>
　　　　<button @mouseenter="onEnter" @mouseleave="onLeave">鼠标进来2</button>
　　2. 一个事件绑定多个函数，按顺序执行，这里分隔函数可以用逗号也可以用分号
　　　　<button @click="a(),b()">点我ab</button>
　　　　<button @click="one()">点我onetwothree</button>

十五. vue的路由懒加载
　　1. 使用import
　　　　const Home = () => import('@/components/home')
　　2. vue异步组件技术 ==== 异步加载
　　　　{ path: '/home', name: 'home', component: resolve =>
　　　　require(['@/components/home'],resolve) }
　　3. webpack提供的require.ensure()
　　　　{ path: '/home', name: 'home', component: r =>
　　　　require.ensure([], () => r(require('@/components/home')),
　　　　'demo') }