代码编织梦想

1、vue的最大优势?

比较轻量 中国人自己写的框架 文档易懂

实现数据双向绑定、数据驱动视图、组件化开发、数据和视图分离、单页面应用可以实现页面数据局部更新

2、MVVM和MVC的区别

MVC:一种传统的设计模式(分层架构思想,后端),即数据、视图、控制器

MVVM:vue采用的设计模式(数据双向绑定模式。由MVC演变而来),实现数据自动双向同步,无需操作dom

3、vue常用修饰符

.stop:阻止事件冒泡

.prevent:阻止默认事件(表单的提交)

.once:事件只能触发一次

.capture:事件捕获

.self:e.target是自身才会触发(即触发事件和绑定事件是同一元素)

.enter:监听键盘enter键

4、对vue渐进式的理解

使用模块化规范,实现自助餐式开发,用什么导什么,最大程度上节约资源

5、vue的指令及作用

v-on:给标签绑定函数(缩写为@)

v-bind:动态绑定(缩写为:)

v-slot:插槽(缩写为#)

v-for:循环

v-show:

v-if:

v-else:

v-text:解析文本

v-html:解析html标签

6、为什么要避免v-for和v-if在一起使用

v-for的优先级比v-if高,一起只用时会像遍历再判断,性能低

解决方案:外加template判断

7、v-if和v-show的区别

相同点:当两者为true时显示,false时隐藏

不同点:v-show一定会渲染,只是修改display属性;v-if根据条件渲染

8、vue中key的作用(高效渲染,提高性能)

key是虚拟DOM对象的标识,当状态中的数据变化时,vue会根据新数据生成新的虚拟DOM,

通过key新旧虚拟dom进行对比,从而决定节点是否重新加载以及复用

若虚拟dom中内容没变,则直接使用之前的真实dom

若虚拟dom中内容变了,则生成新的真实dom,替换掉之前的dom

9、v-for指令使用key值的几种情况

1、没有key值(默认下标):不复用,就地更新

2、key值为下标:不复用,就地更新

3、key值为id:复用相同的key,更新不同的key

10、vue中:key作用,为什么不能用索引

因为v-for数据项顺序的改变,vue也不会移动DOM元素来匹配数据项顺序,而是就地更新每个元素

11、vue中有时候数组会更新页面,有时候不更新,这是为什么?

因为vue内部只能监测到数组顺序/位置的改变/数量的改变,但是值被重新赋予监测不到。可以用Vue.set()/vm.$set()实现

一下方法会触发数组的改变,v-for会监测到并更新页面

push() 添加元素到数组最后

pop() 删除数组最后元素

shift() 删除数组最前元素

unshift() 添加元素到数组最前

splice() 从某个下标开始删除指定数量元素

reverse() 翻转数组

12、计算属性和监听器的区别

1、计算属性有缓存机制,监听器没有

2、计算属性不支持异步操作,监听器支持异步操作

3、计算属性是一个额外新增的属性,监听器只能监听data中的属性

4、计算属性有返回值return,监听器不需要return

5、计算属性可以监听多个数据变化(计算属性内部用到的数据变化了,就会执行计算属性方法,监听器只能监听一个数据变化)

13、说一说封装vue组件的过程

写好组件用export default导出,在main.js文件里引入并使用vue.component()全局注册,或者在其他组件文件内引入,并在vue配置项的components里定义

14、vue组件传值

父传子:父组件中在使用子组件时通过行内属性传值,子组件props接收(单向数据流)

子传父:使用子组件时用@自定义时间名=父组件中的方法(事件监听),子组件使用$emit触发父组件方法

非父子:vuex

15、vue组件中的data为什么必须是函数?

为了组件复用时生成新的对象,数据互不影响。不然如果data是个对象,对象是应用类型,一旦一个地方修改就会全部修改

16、组件命名规范

链式命名:my-component

大驼峰命名:MyComponent

17、scoped作用与原理

作用:组件css作用域,避免组件内部样式被父组件覆盖

18、vue的声明周期

四阶段:

创建前/后

挂载前/后

更新前/后

销毁前/后

八大钩子函数

19、vue中nextTick的原理是什么?

a、为什么需要nextTick?

vue是异步修改dom并且不鼓励开发者直接接触dom,但有时业务需要必须对数据更改刷新后的dom做处理

nextTick等待下一次dom更新结束后再执行

nextTick底层是promise,所以是微任务,原理就是vue通过异步队列控制dom更新

20、v-slot插槽与作用域插槽

概念:子组件提供给父组件的一个赞占位符

插槽作用:父组件传递html结构给子组件

具名插槽(<slot name="child1"></slot>  <template v-slot="child1"></template>):父组件传递多个html结构给子组件

作用域插槽(带数据的插槽,即带参数的插槽,<slot :data="data"></slot> <Child><template slot-scope="slotProps.data"></template></Child>):父组件给子组件传递插槽时,可以使用子组件内部的数据

21、自定义指令的方法有哪些?它有那些钩子函数

全局定义指令:vue对象的directive方法,两个参数(指令名称,函数),组件内定义指令:directives

钩子函数:bind(绑定事件触发)、inserted(节点插入时触发)、update(组件内相关更新)

钩子函数参数:el、binding

22、vue路由作用和原理

作用:实现单页面应用,同个页面根据路由hash值渲染不同内容

原理:监听location的hash值

23、路由间怎么跳转的?有哪些方式?

声明式跳转:router-link

编程式跳转:this.$router.push()、this.$router.replace()、this.$router.go()

24、vue-router怎么配置路由(路由配置六个流程)

1、引入组件

2、创建路由对象router

3、配置路由path和组件,生成路由对象routes

4、将路由对象挂在到vue实例上

5、页面使用<router-view></router-view>承载路由

6、<router-link to='要跳转的路由'></router-link>设置路由导航

25、vue-router的钩子函数有哪些(导航守卫)

A、全局钩子beforeEach、beforeResolve、afterEach(全局前置守卫,所有路由生效)

B、路由独享守卫beforeEnter(可直接配置在路由上,只对这个路由生效)

C、组件内钩子(beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave)

26、路由传值方式有哪几种

a、/path?key=vlaue

b、/path/value

c、this.$router.push({path:'/path',query:{key:value}})

d、this.$router.push({name:'com',params:{key:value}})

27、vue路由实现模式:hash模式和history模式

a、路径不同

hash带# history不带#

b、工作模式不同

hash:修改当前页面hash 不需要服务器额外配置

history:会给服务器发送请求,需要服务器配置

28、请说出路由配置项常用的属性及作用

路由配置参数:

path:跳转路由

component:路由相应组件

name:命名路由

children:子路由配置参数(路由嵌套)

props:路由解耦(组件可以复用,但是路由给子组件传值后通过$route获取参数会导致子组件无法复用,因此用到props解耦)

redirect:重定向路由

29、$route和$router的区别

routes:数组,路由配置规则

router:对象,路由独显

$router:对象,用于跳转路由和传递参数

$route:对象,用于接收路由跳转参数

30、跟keep-alive有关的生命周期是哪些?

在开发vue项目时,大部分组件没必要多次渲染,所以vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染。

被keep-alive包含的组件/路由中,会多出两个生命周期钩子:activated、deactivated

activated:组件第一次渲染时会被调用,之后再每次缓存组件被激活时调用

deactivated:组件被停用(离开路由)时调用

31、vuex作用及五大组成部分

作用:全局数据管理、解决组件间复杂传参问题

组成:

state:存储数据

getter:派生数据,相当于state的计算属性

mutations:修改state中的数据

actions:异步更新数据

module:模块化vuex数据

32、vuex中action工作流程

a、组件给actions发送消息

b、actions异步请求数据

c、actions将请求到的数据提交给mutations

d、mutations同步更新state中的数据

33、vue中踩过的坑

1、v-for和v-if不能同时使用

2、向对象新增属性,属性值变化视图未刷新,要使用$set设置

3、created中操作dom报错,找不到对应dom,使用nextTick解决该问题

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44012634/article/details/130847211