vue题目

1.css只在当前组件起作用
答：在style标签中写入scoped即可 例如：<style scoped></style>

2.v-if 和 v-show 区别
答：v-if按照条件是否渲染，v-show是display的block或none；

3.route和router的区别

$route:路由信息对象
包括fullPath，hash，matched，meta，name，params， path， query，等路由信息参数。
例如，对于路径 /foo?user=1，则有 this.$route.user = 1

$router:路由实例
对象包括了路由的跳转方法，钩子函数等。
例如，跳转页面：this.$router.push({ path: 'home' })
this.$router.push({ path: 'detail', query: { id: '123' }})
push方法其实和<router-link :to="...">是等同的。

路由传参的方式
1.可以手写完整的path：

this.$router.push({path:`/user/${userId}`})

这样传递参数的话，配置路由的时候需要在path上加参数path：user/：userId。
这种接收参数的方式是this.$route.params.userId。
2.也可以用params传递：

this.$router.push({name:'user',params:{userId:123}}) //localhost:8080/#/user

3.也可以用query传递：

this.$router.push({path:'user',query:{plan:'plan'}}) //localhost:8080/#/user?plan=plan

query传参是针对path的，params传参是针对name的。。接收参数的方式都差不多。。this.route.query.和this.route.params.

注意这只是跳转url，跳转到这个url显示什么组件，得配置路由。router跳转和<router-link>标签跳转，规则差不多。

4.vue.js的两个核心是什么？
答：数据驱动、组件系统

5.vue几种常用的指令
答：

6.vue常用的修饰符？
答：
.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用

7.v-on 可以绑定多个方法吗？
答：可以

8.vue中 key 值的作用？
答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

9.什么是vue的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

10.vue等单页面应用及其优缺点
答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

11.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
答：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。

12.测试题目
console.log(a) // fn
var a = 123;
function a() {
}
console.log(a) //123
预编译后👇
var a;
function a() {}
console.log(a) // fn
a = 123;
console.log(a) // 123

001、v-show与v-if的区别

v-show:操作的是元素的display属性
v-if:操作的是元素的创建和插入
相比较而言v-show的性能要高

002、methods、computed、watch三者的区别

methods是个方法，执行的时候需要事件进行触发
computed是一个计算属性，是实时响应的，只要data中的属性发生了变化那么就会触发computed，计算属 性是基于属性的依赖进行缓存的，methods调用的时候需要加()，而computed调用的时候是不需要加()
watch属性监听，watch用来监听属性的变化，当值发生变化的时候来执行特定的函数，watch监听属性的时候 会有2个参数newVal和oldVal一个新值一个旧值

003、vue中自定义指令如何使用

Vue.directive():
参数1：指令名称
参数2：指令实现的函数，在回调函数中第一次参数是指令绑定的元素，参数二是一个对象其中对象中有value 属性代表的是表达式返回的结果，还有modifiers属性是指令的修饰符

004、vue中组件创建的方式有哪些？

全局组件和局部组件
全局组件 Vue.component();参数1：组件名称 参数2：组件的配置项
局部组件 new Vue({ components:{} key值为组件名称 val值为组件的配置项 })

005、vue中的过滤器如何使用

Vue.filter()
参数1：过滤器名称
参数2：过滤器实现的方法 该方法中有2个参数 参数1为需要过滤的数据，参数2为过滤器传递的参数

006、如何实现父子组件传值、非父子组件传值

父组件传递子组件： 通过属性进行传递 接受用props属性进行接受。 props属性用来接收外部属性。 在父组件中当子组件当作标签使用的时候给子组件添加属性，值为需要传递的值。在子组件内部通过props 进行接受。接受的方式有2种，第一种为数组接受，第二种为对象接受，推荐用第二种，对象形式的可以限制数据的类型
子组件传父组件
方案一 在父组件中当子组件当作标签使用的时候给子组件绑定自定义方法，子组件通过this.$emit()进行触发。注意 自定义方法是不需要加()的
方案二 利用solt插槽作用域。
非父子组件传值
方案一 创建公共的Vue对象。通过调用Vue中的$on() 、$emit()进行传值。需要接受值得一方调用[图片上传失败...(image-47d550-1575942099051)]

emit()方案二 利用观察者模式封装[图片上传失败...(image-8a03a7-1575942099051)]

