1.简述MVVM和MVC
MVC:
Model(模型)
View(视图)
Controller(控制器)
简单的理解:视图请求数据,将请求发送至控制器,控制器再将请求发送给模型,模型去查找数据,找到之后传给控制器,控制器再传给视图进行渲染。
MVP:
MVVM
Model 代表数据模型
View 代表UI视图
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁,可以理解成mvc中的控制器)
简单理解:视图请求数据,将请求发送至控制器,在控制器的两端具有监听机制,直接调用模型的数据,一端改变全部改变,利用数据劫持,结合订阅者和发布者模式,实现数据的双向绑定
2.简述虚拟DOM和diff算法
虚拟dom是利用js描述元素与元素的关系。
好处:是可以快速的渲染和高效的更新元素,提高浏览器的性能
diff算法
优点:最终表现在DOM上的修改只是部分的变更,可以保证高效的渲染,提高网页的性能
缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHtml慢一点
3.怎么创建vue的实例
new Vue({
el: "#app",
data:{
},
methods:{
}
})
4.列举常用指令以及作用·
v-html 解析输出变量 能解析html
v-text 解析输出变量
v-bind 给标签绑定属性 可以简写为 :属性名=“变量”
v-on 给元素绑定事件 用法 v-on:事件名=“方法名” 可以简写为@事件名=“方法”
v-pre 跨过当前的标签不解析 用法 :<标签 v-pre></标签>
v-cloak 解决差值表达式闪烁的问题
v-model 实现数据的双向绑定 只能适用于表单元素
v-for 可以循环遍历数据
v-if 条件输出
v-show条件输出
5.列举出常用的修饰符
.stop 阻止事件冒泡
.capture 设置事件捕获
.self 只有当事件作用在元素本身才会触发
.prevent 阻止默认事件,比如超链接跳转
.once 事件只能触发一次
.keyup.enter
.keyup.space
6.v-if和v-show的区别及使用场景
区别:
1、当条件为真的时候 没有区别 当条件为假的时候 v-if是不创建元素 v-show 渲染元素然后隐藏掉
2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换
7.vue怎么绑定事件?以及常用的事件修饰符
绑定:
v-bind:属性名=“变量” :属性名=“变量”
语法:@事件名.修饰符=“方法名”
.stop 阻止事件冒泡
.capture -事件捕获
.self 只是监听触发改元素的事件
.once - 只触发一次
.prevent - 阻止默认事件
8.methods computed watch的区别
methods是没有缓存的,只要调用,就会执行
computed具有缓存性,依赖于属性值,只有属性发生改变的时候才会重新调用
watch没有缓存性 监听属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作
9.vue中怎么动态的绑定class样式
<标签 v-bind:class="{类名:变量}">
10.什么是过滤器?怎么定义全局和局部过滤器
过滤器是实现变量的格式化输出 。过滤器分为局部过滤器还有全局过滤器
全局过滤器 是在多个实例中可以使用的过滤器
语法:
Vue.filter(“名”,function(value){
// value是调用过滤器的属性的值
})
调用:
在v-bind中或者{{ 属性|过滤器名}}
局部过滤器 只是在当前的组件或者实例中使用
filters:{
名:function(val){
}
}
注意:过滤器可以串联 但是后面的肯定是以前面的为基础
11.自定义指令的语法是什么?请举例说明一个带参数的自定义指令怎么定义
- bind(){} 只调用一次,指令第一次绑定到元素时调用
- inserted(){}被绑定元素插入父节点时调用
- update(){}被绑定元素所在的模板更新时调用,而不论绑定值是否变化
- componentUpdated(){}被绑定元素所在模板完成一次更新周期时调用
- unbind(){}只调用一次, 指令与元素解绑时调用
12.渐进式框架的理解
Vue是一个MVVM的渐进式框架,,渐进式指的是先使用Vue的核心库,然后再根据需求逐渐增加所需要的插件,慢慢的组织成自己的项目,我们在使用过程中主张最小化,Vue没有强主张,插件使用比较灵活,也就是没有做职责之外的事。
13.Vue中双向数据绑定是如何实现的
vue中的v-model可以实现双向绑定,其核心思想通过Object.definePropery来对Vue的数据进行数据劫持
主要分为三部分
observer主要是负责对Vue数据进行数据劫持,使其数据拥有get和set方法
指令解析器负责绑定数据和指令,绑定视图更新方法
watcher负责数据监听,当数据发生改变通知订阅者,调用视图更新函数更新视图
14丶单页面应用和多页面应用区别及优缺点
单页面应用:
优点:跳转速度快
缺点:首屏加载慢
多页面应用:
有点:首屏加载快
缺点:跳转的效率不高
15.自定义指令 有哪些钩子函数,及自定义指令的使用场景
- bind(){} 只调用一次,指令第一次绑定到元素时调用
- inserted(){}被绑定元素插入父节点时调用
- update(){}被绑定元素所在的模板更新时调用,而不论绑定值是否变化
- componentUpdated(){}被绑定元素所在模板完成一次更新周期时调用
- unbind(){}只调用一次, 指令与元素解绑时调用
16.v-clock有什么作用
v-cloak 解决差值表达式闪烁的问题
17.组件特性及好处
特性:重用性,可指定性,互操作性,高内聚性,低耦合度
好处:组件可以拓展HTML元素、封装可重用代码
18.组件的基本组成
一个vue页面主要包括3个部分:界面展示代码template、业务实现代码script、界面布局代码style
19.父传递子如何传递
- 在父组件的子组件标签上绑定一个属性,挂载要传输的变量
- 在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props:[“属性 名”] props:{属性名:数据类型}
20.子传递父如何传递
- 在父组件的子组件标签上自定义一个事件,然后调用需要的方法
- 在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件,数据是以参数的形式进行传递的
21.兄弟组件如何通信
- 在src中新建一个Bus.js的文件,然后导出一个空的vue实例
- 在传输数据的一方引入Bus.js 然后通过
Bus.$emit(“事件名”,"参数")
来派发事件,数据是以$emit()的参数形式来传递 - 在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
22.Props验证类型都有哪些
Boolean 布尔
String 字符串
Number 数字
Array 数组
Function 函数
Object 对象
Symbol
23.keep-alive是什么
keep-alive是vue提供给我们的一个组件,用来在路由切换的时候保存我们的组件状态
当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置,然后又去购物车页面,再回到首页的时候能够保存住我刚才滑动的位置
1. 全局保存在App.vue中 <keep-alive>把routerView保存起来
2. 部分缓存
1、router.js中设置要缓存的页面
{
path: '/child1',
name: 'Child1',
component: Child1,
meta:{
keepAlive:true
}
}
},
2、用v-if来显示router-view是否在keep-alive中出现
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
24.生命周期共有几个?分别在什么时候使用?
1.创建
beforeCreate() 在执行这个钩子的时候 只有一些实例本身的事件和生命周期函数 用户自定义不能使用
created() 最早开始使用 data和methods中数据的钩子
2.挂载
beforeMount() 指令已经解析完毕 内存中已经生成dom数
mounted()dom已经渲染完毕 页面和内存的数据已经同步
3.更新
beforeUpdate() 当data的数据发生改变会执行这个钩子 内存中数据是新的 页面是旧的
updated() 内存和页面都是新的
4.销毁
beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的,可以做一些释放内存的操作
destroyed()已经销毁完毕
activated(组件激活时):和上面的beforeDestroy和destroyed用法差不多,但是如果我们需要一个实例,在销毁后再次出现的话,用 beforeDestroy和destroyed的话,就太浪费性能了。实例被激活时使用,用于重复激活一个实例的时候
deactivated(组件未激活时):实例没有被激活时。
errorCaptured(错误调用):当捕获一个来自后代组件的错误时被调用
25.created和mounted区别
created()是最早使用data中数据的钩子函数
mounted()是最早可以操作dom元素的钩子函数
26、安装脚手架的步骤
vue init webpack mypro
cd mypro
cnpm install
npm run dev
27.为什么要使用脚手架
vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂项目的脚手架
vue脚手架的作用是用来自动一键生成vue+webpack的项目模版,包括依赖库,免去你手动安装各种插件,寻找各种cdn并一个个引入的麻烦
28.Vue-cli中如何使用sass
cnpm install node-sass --save
cnpm install sass-loader@7.3.1 --save
标签使用
<style lang="scss" scope> </style>
29.Vue-cli打包命令是什么?打包后会导致路径问题,应该在哪里修改(面试真题)
npm run build -环境 -域名 -打包文件夹 -平台
打包后会生成一个dist文件夹
在打包之前,需要将文件中config文件夹下的index.js中的 assetsPublicPath:"" 中的 / 改为 ./
30.Vue-router共有几种模式?默认是哪种?
history模式 hash模式 默认 hash模式
31.params和query的区别?
- 用法上的
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name
- 展示上的
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示 - params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关系
32.重定向用哪个属性?
redirect属性
33.assets和static的区别(面试真题)
assets目录中文件在打包的时候会进行打包压缩然后上传到打包好的目录
static目录中的文件直接拷贝到打包好的目录中 不会进行压缩
34.请写出嵌套路由的配置规则
{
path:"",
name:"",
compoent: ()=>{},
children:[
{
子路由配置
}
]
}
35.有列表页进入到详细页的思路
- 列表页面点击元素,传递id参数
- 详情页面通过query或者params获取id参数,通过id查询数据信息
- 渲染详情页面的数据信息
36.路由钩子函数共有几种?分别是什么?参数to、from、next分别是什么意思?
路由钩子函数有三种分别为 全局守卫 单个路由守卫 组件内部守卫
全局守卫钩子 beforeEach
单个路由守卫 beforeEnter
组件内部守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
to 对象 去哪儿
from 对象 从哪来
next 函数 next()==next(true) 继续执行
不写next==next(false)终止执行
next(path)跳转
37.Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据
38.Vuex有什么好处?及使用场景
在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuex
39.介绍Vuex的核心概念及其作用
state 存储数据 在组件中的使用 this.$store.state.属性名
mutations 直接操作state中的数据 在组件中的使用 this.$store.commit("方法名",参数)
actions 可以实现异步操作 在actions中操作mutations中的数据 在组件使用 this.$store.dispatch("方法名",参数)
getters getters类似于计算属性可以对state中数据进行逻辑计算 在组件中 this.$store.getters.方法名
modules 将state分模块
40.详述Vuex运行机制
在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutations中的方法,在mutations中可以直接操作state中的数据,state的数据只要一发生改变立马响应到组件中
41.vuex中如何异步修改数据(面试真题)
在vue的组件中通过dispatch来调用actions中的方法,在actions中通过commit来调用mutations中的方法,在mutations可以直接操作state中的数据,state中数据只要发生改变就立马会响应到组件中
42.axios安装步骤
cnpm install axios --save
main.js 中配置
import axios from "axios"
Vue.prototype.$axios = axios;
43.axios常用的请求方式有哪些?
get方法 ,post方法, all() 方法
44.简述axios并发请求
axios我们可以通过all方法完成并发请求,
在 .then中通过axios.spread拿到all中请求回来数据,在进行数据操作即可
45.Axios创建实例
import axios from "axios"
var instance=axios.create({
baseUrl: "",
timeout: 3000
})
46.简述拦截器是什么,共有几个拦截点,分别是什么
拦截器axios发送出去请求或者数据响应回来赋值之前进行数据的拦截或者过滤
主要有请求拦截器 请求发送出去之前拦截
instance.interceptors.response.use(
config=>{
return config
}
)
响应拦截器 数据响应回来赋值之前拦截
instance.interceptors.response.use(
res=>{
return res
}
)
47.Element UI完整引入步骤及按需引入步骤是什么?
完整引入
在 main.js 中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
按需引入
import { 组件名 } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(组件名);
拓展
48.vm.$nextTick
参数:{Function}[callback]
用法:将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。它跟全局方法Vue.nextTick一样,不同的是回调的this自动绑定到调用它的实例上。
this.nextTick(callback),当数据发生变化,更新后执行回调。
this.$nextTick(callback),当dom发生变化,更新后执行的回调。
49.在cnode社区遇到bug该怎么修复
fragment状态异常
错误原因:
activity已经不存在,还在commit,造成状态异常
commit(); commitallowstateslos();
错误发生处
OthersHomeActivity2 line438
MainActivity line156
BaseActivity onbackpressed
修复过程commit改为commitallowstateslos()