1、Vue的优缺点?
- 优点:渐进式,组件化,轻量级,虚拟dom,响应式,单页面路由,数据与视图分开。
- 缺点:单页面不利于seo,首屏加载时间较长。
2、对“渐进式框架”的理解?
- 在使用Vue时,可以有阶段性地选用组件系统、路由 vue-router、状态管理器vuex 等来构建一个完整的框架。
3、 MVVM是什么?
- MVVM 是 Model-View-ViewModel 的缩写;
- Model:模型层,负责处理业务逻辑以及和服务器进行交互。
- View:视图层,负责展示数据,可以理解为HTML页面。
- ViewModel:视图模型层,是Model和View之间的通信桥梁,达到了数据的双向绑定。
- 一方面它实现了数据绑定,将后端传递的数据转化成所看到的页面;
- 另一方面它实现了DOM监听,将所看到的页面转化成后端的数据。
4、Vue和JQuery的区别在哪?
- jQuery是事件驱动的,而vue是数据驱动的。
- JQuery的业务逻辑和视图更改耦合在一起,而Vue的数据与视图分离。
- jQuery频繁直接操作DOM,Vue使用虚拟DOM的技术,提高了更新DOM时的性能。
5、为什么data是个函数并且返回一个对象呢?
- 是因为一个Vue组件可能会多处调用,而每一次调用就会执行
data函数
,并返回新的对象,这样,可以避免多处调用之间的数据污染
。
6、常用的Vue修饰符?
- .lazy:改变输入框的值时value不会改变,当光标离开输入框时,
v-model
绑定的值value才会改变。 - .trim:把
v-model
绑定的值的首尾空格给过滤掉。 - .number:将值转成数字,先输入数字的话只取前面数字部分;先输入字母的话无效。
- .stop:阻止冒泡。
- .prevent:阻止默认事件。
- .once:事件只执行一次。
7、v-if和v-show有何区别?
- v-if和v-show都可以决定一个元素是否渲染。
v-if
是通过控制dom元素的删除和生成来实现隐藏和显示。v-show
是将dom元素的display属性设置为none。- 当需要在显示与隐藏之间切换很频繁时,使用v-show。
8、为什么v-if和v-for不建议用在同一标签?
- Vue2中
v-for
优先高于v-if
。
<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
{{item}}
</div>
v-for
和v-if
同时存在,会先把7个元素都遍历出来,然后再一个个判断是否为3,并把3给隐藏掉,这样的坏处就是,渲染了无用的3节点,增加无用的dom操作。
9、methods、 computed、watch 的区别?
- 1、
methods
里面是用来定义函数的,它需要手动调用才能执行。而不像 computed和watch 那样,“自动执行”预先定义的函数。 - 2、
computed
依赖已有的变量来计算一个目标变量。并且computed
具有缓存机制
。 - 3、
watch
是监听某一个变量的变化。并且watch
可以进行异步操作
。
10、v-for 中为什么使用 key?
- 它的作用是当 v-for 所绑定的数据发声变化时只重新渲染变化的项,而不是重新渲染整个列表,为了高效的更新虚拟DOM。
11、介绍一下Vue的生命周期
(1)概述
- Vue 实例从创建到销毁的过程,就是生命周期。
- 生命周期可分为8个阶段:创建前后、载入前后、更新前后、销毁前后。
- 还有activated和deactivated是被keep-alive缓存的组件被激活或者停用时调用的。
- 还有errorCaptured 是当子孙组件出错时,会调用这个钩子。
(2)具体分析
钩子函数 | 描述 | 使用场景 |
---|---|---|
beforeCreadted | 实例了vue但还没进行数据的初始化与响应式处理。 | 执行一些初始化任务 |
created | 数据已被初始化和响应式处理,可以访问到数据。 | 常用于异步ajax请求 |
beforeMount | render函数在这里被调用,生成虚拟DOM,但还没转成真实DOM并替换到el。 | |
mounted | 真实DOM挂载完毕。 | 用于访问数据和dom元素 |
beforeUpdate | 当data被修改时才触发,此时仅仅是数据被修改,页面还未更新。 | |
updated | 根据新数据生成最新的内存DOM树,重新渲染到真实的页面中去。 | |
beforeDestroy | 实例被销毁前调用,此时实例的属性和方法仍可访问。 | 用于一些定时器的取消 |
destroyed | 完全销毁一个实例。解除了和其他实例的连接和事件监听,但不会清除DOM。 |
(3)父子组件生命周期顺序?
- 父组件准备要挂载但还没挂载的时候,子组件先完成挂载,最后父组件再挂载。
- 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
(4)created和mounted的区别?
- created是在组件实例一旦创建完成的时候调用,这时候页面DOM节点未生成。
- mounted是在页面DOM节点渲染完成后调用。
- 异步请求放在mounted的话有可能导致页面闪动。
12、组件之间的传值方式有哪些?
- 1、父传子,子组件中使用
props
属性接收参数。 - 2、子传父,子组件通过$emit()来触发自定义事件,父组件通过v-on来监听自定义事件。
- 3、使用$refs获取组件实例。
- 4、使用EventBus,兄弟组件通过 e m i t ( ) 来 触 发 自 定 义 事 件 , 另 一 个 通 过 ‘ emit()来触发自定义事件,另一个通过` emit()来触发自定义事件,另一个通过‘on`来监听自定义事件。
- 5、使用Vuex进行状态管理。
13、$nextTick的用处?
- 由于Vue在更新DOM时是异步执行的,当数据发生变化,vue会开启一个异步更新队列,视图会等队列中所有数据变化完成后统一更新。
- 那么想要在修改数据后立刻得到最新的DOM结构,就用$nextTick。
14、前端路由有哪些模式呢?
- hash模式:通过
#
后面内容的更改,触发hashchange
事件,实现路由切换而不刷新页面。 - history模式:通过
pushState
和replaceState
切换url,触发popstate
事件,实现路由切换而不刷新页面。
15、使用路由模块来实现页面跳转?
- this.$router.push(‘路由地址’) ;
16、$route
和$router
的区别
$router
为VueRouter实例,想要导航到不同URL,则使用$router.push方法。$route
是当前router跳转的对象,里面可以获取name、params、path、query等。
17、说说你对keep-alive的理解?
- keep-alive是vue的内置组件,能在包裹动态组件的时候缓存不活动的组件实例,而不是销毁它们。
- 有两个重要属性:
- include :名称匹配的组件会被缓存。
- exclude :名称匹配的组件不会被缓存。
18、vuex的有哪些属性?用处是什么?
-
Vuex是一种状态管理模式,存在的目的是共享可复用的组件状态。
-
state:存放共享变量的地方。
-
getters:根据业务逻辑来处理state。
-
mutations:唯一用来更改state的方法。
-
actions:提交的是 mutation,而不是直接变更状态,可以包含异步操作。
-
module:将store模块分割,减少代码臃肿。
-
参考文献:
-
(7条消息) 学Vue,看这篇就够了-Vue个人学习笔记汇总(含资料代码项目地址)_coderYYY的博客-CSDN博客_vue 学习笔记
-
https://juejin.cn/post/6932659815424458760