1. MVVM 介绍
MVVM 全名为 Model-View-ViewModel，MVVM是一种思想设计，Model是数据代表，可以在数据里进行数据修改和逻辑判断修改，View是ui框架，可以将数据转换为ui渲染出来，ViewModel是双向数据绑定，是将本不相连的View与Model连接起来，做到Model与View的同时修改。
2.MVC介绍
MVC 全名为 Model-View-Controller，MVC是一种软件设计典范，Model是数据代表，View是视图UI，Controller是控制器。
3.MVVM与MVC的区别？与其他框架有什么区别？在哪些场景下运用？
MVVM与MVC区别不大，都是一种设计思想。区别是从Controller演化成了ViewModel。MVVM主要解决了MVC中大量的Dom操作使得页面渲染性降低，页面加载过慢，从而导致用户体验过差。
区别：是通过数据的改变来显示视图而不是通过修改节点操作。
场景：数据操作比较多、频繁的场景、更加便利。
4.数据渲染 有几种方式 有什么区别？
{{}} 等同于 v-text 只渲染文本不解析。
v-html 解析html标签记载道文本中。
5.v-if和v-show有什么区别，切换时组件触发那些生命周期钩子函数？
区别：v-if是Dom的销毁与创建
v-show是Dom的css中display的显示与隐藏。
生命周期：v-if：显示：创建（created）挂在（mounted）消失：销毁（destroyed）。
v-show：无生命周期。
6.v-if和v-for为什么不建议混合使用
因为v-for的权级比较高，在进行if判断的时候，v-for是比v-if先进行判断。
如果放在同一个元素上会产生性能方面的浪费，因为每一次渲染都是先进行循环再进行条件判断。
解决方法：用外部template用v-if条件判断，在里面写入v-for循环。
7.vue中如何自定义指令（全局和局部）
全局：Vue.directive('color',（e,o）=> {代码块})
局部：directives:{
color：（e,o）=>{代码块}
}
自定义指令的钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
8.vue中常用的指令有哪些
v-text，v-html，v-model（双向绑定），v-on（事件监听），v-bind（data数据绑定），v-自定义（用），v-for（数组循环），v-if，v-else，v-else-if，v-show（显示隐藏），v-slot（定义插槽名字）
9.计算属性和实例方法有什么区别？
计算属性：计算属性没有传值功能，但却拥有缓存。
实例方法：实例方法没有缓存功能，但却拥有传值能力。
10.如何声明一个过滤器（全局的和局部的）
全局：Vue.filter(‘color’,(date)=>{代码块})
局部：filters：{
color（date）=> {代码块}
}
11.你用过那些v-model修饰符？
lazy 使用后在失去焦点后更新
number 输入框获取数字
trim 清除前后的空格
12.你知道那些事件修饰符
once 只执行一次
captrue 事件捕获时触发
native 触发原生事件
prevent 阻止浏览器默认行为
stop 阻止事件冒泡
self 阻止事件冒泡与事件捕获
13.怎样声明全局组件，怎样使用全局组件
全局：Vue.component（'MyDiv'）
使用：<MyDiv></MyDiv>
14.怎样声明局部组件，怎样使用局部组件
import MyDiv from '../../components/MyDiv'
局部：components：{
MyDiv
}
使用：<MyDiv></MyDiv>
15.父子组件怎样实现通讯？
父传子：<MyDiv a="123" ></MyDiv>
子组件使用props接收
子传父：子级使用this.$emit（‘子级自定义’，传值）
<MyDiv @子级自定义="父级自定义"></MyDiv>
methods:{
父级自定义（date）{
console.log（date）// 子级传过来的值
}
}
16.非父子组件之间如何传递参数？
使用Vuex数据共享
缺陷：Vuex没有数据缓存
17.怎样使用props限定传递的数据，有哪些属性？
type 限制传递的数据类型
default：是否设置指定默认值
required：是否必传
validator：（date） => {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
18.解释VUE中单向数据流的概念
子级无法直接修改父级的数据，可以通过this.$parent.数据名 进行直接修改。
19.vue有哪些插槽，如何使用
默认插槽：插槽中使用的html代码，用<slot></slot>展示
具名插槽：每一个template标签写一个v-slot的名字，在组件里
作用于插槽：
20.vue中怎样实现组件之间的嵌套
使用插槽或路由实现组件嵌套
21.Vue怎么操作Dom
使用Ref，用this.$refs 来操作Dom
22.vue怎样监听数据的变化，怎样监听一个对象属性的变化
使用watch监听数据变化，添加属性deep：true
23.vue中生命周期钩子函数有哪些，请写出语法
创建之前：beforeCreate
创建：created
挂载之前：beforeMount
挂载：mounted
数据更新之前：beforeUpdate
数据更新：updated
销毁之前：beforeDestroy
销毁：destroyed
24.挂载和创建之间的区别
挂载后可以操作Dom和数据
创建不可操作Dom只可以操作数据
25.keep-alive组件有什么作用？
起到缓存作用，值有：include：”缓存目标“
包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。
26.vue.nextTick方法有什么用？
作用：无论在哪使用后延迟进行至Mounted渲染出Dom后执行可以操作Dom或数据（经常使用于created中）
27.vue实现双向数据绑定的原理是什么？
object.defineProperty转化为getter或setter
28.什么是vue全局事件解绑？
在离开页面的时候使用生命周期函数beforeDestroy进行销毁，如定时器等。
29.$set 方法有什么用？ 有什么特点？
作用：针对于无法进行修改的对象或数组强行进行赋值修改。
特点：直接明了
30.路由显示区域和路由跳转 分别是哪个组件？
路由显示区： router-view
路由跳转： router-link
31.路由中怎样传递和接收参数（单个 多个参数）
单个：
传递：this.$router.push({
path：‘路由地址/100’
})
接收：console.log(this.$route.params)
多个：传递：this.$router.push（{
path：‘路由地址’，
params：{
id：‘’，
name：‘’
}
}）
接收：this.$route.params
32.active-class的作用
当选中后可以自定义选中标签的css样式
33.vue-router有哪几种导航钩子 分别是什么？
全局
前置router. beforeEach
后置router. afterEach
路由独享的
前置beforeEnter
组件内
beforeRouteEnter(to, from, next){
//在渲染该组件的对应路由被confirm 前调用
beforeRouteUpdate(to, from, next) {
//在当前路由改变，但是依然渲染该组件是调用
}，
beforeRouteLeave(to, from ,next) {
//导航离开该组件的对应路由时被调用
}
34.路由懒加载怎么实现，有什么意义
意义：懒加载又叫代码分割，也叫延迟加载，当你用到那个页面加载那个页面，用来提升界面加载速度，减少第一次页面加载的时间，提升用户体验。
35.Vue项目性能优化?
懒加载
css精灵图标
keep-alive缓存
减少http对服务器的请求，减少请求代码体积
v-if与v-show的合理使用
key值的设置
解绑全局的防抖与节流
减少watch事件监听
spa单页应用图片(数据)懒加载<!--使用前需先安装配置vue-lazyload-->
webpack打包压缩
36.vue路由模式有哪几种，怎样切换有什么区别
路由模式： hash,history
区别：hash有#，history没有#
37.vue组件中的data为什么必须是一个函数
因为每一个组件都要有自己的一个私有作用域的data，做到了自己维护自己的数据，如果写成一个函数的话这样data便会成为一个共用的对象不利于代码的抒写。
38.$route和$router有什么区别
$route：接受路由的信息传递
$router：传递信息，拥有多种传递方法、跳转方法和钩子函数。
39.V-on 是都可以监听多个方法 怎样 实现？
<button v-on="{click:fun,mouseover:fn}"></button>
<button @click="a(),b()"></button>
40.开发环境与生产环境的区分
if` `(process.env.NODE_ENV === ``"development"``) {
``alert(``"开发环境"``);
baseurl = "https://www.baidu.com"
}``else` `{
``alert(``"生产环境"``);
baseurl = "https://www.test.com"
}
41.什么情况会使用到vuex vuex有哪些核心的属性？
state:数据
getters：相当于vue中的component计算属性
mutations：更改数据方法（commit）
actions：包裹mutations，使之异步（dispath）
modules：模块化vuex
使用：this.$stroe.state.数据名
this.$stroe.dispath（‘name’，参数）；
actions中写 name（context,payload）{
setTimeout(()=>{
context.commit('updateInfo'，payload)
consolo.log(payload);//参数
},1000)
}
mutations中写updateInfo（state，date）{
state // vuex数据 date // commit传值
state.数据名 = date
}
42.vue中key的作用
key是唯一值，利于虚拟Dom的更新与修改可以做到减少不必要的更新渲染，减少不必要的内存使用，优化用户体验。
43.Diff算法 的运行机制？
Diff是一种优化手段。将两个模块在虚拟Dom里进行对比根据key的唯一值来进行对比。
当前层级的dom先进行对比，如果发现异同 就更新当前dom和它的子节点
43.Key值的作用 为什么最好不要用index?
因为key的作用是唯一值的代表 index只是下标 是根据数据循环的下标，如果数据被改变则对应下标也会改变不利于虚拟Dom的对比
44.axios的语法
method：请求方式，
url：请求地址，
success：成功回调
catch：失败回调
45.axios 数据请求
当axios请求为post，表单提交时，header需要设置content-type为application/x-www-form-urlencoded，
放在body体的参数格式为
requestbody
{
name:xxx,
age:xxx
}，
后台就接收不到参数
这时就需要将参数序列化，用qs序列化参数（qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.），qs.stringify(parmas),转完之后的格式为：formdata
name:xxx,
age:xxx
46.VNode 是什么？虚拟 DOM 是什么？
Vue在页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。
扫一扫
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
