09-Vue2知识点总结

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，兄弟组件通过$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模块分割，减少代码臃肿。

---

---

• 参考文献：

• 「自我检验」熬夜总结50个Vue知识点，全都会你就是神！！！ - 掘金 (juejin.cn)

• (7条消息) 学Vue，看这篇就够了-Vue个人学习笔记汇总(含资料代码项目地址)_coderYYY的博客-CSDN博客_vue 学习笔记

• https://juejin.cn/post/6932659815424458760

• 你真的了解vue2.0 和 vue3.0 响应式原理区别吗？ - 掘金 (juejin.cn)