1、对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器
vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统
vue是一款MVVM框架,基于双向绑定数据,当数据发生变化时候,vue自身会进行一些运算
特点:简洁轻量、数据驱动、组件化、模块友好
vue.js使用了IE8无法模拟的 ECMAScript 5 特性,没有替代方案
2、简述Vue双向数据绑定的原理
主要是通过Object对象的defineProperty属性,重写data的set和get函数来实现的
vue是通过数据劫持的方式来做数据绑定,最核心的方法就是通过Object.defineProperty()来实现对属性的劫持
在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数,达到监听数据变动的目的
3、什么是MVVM,和MVC的区别
MVVM是Model-View-ViewModel的缩写
Model层代表数据模型
View代表组件视图,负责将数据模型转化成UI展现出来
ViewModel是一个同步 View 和 Model 的对象(双向绑定)
在MVVM中,View和Model之间并没有直接的联系,而是通过ViewModel进行交互,
Model和ViewModel之间的交互是双向的,因此 通过视图操作数据,也能通过数据操作视图
MVC是Model-View- Controller的简写。即模型-视图-控制器,使用MVC的目的是为了将M和V相分离
MVVM与MVC最大的区别就是实现了View和Model的自动同步,也就是当Model的属性改变时
我们不用再手动操作Dom来改变View,而是改变后该属性对应View层会自动改变
4、vue.js的两个核心是什么
数据驱动和组件化思想
5、vue与angular的区别
vue的双向邦定是基于ES5中getter/setter来实现的,而angular是由自己实现一套模版编译规则,需要进行所谓的“脏值”检查,vue则不需要
vue需要提供一个el对象进行实例化,后续的所有作用范围也是在el对象之下,而angular而是整个html页面
6、说下vue的底层原理
Vue的模式是m-v-vm模式,即(model-view-modelView),通过modelView作为中间层,进行双向数据的绑定与变化
1)通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树
2)一旦被监测的数据改变,会通过Object.defineProperty定义的数据拦截,截取到数据的变化
3)截取到的数据变化,从而通过订阅——发布者模式,触发Watcher(观察者),从而改变虚拟dom的中的具体数据
4)最后通过更新虚拟dom的元素值,从而改变最后渲染dom树的值,完成双向绑定
7、简述vue等单页面应用及优缺点
单页面应用,用户所有的操作都在一个页面完成
优点:无刷新,用户体验好,共享资源只需要请求一次即可,采用组件化的思想,代码结构更加规范化,便于修改和调整
缺点:对搜索引擎不友好、低版本不支持,第一次加载首页耗时相对较长,不能使用浏览器导航按钮,需要自行实现前进后退
8、React与Vue对比
相同点:
都支持服务器端渲染、数据驱动视图,状态管理
都有虚拟DOM、组件化开发、通过props参数进行父子组件数据的传递
不同点:
React严格上只针对MVC的C层,Vue则是MVVM模式
虚拟DOM方面
vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树,而React每当应用的状态被改变时,全部组件都会重新渲染
视图渲染方面
React采用JSX渲染到DOM,vue使用的是template模板
数据绑定方面
vue实现了数据的双向绑定,react数据流动是单向的
state对象方面
react应用中不可变的,需要使用setState方法更新状态
vue中,state对象不是必须的,数据由data属性在vue对象中管理
9、前端组件化有什么优势
1)提高开发效率
2)方便重复使用
3)便于协同开发
4)更容易管理维护
10、说一下vue的生命周期,当使用keep-alive属性时,会增加哪两个生命周期
创建前/后beforeCreate/created:
在beforeCreated阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el还没有
载入前/后beforeMount/mounted:
在beforeMount阶段,vue实例的el和data都初始化了,但还是挂载之前为虚拟的dom节点,data尚未替换。在mounted阶段,vue实例挂载完成,data成功渲染。
更新前/后beforeUpdate/updated:
当data变化时,会触发beforeUpdate和updated方法。不常用
销毁前/后beforeDestory/destoryed:
beforeDestory是在vue实例销毁前触发,一般在这里要通过removeEventListener解除手动绑定的事件
执行destroy方法后,vue实例已经解除了事件监听以及dom的绑定,但是dom结构依然存在
在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:
activated 与 deactivated
11、说说你对angular脏检查理解
angular中无法判断数据是否做了更改,所以设置了一些条件,当触发这些条件之后就会执行一个检测来遍历所有的数据,对比刚才更改的地方执行变化
这个检查很不科学而且效率不高,有很多多余的地方
12、如何使css只在当前组件起作用
如果想写的css只对当前组件起作用,则在style中写入scoped
13、vue中v-if和v-show的区别
v-if和v-show都是用来控制元素的渲染
v-if是根据后面数据的真假,来判断DOM的添加删除等操作
v-show只是在修改元素的css样式(display属性值)
v-if如果初始渲染条件为真,就渲染,反之就不渲染
v-show不管初始条件是否为真,都会被渲染
v-if有更高的切换消耗,不适合做频繁的切换
v-show有更高的初始渲染消耗,适合做频繁的切换
14、vue有哪些修饰符
事件修饰符:stop、prevent、self、once
键盘修饰符:enter、space、up、down
表单修饰符修饰符:number、trim、lazy
15、列举vue的几种常用指令
v-if、v-show、v-for、v-on、v-bind、v-model、v-once
16、v-on可以绑定多个方法吗?
可以
17、vue中$mount与el区别
$mount和el两者在使用中没有什么区别,都是将实例化后的vue挂载到指定的DOM元素中
如果在实例化vue时指定el,则该vue将会渲染在el对应的DOM中
没有指定el,则vue实例会处于一种“未挂载”的状态,此时通过$mount来手动执行挂载
18、vue事件修饰符怎么使用,举例说明
19、vue中key值和is的作用
使用key,vue会基于key的变化重新排列元素顺序,并且移除key不存在的元素。可以做优化处理
is可以扩展原生html元素,也可以绑定动态组件
20、组件中data为什么是函数
因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离
而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题
21、什么是单向数据流动
这个概念出现在组件通信。数据从父级流向子级,数据本身还是父级的
如果操作子级要改变父级的数据,只能通过子级告知父级要操作哪个数据
然后让父级去修改自己的数据,修改完毕再传给子级
22、什么是vue的计算属性,有几种用法
computed 计算属性,能监听vue中数据的变化,当数据发生变化时候会触发
1、函数形式
computed:{
listenArr(){
//使用data中数据,自动帮你监听数据的变化//返回的结果就是通过改变数据 做的另一件事情 }
}
2、对象形式
computed:{
listenArr:{
get(){
//获取时候 },
set(newVal){
//修改时候 }
}
}
//当使用get set时候,computed中定义的属性为一个对象
//不使用get set时候,computed中定义的属性可以是一个函数
23、说一下vue组件之间的传递
父级传递子级:
首先在子组件上加一个v-bind:自定义属性,等于父级的数据,子组件通过props方法接收数据
子级传递父级:
在子组件上绑定一个自定义事件,并且传入父级的“事件”处理函数
在子组件内部使用$emit监听这个自定义事件,this.$emit('自定义事件名',参数)
24、vue中computed和watch的区别
computed能够监听vue数据上的变化,页面上来就执行一次,每改变一次数据就又触发,在操作数据的时候,会派生出另一个事情
watch当指定数据发生变化时候触发。一开始不会触发,只有指定的数据发生变化就又触发一次
watch可以deep深度添加,computed不可以
25、对vue中nextTick的理解
vue中nextTick可以拿到更新后的DOM元素
如果在mounted下不能准确拿到DOM元素,可以使用nextTick
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
26、自定义指令(v-check,v-focus) 方法有哪些? 它有哪些钩子函数? 有哪些钩子函数参数
全局定义指令:在vue对象的directive方法里面有两个参数,分别为指令名称、函数组件内定义指令:directives
钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)
钩子函数参数: el、binding
27、如何优化SPA应用的首屏加载速度慢的问题
1)将公用的JS库通过script标签外部引入,让浏览器并行下载资源文件,提高下载速度
2)在配置 路由时,页面和组件使用懒加载方式引入,在调用组件时再加载对应的js文件
3)加一个首屏 loading 图,提升用户体验
28、请分别说出vue修饰符trim、number、lazy的作用
trim:用来过滤前后的空格
number:将用户输入的数据绑定为number类型
lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步
29、vue-router 有哪几种导航钩子,它们有哪些参数
全局导航钩子:to、from、next
组件内的钩子:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
单个路由独享的钩子:beforeEnter
30、路由之间如何进行跳转
声明式(标签跳转)
编程式( js 跳转) router.push('index')
31、说一下懒加载(按需加载路由)
webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入,改为 const 定义的方式进行引入
不进行页面按需加载引入方式
import home from '../common/home.vue'
进行页面按需加载的引入方式:
const home = r => require.ensure( [], () => r (require('../common/home.vue')))
32、vue中$router和$route区别
router是VueRouter的一个对象,通过Vue.use(VueRouter),和VueRouter构造函数得到一个router的实例对象
route是一个跳转的路由对象,每一个路由都会有一个route对象
是一个局部的对象,可以获取对应的name,path,params,query等
33、vue-loader是什么?使用它的用途有哪些
vue文件的一个加载器,跟template/js/style转换成js模块
用途:js可以写es6、style样式可以scss或less、template可以加jade等
34、vue-router中query与params区别
query和params两者都是在Vue路由中传参
query用path来引入,params只能用name来传递,不能使用path
query更像get请求(地址栏会显示参数),而params更像post(不会在地址栏显示参数)
35、怎么定义vue-router的动态路由?怎么获取传过来的动态参数
在router目录下的index.js文件中,对path属性加上/:id
使用router对象的params.id
36、嵌套路由怎么定义
在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套
children 里面是子路由,当然子路由里面还可以继续嵌套子路由
37、active-class是哪个组件的属性?
vue-router模块的router-link组件
38、举例vue常用的路由对象,以及作用
$route.name 当前路由的名称
$route.path 当前路由对象的路径
$route.meta 在路由里面埋一个字段,当切换路由时候把信息传过去
$route.query 查询信息包含路由中查询参数的键值对
$route.hash 当前路径的哈希值,带#
$route.params 预设的变量,切换时候通过parmas带过去某个id的值
39、请说出vue.cli项目中src目录每个文件夹和文件的用法
main.js是入口文件
app.vue是一个主组件
view放视图页面
components放组件
router是定义路由相关的配置
assets文件夹是放静态资源
40、vue.cli中怎样使用自定义的组件
第一步:在components目录新建你的组件文件
第二步:在需要用的页面(组件)中导入
第三步:注入到vue的子组件的components属性上面
第四步:在template视图view中使用
41、什么是vue生命周期,作用是什么,第一次页面加载会触发哪几个钩子
vue实例从创建到销毁的过程
也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期
作用:生命周期中有多个事件钩子,让我们在控制Vue实例的过程时更容易形成好的逻辑
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
42、简单描述每个周期具体适合哪些场景
beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的操作,比如结束loading事件,也可以操作异步请求
mounted : 挂载元素,获取到DOM节点,推荐使用nextTick
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框,关掉定时器
destroyed:当前组件已被删除,清空相关内容
43、说一下vue中slot插槽
插槽就是vue实现的一套内容分发的API,将插槽元素作为承载分发内容的出口。
在组件模板中默认占一个位置,当使用组件标签时候,组件标签的内容会自动替换掉内容
slot中可以设置一些默认的内容,如果传递了内容则会替换掉,如果没有名字的标签会默认放到default中
44、computed、watch各是一个对象时,它们有哪些选项? computed 和 methods 有什么区别? computed 是否能依赖其它组件的数据?
computed有get set两个选项
watch有handler deep 是否深度,immeditate 是否立即执行
methods是一个对象,可以在对象中定义一个个方法,能接受参数,而computed不能
computed是可以缓存的,methods不会
computed可以依赖其他computed,甚至是其他组件的data
45、如何理解Vue中的Render渲染函数
Vue一般使用template来创建HTML,然后有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数
render函数return一个createElement组件中的子元素存储在组件实列中
createElement返回的是包含的信息会告诉VUE页面上需要渲染什么样的节点。我们称这样的节点为虚拟DOM
46、vuex是什么?怎么使用?哪种功能场景使用它?
vuex是vue框架中的状态管理器
在main.js引入store,注入,新建了一个目录store,export导出
适用场景:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
47、在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick() 回调函数中。原因是什么呢
在 created() 钩子函数执行的时候DOM其实并未进行任何渲染,而此时进行 DOM 操作无异于徒劳,
所以在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick() 的回调函数中
48、vuex中store的特性是什么
vuex 就是一个仓库,仓库里放了很多对象。
其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data
state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生改变
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
49、vue中ajax请求代码应该写在组件的 methods 中还是vuex的action中?
如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里
如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回
50、说一下vuex的思想
Vuex 的思想是 当我们在页面上点击一个按钮,它会触发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 立即会改变state,
state 改变以后,我们的页面会state 获取数据,页面发生了变化。 Store 对象,包含了我们谈到的所有内容,action, state, mutation