- Vue常见的指令有哪些,有什么用
- v-if:根据值得真假来进行元素的渲染,值改变时会新建或销毁元素
- v-show:根据值得真假来切换元素的显示隐藏,不会销毁元素
- v-for:基于一个数组或对象来循环渲染一个列表,vue2.0以上必须配合:key使用
- v-bind:动态的绑定一个或多个特性,简写为:
- v-on:用于监听制定元素的dom事件,绑定事件监听器,可以简写为@
- v-model:实现数据的双向数据绑定
- v-pre:跳过这个元素和它的子元素的编译过程
- v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
- 双向数据绑定的原理
采用数据劫持结合发布者-订阅者模式的方式,
通过Object.defineProperty()来劫持各个属性的setter,getter,
在数据变动时发布消息给订阅者,触发相应的监听回调。
- 路由的跳转和传参有哪几种方式
声明式跳转:
1)通过路径跳转
<router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link>
2)通过路由名称跳转
<router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看子页面</router-link>
函数式跳转:
this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})
传参方式:
Params传参:this.$router.push({ name:'user',params: { userId: 123 }})
命名的路由,params 必须和 name 搭配使用
Query传参:<router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link>
- 组件间的通讯方式有哪些
父传子:
父组件中自定义参数
<counter-com :num="10" str="abc"></counter-com>
子组件接受参数
props:{
"num":{type:Number,default:1},
}
子传父:
父组件中自定义事件
<counter-com @setNum=”setNum”></counter-com>
Methods:{
setNum(data){
console.log(data)
}
}
子组件通过$emit方法触发事件
This.$emit(“setNum”,{name:”123”})
通过vuex传递参数
通过事件总线传递参数
- 谈一谈对路由守卫的理解(谈理解,一般就是总分总,它是什么,用在哪,有什么用,怎么用,有什么注意事项,再结合项目说明更好)
路由守卫又称导航守卫,是在进行路由跳转时触发的钩子函数,他可以进行路由的拦截和取消等操作,分为全局路由守卫,组件内路由守卫和路由独享守卫,主要用来进行某些页面的权限认证,通过确认登录信息来判断放行还是拦截,
- router.beforeEach((to,from,next)=>{
- if(to.path == '/login' || to.path == '/register'){
- next();
- }else{
- alert('您还没有登录,请先登录');
- next('/login');
- }
- })
- 谈一谈对Vuex的理解
Vuex是一种状态管理模式+库,他几种管理所有组件公用的状态,当组件的嵌套过深,难以传值时,就可以用vuex来管理公共的状态,比如需要同意确人登录状态时。
vuex中一共有五个模块 State Getter Mutation Action Module
1)state中定义数据,可以在任何组件中进行调用
this.$store.state.全局数据名称
2)Mutation是 更改store 中的状态的唯一方法,在组建中使用commit触发Mutation操作,他不能进行异步操作
3)Action是进行异步操作的模块,但是他只能通过触发mutation来更改state中的状态
this.$store.dispatch("asynAdd")
4)getter类似于vue中的computed,进行缓存,对于Store中的数据进行加工处理形成新的数据
5)modules,当数据量很大是vuex就会显得很臃肿,所以我们可以通过modules来进行模块化分割,每个模块都有单独的state、mutation、action、getter还有module
- 谈一谈对混入的理解
混入mixins,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来,可以提高代码的重用性,使代码易于维护。
当我们存在多个组件中的数据或者功能很相近时,我们就可以利用mixins将公共部分提取出来,通过 mixins封装的函数,组件调用他们。
当混入后的值或选项冲突时,组件本身的值会覆盖混入的值,混入的选项会比组件本身的选项更早调用
- 谈一谈对插槽的理解
在组件封装时,可以把不确定的得部分封装为插槽,调用时再再确定下来,插槽分为具名插槽和匿名插槽,匿名插槽在定义时只需要定义<slot></slot>,使用时会将组件中的值传入插槽中。
<template>
<div class="about">
<h1>This is an Children page</h1>
<!-- 定义一个默认插槽 -->
<slot></slot>
</div>
</template>
当组件内插槽大于一个时,就必须使用具名插槽,使用name制定名称
<template>
<div class="about">
<h1>This is an Children page</h1>
<!-- 给插槽加了个name属性,就是所谓的具名插槽了 -->
<slot name="one"></slot>
<slot name="two"></slot>
</div>
</template>
<template>
<div class="about">
<h1>This is an Parent page</h1>
<children>
<template v-slot:one>
<p>one插槽</p>
</template>
<template v-slot:two>
two插槽
</template>
</children>
</div>
</template>
- 什么是跨域,如何解决
浏览器的同源策略规定js的交互只能在同域中,当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
解决:通过配置代理绕过浏览器的同源策略
- 谈一谈封装请求的心得
将axios封装在promise对象中,将需要用到的请求配置同意封装在方法里,调用请求方法后可以很方便的使用,节省了大量的代码,没有了冗余的操作,使代码整洁便于维护,提高了可读性和复用性,符合高内聚,低耦合的特点