2022前端面试题vue方面(二)

一、MVC和MVVM

1.MVC，前后端无法独立开发，MV-VM里面有data函数，有自己的视图分析器，可实现前后端分离开发；

二、v-model

数据的双向数据绑定；底层原理：Object.defineProperty用来操作对象或者劫持对象。里面通过set和get 方法，然后加监听事件实现。

三、data为什么是一个函数

是闭包的实现,每一个组件都有自己的私有作用域，确保各组件数据不会相互干扰；

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

v-if不满足条件是不会渲染dom的，使用场景是单次的判断；

v-show不满足条件是会渲染dom的，只是不展示display设置为none，使用场景是需要频繁的切换；

五、虚拟dom

1.虚拟dom是在vue2.0之后才有的，本质是js对象，具备跨平台的特性。vue的渲染过程：将真实dom转换成虚拟dom（js对象），更新的时候用来做对比；

2.虚拟dom是如何提高vue的渲染过程的？vue的渲染有两条线，第一条是初始化，第二条是更新。虚拟dom的更新是局部更新节点数据；将直接操作dom的地方拿到两个js对象之中去做比较，找出差异性去更新。

3.虚拟dom生成的三元素：1.目标元素2.属性3.子节点

六、vue的核心

1.组件化；2.数据驱动

七、diff中的patch()

1.初始化patch(container,vnode)

2.更新update(vnode)

八、跨域

vue.config.js文件中devServer:{

proxy:{

changeOrigin:true是否跨域

}

}

九、token

sessionStorage.getItem(‘token’)

是令牌，随机字符串加用户名加用户密码加当前时间。token可以保证数据安全性。

十、render()和template的区别

template通过render将虚拟dom转换为真实dom，

render(h)中的h是原生JS中的createElement。一般可以替换一系列v-if的多叠层代码，通过创建组件设置属性传递简化代码。

十一、大量router怎么处理?

可以设置login.router.js或者manage.router.js通过模块名来区分路由文件。

懒加载，在输入此路由地址的时候再加载vue文件。

compent:()=>import("login.vue")

require.content()动态引入，webpack的API，传入三个参数，第一个是相对路径，第二个是是否匹配子级文件，第三个是查找文件名称的规则。

十二、路由守卫

router.js设置

Meta {require:true}

main.js里面设置

router,beforeEach((to,from,next)=>{

let token=获取token

if(token){

跳页面

}else{

跳404

}

)

十三、怎么自定义vue指令

vue.directive('ztt-key',{})

new ERROR 是展示vue的error

十四、父组件和子组件生命周期钩子执行顺序是什么?

加载渲染过程

父beforeCreate-父created,父beforeCount-

 

十五、对$nextTick的理解

当修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后获取，才能成功

十六、常用的数组方法

push,pop,shift,unshift,splice,sort,reverse。

十七、什么是vue的生命周期?有什么作用?

每一个vue实例在被创建时都要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到dom并在数据变化时更新dom等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。

十八、第一次页面加载会触发哪几个钩子?

beforeCreate,Created,beforeMount,mounted

十九、vue获取数据一般在哪个周期函数?

created,beforeMount,mounted

二十、created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

二十一、vue生命周期的理解

总共八个阶段，创建前后，载入前后，更新前后，销毁前后

二十二、vuex是什么?vuex有哪几种属性?

vue框架中的状态管理。属性:state,getters,muations,actions,modules

二十三、v-for和v-if的优先级

v-for的优先级高，不建议在同一个标签中使用，一般v-if写在上一个标签。

二十四、组件传值方式有哪些?

父传子:子组件通过props[“xxx”]来接收父组件传递的属性xx的值

子传父:子组件通过this.emit("fnName",value)来传递，父组件通过接收fnName事件方法来接收回调

其他方式:通过创建一个bus,进行传值

使用vuex

二十五、子组件调用父组件的方法

直接在子组件中通过this.$parent.event来调用父组件中的方法。在子组件中用$emit向父组件触发一个事件，父组件监听这个事件就行了。父组件把方法传入子组件中，在子组件中直接调用这个方法。

二十六、computed和watch的区别

computed:依赖其他属性，并且computed的人值有缓存，只有依赖他的属性发生改变，下一次获取computed的值才会重新计算。多对一。

watch:更多的是观察的作用，无缓存，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后的操作。一对多。

watch的属性:immediate立即执行，deep深度监听，handler函数

应用场景:在进行数据计算，并且依赖其他数据，使用computed.在数据变化时执行异步或开销较大的操作时，应该使用watch。

二十七、vue常用指令

v-model,v-if,v-show,v-on,v-html

二十八、vuex页面刷新数据丢失怎么解决?

需要做vuex数据持久化，一般使用本地存储的方案来保存数据，也可以使用第三方插件。推荐使用vuex-persist插件，它是为vuex持久化存储而生的插件，不需要手动存取storage,而是直接将状态保存到。cookie或者localStorage中。

二十九、vue2的响应式实现

Object.defineProperty($data,$data.age,{get:()=>{return 18}

set:(value)=>{$data.age=value}

)监听方法，第一个参数为对象，第二个参数为对象中的属性，第三个参数为操作set或者get。

在set的时候更新dom,更新dom是异步的。如果要立刻获取到更新dom的数据，可以使用$nextTick。

三十、vue3的响应式实现

$data.list.push(99),vue2通过修改对象的某一个属性，不会引发dom的更新操作，一般通过弥补函数this.$set($data,1,-1)进行更新dom。

vue3通过函数Proxy直接监听对象中所有属性的改变。

new Proxy($data,{{

get:(obj,key)=>{

return obj[key]

}

set:(obj,key,v)=>{

 obj[key]=v

)

Proxy是构造函数，会返回一个对象

三十一、响应式原理

Object.defineProperty

getter和setter

_ob_对象

数组:改写原型方法

三十二、diff算法

基于虚拟DOM对象，将真实dom上面的属性和方法转换为JS对象。