vue知识点总结 vue前端面试题总结

vue总结

1. vue优点

   vue是一个轻量级框加，是国人尤玉溪开发的一款堪比国外的react的的框加，简单易懂，大小只有十几KB，结合了react以及angular的优点，vue注重的就是组件化，组建的复用，避免组件重复渲染

   优化了dom节点渲染，实现了vue中html的封装和重用，相比于react，vue大大节省了dom上的性能，同样是dom上的操作，vue注重的是数据的可变性，而react注重的是数据的不可变性，所以react要对dom渲染进行优化，就性能而言具有很大的优势相比于jQuery库，vue利用ref操作dom

   当然也可以利用原生操作dom而jQuery通过$操作dom，总之各有各的优势

2. v-if和v-show的共同点以及不同点

   v-if和v-show都是进行对元素的显示和隐藏，如果要频繁操作的话用v-show，如果让他一直显示或者隐藏的话，就用v-if，就性能而言如果频繁切换的话用v-if会造成性能上的浪费，v-if是通过控制操作dom节点的增添删除进行控制他的显示和隐藏，而v-show则不同，他是通过控制样式display:none进行显示或者隐藏的如果频繁使用的话建议用v-show

3. .如何让CSS只在当前组件中起作⽤？

   通过对style标签添加scoped进行控制局部样式，如果不进行添加的话子组件会继承父组件的样式

4. 如何获取dom?
   答：ref=“domName” ⽤法：this.$refs.domName

5. 说出⼏种vue当中的指令和它的⽤法？
   答：v-model双向数据绑定； v-for循环； v-if v-show 显示与隐藏； v-on事件；vonce: 只绑定⼀次

6. vue-loader是什么？使⽤它的⽤途有哪些？
   答：vue⽂件的⼀个加载器，将template/js/style转换成js模块。 ⽤途：js可以写 es6、style样式可以scss或less、template可以加jade等

7. 为什么使⽤key?
   答：需要使⽤key来给每个节点做⼀个唯⼀标识，Diff算法就可以正确的识别此节 点。 如果我们用循环的话就会发生dom渲染时节点会进行一个重复利用节点，在input框中输入的内容会渲染到下一页

   它就像每个人的身份证一样，一人只一张，利用key加上它可以判断的唯一表识就不会像上述的重复利用节点渲染了

8. .axios及安装，和使⽤，以及封装。

   axios安装通过cnpm install axios -S镜像安装 也可以通过npm install axios 进行安装，安装完成之后可以通过挂在到原型上去使用，也可以通过组件内局部引用axios进行使用，对axios进行封装的话

   首先创建一个http.js然后引入vue axios vant 等一些需要使用的内容 然后实例化一个axios 可以在里面设置请求头等一些内容的设置，然后进行请求拦截以及响应拦截，通常可以在请求拦截里面在数据还没有请求到的话给他设置一个Login加载图片，等请求到数据的话让他Login加载消失就可以了

   响应拦截的话就是处理一些数据过滤的等等最后抛出axios实例这样就对axios进行了一个初步的封装

   当然这个封装只是最简洁的一个封装

9. v-model的使⽤。
   答：v-model⽤于表单数据的双向绑定，其实它就是⼀个语法糖，这个背后就做了 两个操作： v-bind绑定⼀个value属性； v-on指令给当前元素绑定input事件。

10. 请说出vue.cli项⽬中src⽬录每个⽂件夹和⽂ 件的⽤法？
    答：assets⽂件夹是放静态资源；components是放组件；router是定义路由相关的 配置; app.vue是⼀个应⽤主组件；main.js是⼊⼝⽂件。 当然如果你安装vuex的话会自己创建一个store的文件夹，store这个名称的话是自己随便自行模拟的，然后里面index.js可以进行全局的储存数据

11. 分别简述computed和watch的使⽤场景
    答：computed: 　　　　当⼀个属性受多个属性影响的时候就需要⽤到computed 　　　　典型的栗⼦： 购物⻋商品结算的时候 watch: 　　　　当⼀条数据影响 多条数据的时候就需要⽤watch 　栗⼦：搜索数据

12. .v-on可以监听多个⽅法吗？
    答：可以，栗⼦：

    <input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">
    

13. $nextTick的$