Vue 面试题

1、Vue父组件向子组件传递数据?

  答:props传参   

  父组件

  <child :list="list"></child> //在这里绑定list对象

  子组件

  child.vue <template> <ul> <li v-for="(item ,index)in list">{{item}}</li> </ul> </template> export default{ props:{
    list:{
      type:Array,//type为Array,default为函数
      default(){
        return [
          "hahaxixihehe"//默认初始值
        ]}}
    },//用props属性进行传数据,此时子组件已经获取到list的数据了 data(){ return {} } }

2、子组件向父组件传递事件?

  答:

  this.$emit('clickHeadAction',this.titleRight);
  this.$parent.fatherMethod();
3、v-show和v-if指令的共同点和不同点?
  答:
  共同点:
  v-if和v-show都是通过判断绑定数据的truefalse来展示的
  不同点:
  v-if只有在判断为true的时候才会对数据进行渲染,false的时候把包含的代码进行删除。除非再次进行数据渲染,v-if才会重新判断。可以说是用法  比较倾向于对数据一次操作。
  v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下,改变数据的  值可以使数据展示或隐藏。
4、如何获取dom?
  答:
  vue中操作dom需要谨慎,尤其是添加或删除dom的时候,特别是mounted()和created()的时候,此时dom对象还没有生成,要放在this.nextTick()的回  调函数中。
5、说出几种vue当中的指令和他的用法?
   答:
  1.v-model双向数据绑定
  2.v-for循环
    3.v-show 显示与隐藏
  4.v-on事件
6、vue-loader是什么?使用它的用途有哪些?
   答:
  简单的说,他就是基于webpack的一个的loader,解析和转换 .vue 文件,提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版      template,再分别把它们交给对应的 Loader 去处理,核心的作用,就是提取,划重点。
  用途:js可以写es6、style样式可以scss或less、template可以加jade等
7、为什么使用key?
   答:
  准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug.
  快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1).
8、axios及安装?
  简介:
  用于浏览器和node.js的基于promise的HTTP客户端
  1.从浏览器制作XMLHttpRequests
  2.让HTTP从node.js的请求
  3.支持promise api
  4.拦截请求和响应
  5.转换请求和响应数据
  6.取消请求
  7.自动转换成json数据
  8.客户端支持防止xsrf
  安装:
  cmd命令行进入到vue项目下,执行npm install axios 然后执行提示npm install --save axios vue-axios
9、v-model 的使用?
  答:  
  <input type="text" v-model="mes">  此时mes值就与input的值进行双向绑定
10、分别computed he watch的使用场景?
  答:
  1.watch擅长处理的场景:一个数据影响多个数据
  2.computed擅长处理的场景:一个数据受多个数据影响
11、v-on可以监听多个方法吗?
  答:
  可以;v-on:="a(),b(),c()"
12、Vue$nexttick的使用?
  答:
  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
  this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
13、Vue中的双向数据绑定是如何实现的?
  答:vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,那么vue是如果进行数据劫持的,我们可以先来看一下通过控制台    输出一个定义在vue初始化数据上的对象是个什么东西。
14、单页面应用和多页面的应用区别及优缺点?
  答:
  单页面简称(SPA):
  原理:利用js感知到url的变化,可以通过js动态的将当前的页面内容清除掉,接着将下一个页面的内容挂载到当前的页面上,页面每次切换跳转时,并不需  要做html请求,这样就节省了很多http发送延迟,切换速度更快.
  优点:加载速度快,内容的改变不需要重新加载整个页面,对服务器压力小,前后端分离,视觉效果好
  缺点:页面初次加载比较慢,页面复杂提高很多

  多页面:
  一个应用多个页面,页面跳转时整个页面都刷新,每次都请求一个新的页面
  有点:SEO效果好
  缺点:页面切换慢,每次切换页面需要选择性的重新加载公共资源
15、v-if和v-for的优先级?
  答:
  v-for 比 v-if 具有更高的优先级!
16、assets和static的区别?
  答:
  assests放置的是组件的资源,static放置的是非组件的资源。
17、Vue常用的修饰符?
  1.v-model双向数据绑定修饰符
  2.v-for循环修饰符
    3.v-show 显示与隐藏
  4.v-on事件修饰符
18、Vue和Jquery的区别
   答:
  vue和jquey对比 jQuery是使用选择器()选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的  选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其  实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:(“lable”).val();,它还  是依赖DOM元素的值。 Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是  分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
19、delete和Vue.delete的区别
  答:
  delete会删除数组的值,但是它依然会在内存中占位置
  而vue.delete会删除数组在内存中的占位
20、Vue-router 跳转和location.href有什么区别?
  答:
  1、使用location.href='/url'来跳转,简单方便,但是刷新了页面。
  2、使用history.pushState('/url'),无刷新页面,静态跳转。
  3、引进router,然后使用router.push('/url')来跳转,使用了diff算法,实现了按需加载,减少了dom的消耗。
21、Vue slot?
  答:
  假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。
22、Vue2中注册在router-link上事件无效的解决方案
  答:
  在router-link上使用@click无效是因为router-link的作用是单纯的路由跳转会影响阻止点击事件,使用@click.native就可以了
23、Router-link 在IE 和firefox不起作用?
  答:
  使用<button>标签和Router.navigate方法
24、axios的特点有哪些?  
  1.从浏览器制作XMLHttpRequests
  2.让HTTP从node.js的请求
  3.支持promise api
  4.拦截请求和响应
  5.转换请求和响应数据
  6.取消请求
  7.自动转换成json数据
26、params和query的区别?
  答:
  params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系。
  params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页   面会没有内容。
27、Vue更新数组时触发视图更新的方法
  答:
  可以设置对象或数组的值,通过key或数组索引,可以触发视图更新
  删除对象或数组中元素,通过key或数组索引,可以触发视图更新
  Vue提供了如下的数组的变异方法,可以触发视图更新
  push()
  pop()
  shift()
  unshift()
  splice()  
  sort()
  reverse()
学不完的技术,写不完的代码。QQ群:773595012
▼-----------------------------------------▼-----------------------------------------▼
原文地址:https://www.cnblogs.com/pual13/p/12409286.html