vue面视总结

桃扇骨 2022-11-09 11:22 124阅读 0赞

1.vue-router有哪几种导航钩子  
① 全局导航钩子：一般用来判断权限，以及页面丢失时需要执行的操作；

beforeEach（）每次路由进入之前执行的函数。  
afterEach（）每次路由进入之后执行的函数。  
beforeResolve（）2.5新增

② 单个路由（实例钩子）

beforeEnter（）  
beforeLeave（）

③ 组件路由钩子：

beforeRouteEnter（）  
beforeRouteLeave（）  
beforeRouteUpdate（）

2.vue组件中的data为什么是一个函数  
data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了

3.路由懒加载  
在单页应用中，如果没有应用懒加载，运用webpack打包后的文件很大，进入首页时，加载的内容过多，不利于用户体验。

而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力。

原理：vue异步组件技术：异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 实现按需加载

4.Vue.js是什么？  
vue就是一个js库，并且无依赖别的js库。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。  
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

5.scoped原理及穿透方法  
vue中的scoped通过在DOM结构以及css样式上加唯一不重复的标记：data-v-hash的方式，以保证唯一，达到样式私有模块化的目的。  
scoped穿透：/deep/ >>>

6.vue.cli项目中src目录每个文件夹和文件的用法  
asstes 静态资源文件  
components 组件  
router 路由的配置  
view 视图  
app.vue 应用主组件  
main.js 入口文件

7.Vue中key值的作用  
主要是为了高效的更新虚拟DOM。

8.Vue怎么重置data  
使用Object.assign()，vm.$data可以获取当前状态下的data，

vm.$options.data可以获取到组件初始化状态下的data。

9.组件中写name选项有什么作用  
项目使用keep-alive时，可搭配组件的name进行缓存过滤。  
DOM做递归组件时需要调用自身name  
vue-devtools调试工具里显示的组件名称是由vue中组件name决定的

10.route和router  
route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数。router是“路由实例对象”，包括了路由的跳转方法(push、go)，钩子函数等。

11.Vue和React的区别  
监听数据变化的实现原理不同：Vue通过getter/setter以及函数的劫持，能快速的计算出Vdom的差异，这是它在渲染的过程中，会跟踪每个组件的依赖关系，不需要重新渲染组件树。react是默认通过比较的引用方式进行，如果不优化，每当应用的状态被改变时，所有的子组件页时重新渲染，导致大量的不必要的vdom重新渲染  
数据流的不同：Vue默认双向绑定数据，组件和dom动过v-model双向绑定。但是父子组件之间，props在2x版本中时单项的数据流，react一直提倡单向数据流  
模板渲染的方式不同：react是通过JSX渲染模板，vue是通过拓展HTML语法进行渲染

12.Vue3.0的简单了解  
新的API  
setup()函数  
关于Typescript的支持  
替换Object.defineProperty为 Proxy 的支持。关于Proxy代替带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用Proxy又带来了浏览器兼容问题。

13.vue-cli 替我们做了哪些工作  
vue-cli是基于 Vue.js 进行快速开发的完整系统，也可以理解成是很多 npm 包的集合。

vue-cli完成的功能：  
.vue 文件 --> .js 文件  
ES6 语法 --> ES5 语法  
Sass,Less,Stylus --> CSS  
对 jpg,png,font 等静态资源的处理  
热更新  
定义环境变量，区分 dev 和 production 模式  
如果开发者需要补充或修改默认设置，需要在 package.json 同级下新建一个 vue.config.js 文件

14.v-for 与 v-if 的优先级  
v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。