vue常见面试题
1.vue优点
1. 轻量化
使用 Vue.js 来开发生产应用或个人项目的一个显著优势是它是一个相对轻量化的框架/库。让我们看看不同前端框架/库的下载空间
2. 低复杂性
在使用 React 构建许多应用之后，一旦在混合代码库中添加状态管理，随着应用程序变大，代码库通常会变得非常复杂。我注意到 React 应用变得复杂的原因之一是 JSX 模板、 lifecycle（生命周期）方法和其他方法都存在于同一个对象中。这常常使理解逻辑流程变得非常困难，而Vue呢 :
3. Virtual DOM（虚拟 DOM）
就像 React 一样，Vue.js 实现了使用虚拟 DOM 来操作/渲染视图。通过使用虚拟 DOM，用户界面将通过在每次需要更改时不渲染真实的 DOM，而只是呈现虚拟 DOM 和真实 DOM 之间的部分差异，进而获得更好的性能。
4. 低学习曲线（对初学者友好）
从事 Web 开发的人都会学习以下三种基础技术：HTML、CSS 和 JavaScript。想象一下一个初学者必须学习一个叫做 JSX 的新东西，而不是 HTML。虽然 JSX 看起来类似于 HTML，但确实有很多不同之处将 JSX 与 HTML 区分开来，而这种学习就不是 Vue.js 所必需的。
如上面所示，Vue.js 使用与 HTML 相同的标记名，这使得将知识从 HTML 传输到 Vue.js 更加容易。此外，代码的模块化结构有助于理解 Vue.js 组件的不同动作部分。
对于那些熟悉 React 的人来说，学习 Vue.js 是小菜一碟，因为两者之间有很多相似之处。
2.vue父组件向子组件传递数据？
方式一
父传子主要通过在父组件v-model绑定数据，在子组件进行用props进行数据的接收
<Child :msg="data"></Child>
方式二
父组件触发子组件的方法，主要通过$refs来触发，同时传参
//触发子组件方法，并传参this.$refs.mychild.init("chrchr","120");
3.子组件像父组件传递事件
通过$emit触发事件
在子组件<x-test>中触发事件：
<button @click="toSearchProduct()">搜索</button>
export default {
methods: {
show: function () {
console.log(this.name)
},
toSearchProduct: function () {
this.$emit('parentEvent','哈哈啊哈哈')
}
}
}
父组件：
<x-test :name="username" @parentEvent="toClick"></x-test>
export default {
components: {
XTest
},
methods: {
toClick: function (msg){
console.log(msg) // 当子组件触发按钮时，msg获取值为 哈哈啊哈哈
}
}
}
</script>
4.v-show和v-if指令的共同点和不同点
1.共同点：都能控制元素的显示和隐藏。
2.不同点：实现本质⽅法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。
3.总结：如果要频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）。
5.如何让CSS只在当前组件中起作用
当前组件<style>写成<style scoped>
6....
7.如何获取dom
方法一：
直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式
方法二：
使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
8.说出几种vue当中的指令和它的用法？
v-bind: 绑定数据
v-model: 能够实现表单元素值的双向绑定
v-on: 用于事件的绑定
v-if,v-else-if,v-else: 有条件的渲染某些内容
v-for指令:队列表数据的渲染很常用
v-show指令:行所在标签的显示与隐藏
9.vue-loader是什么？使用它的用途有哪些？
10.为什么使用key
使用 v-for 更新已渲染的元素列表时，默认用 就地复用 策略。列表数据修改的时候，vue 会根据 key 去判断某个值是否修改 —— 如果修改，则重新渲染这一项，否则复用之前的元素。在 v-for 中使用 key 是一个最佳实践，但是我们需要注意使用的是什么 key 。
如果是使用 index 作为 key ：
在末尾插入 F 的话没有问题，因为这个时候不影响前面元素的 index，每个元素的 index 不变，而 vue 可以依据这些 index 对元素进行复用；但是现在是在中间插入 F，一旦插入成功，那么 CDE 的 index 都会改变，这时候 CDE 都需要重新渲染一次。而 AB 的 index 是不变的，所以 AB 可以得到复用。
如果是使用 id 作为 key ：
这里就要注意了，这个 id 是唯一的，也是固定不变的（也可以采用元素本身的值作为这个唯一的 id），不管插入还是删除，元素该是哪个 id 还是哪个 id ，这意味着以这样的 id 作为key 时，所有旧元素都可以得到复用。所以这种情况下，我们只需要渲染新插入的 F 元素即可。
总结：vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM
11.axios及安装
axios的基本概念及安装配置方法
ajax:异步请求，是一种无需再重新加载整个网页的情况下，能够更新部分网页的技术
axios:用于浏览器和node.js的基于promise的HTTP客户端
1.从浏览器制作XMLHttpRequests
2.让HTTP从node.js的请求
3.支持promise api
4.拦截请求和响应
5.转换请求和响应数据
6.取消请求
7.自动转换成json数据
8.客户端支持防止xsrf
axios的安装：
cmd命令行进入到vue项目下，执行npm install axios 然后执行提示npm install --save axios vue-axios
配置方法：
打开vue的编辑器，找到当前项目的main.js文件，输入：
import axios from 'axios'
Vue.prototype.axios = axios
12.axios解决跨域
在config下的index.js里输入：
proxyTable: {
'/api': { //使用"/api"来代替"http://f.apiplus.c"
target: 'http://127.0.0.1:5000/', //源地址
changeOrigin: true, //改变源 ,允许跨域
pathRewrite: {
'^/api': '' //路径重写
}
}
13.v-modal的使用
v-model 主要是用于表单上数据的双向绑定
1:主要用于 input，select，textarea，component
2:修饰符：
.lazy- 取代input监听change事件
.number- 输入字符串转为数字
.trim- 输入首尾空格过滤
14.scss的安装以及使用
安装sass 依赖包 ，在cmd界面输入：
npm install sass-loader --save-dev
npm install node-sass --sava-dev
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']}
使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错
15.请说出vue.cli项目中src目录每个文件夹和文件的用法？
vue-cli 项目中src目录每个文件夹和文件的用法
assets 文件夹是放静态资源
components 是放组件
router 是定义路由相关的配置
view 视图
app.vue 是一个应用主组件
main.js 是入口文件
webpack目录：
├─build // 保存一些webpack的初始化配置,项目构建│
├─build.js // 生产环境构建│
├─check-version.js // 检查npm、node版本│
├─vue-loader.conf.js // webpack loader配置│
├─webpack.base.conf.js// webpack基础配置│
├─webpack.dev.conf.js // 开发环境配置，构建本地开发服务器│
├─webpack.prod.conf.js// 生产环境的配置│
├─config // config文件夹保存一些项目初始化的配置│
├─dev.env.js // 开发环境的配置│
├─index.js // 项目一些配置变量│
├─prod.env.js // 生产环境的配置│
├─dist // 打包后的项目
├─node_modules // 依赖包│
├─src // 源码目录│
├─assets // 静态文件目录│
├─components // 组件文件│
├─router // 路由│
├─App.vue // 是项目入口文件│
├─main.js // 是项目的核心文件，入口
├─static // 静态资源目录
├─.babelrc // Babel的配置文件
├─.editorconfig // 代码规范配置文件
├─.gitignore // git忽略配置文件
├─.postcssrc.js // postcss插件配置文件
├─index.html // 页面入口文件
├─package-lock.json // 项目包管控文件
├─package.json // 项目配置
└─README.md // 项目说明书
16.分别简述computed和watch的使用场景
特点和区别：
vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步.
这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分.
computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景.
watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行.
计算属性
抽象的概念不容易理解,用多了高频的场景自然就熟悉了,计算属性表现为同步处理数据.
金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑computed.
不需要关注点击事件或者其他数据,只要将计算规则写在属性里,就能实时获取对应的数据.
电商领域的购物车统计,一个数据依赖于一个或者多个数据.
当购物车数量和产品变化时,自动计算出价格*数量的总和.
如果有优惠券或者折扣,自动减去优惠和计算折扣金额即可,同上实时计算.
只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.
侦听器
watch侦听器能做到的计算属性computed也能做到,什么时候适合用侦听器呢?
主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事物.
如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度.
可以看到,数据的变化为触发弹框提示,有且仅在一定金额条件下才触发,而不是实时触发.
总结：弹框提示等事件交互的,适用于watch,数据计算和字符处理的适用于computed
17.v-on可以监听多个方法吗
<input type="text" v-on="{ input:onInput, focus:onFocus, blur:onBlur, }">
18.$nextTick的使用
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中；