emit```

007、请说出vue中生命周期函数(钩子函数)

1、beforeCreate():组件实例刚刚被创建 (el和data并未初始化)
2、created():组件创建完成,属性已绑定,但DOM还未生成,$el属性还不存在 (完成data数据的初始化)
3、beforeMount():模板编译/挂载之前 (完成了el和data初始化)
4、Mounted():模板编译/挂载之后 (完成挂载)
5、beforeUpdate():组件更新之前
6、updated()：组件更新之后
7、beforedestroy():组件销毁之前
8、destroyed():组件销毁之后

008、请解释一下vue的中单向数据流的理解

数据从父级组件传递给子组件,只能单向绑定，子组件不能直接修改从父级传递过来的数据
数据只能从一个方向来修改状态,如果父组件给N个子组件进行了数据传递。那么某一个子组件中修改了这个数 据，那么就会导致其他组件的数据也会发生改变。因此数据只能从一个方向来修改状态

009、请说下什么是动态组件，如何使用，以及keep-alive的作用

动态组件： 让多个组件使用同一个挂载点，并动态进行切换。这就是动态组件
通过保留<component></component> 元素，动态的绑定它的is特性，可以实现动态组件
keep-alive 包裹动态组件(组件)时，会缓存不活动的组件实例，而不是销毁它们
组件切换调用的时候本身会被销毁掉的，只要加上keep-alive进行包裹，就不会被销毁，而是被缓存起来， 下一次使用的时候直接从缓存中调用

010、请说下组件的生命周期有哪些？

activated && deactivated:
activated：当组件为活跃状态的时候触发(活跃状态：进入页面的时候)
deactivated：缓存状态的时候触发

011、vue中solt的使用方式，以及solt作用域插槽的用法

使用方式： 当组件当做标签进行使用的时候，用slot可以用来接受组件标签包裹的内容，当给solt标签添加name属性的 时候，可以调换响应的位置
插槽作用域： 作用域插槽其实就是带数据的插槽，父组件接收来自子组件的slot标签上通过v-bind绑定进而传递过来的数 据，父组件通过scope来进行接受子组件传递过来的数据

012、为什么在组件内部data是一个函数而不是一个对象？

因为每次调用组件的时候都会重新生成一个对象,如果是一个对象的情况下，data数据会进行复用(因为对象是引 用数据类型),而当data是一个函数的时候每次调用的时候就会返回一个新的对象

013、vue中动画如何实现

哪个元素需要动画就给那个元素加transition标签
进入时class的类型分为以下几种 <name>-enter <name>-enter-active <name>-enter-to
离开时class的类型分为以下几种
<name>-leave <name>-leave-active <name>-leave-to
如果需要一组元素发生动画需要用标签<transition-group><transition-group>

014、浅谈对路由的理解

什么是路由？ 根据不同的url地址展示不同的页面或者数据。
路由分为前端路由，和后端路由
前端路由： 1、前端路由多用于单页面开发，也就是SPA。
2、前端路由是不涉及到服务器的，是前端利用hash或者HTM5的historyApi来实现的，一般用于不同的内 容展示和切换

015、路由跳转的方式有哪几种？

1、a标签进行跳转。例如<a href="#/home">首页<a>
2、router-link进行跳转 例如：<router-link to="/home">首页<router-link>
3、编程式路由 例如：this.$router.push()

016、路由传值的方式有哪几种

1、path路径属性传值。例如：path:"/home/:id/name"; 接受的时候通过 this.[图片上传失败...(image-b23227-1575942099051)]

route.query
3、路由解耦。在配置路由的时候添加props属性为true,在需要接受参数的组件页面通过props进行接受
4、编程式导航 this.$router.push({path:"/home",query:{}});

017、请说出路由配置项常用的属性及作用

路由配置参数： path : 跳转路径
component : 路径相对于的组件
name:命名路由
children:子路由的配置参数(路由嵌套)
props:路由解耦
redirect : 重定向路由

018、编程式导航使用的方法以及常用的方法

路由跳转 ： this.$router.push()
路由替换 : this.$router.replace()
后退： this.$router.back()
前进 ：this.$router.forward()

019、如何重定向路由

通过配置路由项中的redirect进行重定向

020、如何实现路由解耦

在路由的配置项中设置props:true 在需要接受组件的内部通过props进行接受

021、如何检测路由参数的变化

通过属性监听来实现或者beforeRouterUpdate()

watch:{   
   "$router"(){    
    }
 }

beforeRouterUpdate(to,from,next);

022、什么是路由守卫？路由的钩子函数有哪些？分别说出使用的场景，及用法

1、什么是路由守卫？ 路由跳转前后做的一些验证
2、路由常见的钩子函数 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使用的场景 beforeRouteEnter:当路由进入之前:登陆验证、热力图的记录、
beforeRouteUpdate:当路由进行更新的时候。如果当前路由发生了变化，但是不需要组件的创建销毁的过程的 时候，就需要用到这个钩子函数
beforeRouterLeave:当路由离开的时候、当用户没有进行支付离开的时候、当用户填写完信息没有保存的时 候......

023、什么是全局守卫

beforeEach:全局守卫。验证用户是否登陆

router.beforeEach((to,from,next)=>{     
//登陆状态   
 let status = false;   
 //所以路由组建的name名字    
const nextRouter = ["two","three","detail"];
    if(nextRouter.indexOf(to.name)>=0){
              if(!status){                   router.push({name:"login"})
                }else{
                   next();
                }
     }else{
              next();
        }
 })
024、axios与jquery的ajax有什么不同

axios的优点：
1、从nodejs中创建http请求
2、支持promiseAPI
3、提供了一些并发请求的接口
4、自动转换json数据
5、客户端支持防止CSRF/XSRF
ajax的缺点：
1、jQuery项目庞大，单纯的使用ajax却要引入整个Jquery非常不合理
2、基于原生的XHR开发，但是XHR架构并不清晰

025、简述vuex的数据传递流程

当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会 有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。 mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改 ，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

026、双向数据绑定的原理

vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和 设置属性值(set)的操作来实现的。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回 这个对象。

027、使用vue的时候会一下子加载所有的东西使得初始化页面很卡，该如何解决？

vue-router解决首次加载缓慢的问题。懒加载简单来说就是按需加载。
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时， 需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载 则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
用法：在配置路由时使用：component:resolve=>require([“@components/路由的路径”]，resolve)。 就是用了懒加载后打完包直接运行那个index.html会报错，报文件引用错误其实是打包时候路径配置有点问 题，找到build下面的webpack.prod.conf.js 添加 publicPath："./",

028、vue中的scoped
  1. 在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有 化的目的，这是一个非常好的机制。
  2. scoped肯定是解决了样式私有化的问题，但同时也引入了新的问题---样式不易（可）修改，而很多时候， 我们是需要对公共组件的样式做微调的。所以我才说要谨慎使用 。
029、vue路由传值params和query的区别

1.query传参和接收参数
传参: this.[图片上传失败...(image-b98e52-1575942099050)]

route.query.id
注意:传参是this.[图片上传失败...(image-f34e4d-1575942099050)]

route,这里千万要看清了！！！
2.params传参和接收参数
传参: this.[图片上传失败...(image-13014d-1575942099050)]

route.params.id
二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而 params相当于post请求，参数不会再地址栏中显示

030、跨域的方式

1、jsonp
2、正向代理 用http-proxy-middleware模块 app.use("/api",proxy({ target:"协议+域名", changeOrigin:true }))
3、cors PHP中

031、在Vue中使用插件的步骤
  • 采用ES6的import ... from ...语法或CommonJSd的require()方法引入插件
  • 使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })
032、请列举出3个Vue中常用的生命周期钩子函数

  • created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见

  • mounted: el被新创建的 vm.[图片上传失败...(image-4e8f73-1575942099049)]

    el 也在文档内。

  • activated: keep-alive组件激活时调用 033、第一次页面加载会触发哪几个钩子 第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

034、简单描述每个周期具体适合哪些场景
  • beforecreate : 可以在这加个loading事件，在加载实例时触发
  • created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
  • mounted : 挂载元素，获取到DOM节点
  • updated : 如果对数据统一处理，在这里写上相应函数
  • beforeDestroy : 可以做一个确认停止事件的确认框
  • nextTick : 更新数据后立即操作dom
035、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill 插件解决。

036、vuex有哪几种属性(modules)

有五种，分别是 State、 Getter、Mutation 、Action、 Module

  • vuex的State特性
    A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的 data
    B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个 数据的组件也会发生更新
    C、它通过mapState、mapGetters把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

  • vuex的Getter特性
    A、getters 可以对State进行计算操作，它就是Store的计算属性
    B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
    C、 如果一个状态只在一个组件内使用，是可以不用getters

  • vuex的Mutation特性 Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包 含任意异步操作。

作者：汶沐
链接：https://www.jianshu.com/p/76f972cbc7b8
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342