2022年vue3.0面试题

2022年vue3.0面试题

图片[1]-2022年vue3.0面试题-学吧号

MVVM是 Model-View-ViewModel的缩写, Model代表数据模型,定义数据操作的业务逻辑。 View代表视图层,负责将数据模型渲染到页面上。

ViewModel控制,通过双向绑定把View和Model进行同步交互,不需要手动操作DOM的一种设计思想。

1、增加了composition api 2、虚拟DOM重写 3、优化slots的生成 4、基于Proxy的响应式系统 5、TypeScript + 模块化 1、监控到数组下标的变化时,开销很大。所以Vue.js放弃了下标变化的检测; 2、Object.defineProperty只能劫持对象的属性,而Proxy是直接代理对象。 3、Object.defineProperty需要遍历对象的每个属性,如果属性值也是对象,则需要深度遍历。而 Proxy 直接代理对象,不需要遍历操作。

4、Object.defineProperty对新增属性需要手动进行Observe。vue2时需要使用 vm.$set 才能保证新增的属性也是响应式 5、Proxy支持13种拦截操作,这是defineProperty所不具有的 6、Proxy 作为新标准,长远来看,JS引擎会继续优化 Proxy,但 getter 和 setter 基本不会再有针对性优化 Vue实例从创建到销毁的过程,就是生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom -> 渲染、更新->渲染、卸载等一系列过程,我们称这是Vue的生命周期。 总共可以分8个阶段:创建前/后、载入前/后、更新前/后、销毁前/后 生命周期的钩子函数:有8个常规钩子和2个额外的钩子 = 10个 第一次页面加载会触发哪几个钩子? 第一次页面加载时会触发beforeCreate、created、beforeMount、mounted这几个钩子 1、beforeCreate:创建前,此阶段为实例初始化之后,this指向创建的实例,此时的数据观察事件机制都未形成,不能获得DOM节点。

data,computed,watch,methods 上的方法和数据均不能访问。 读法(D-Fo-kriˈeɪtɪd) 2、created:创建后,此阶段为实例已经创建,完成数据(data、props、computed)的初始化导入依赖项。一般初始化事件和异步请求放在这里调用 3、beforeMount:挂载前,虽然得不到具体的DOM元素,但vue挂载的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行。

beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。 4、mounted:挂载完成创建vue实例,和双向绑定,挂载DOM和渲染,可在mounted钩子函数中对挂载的DOM进行操作。 5、beforeUpdate:数据更新前,数据驱动DOM。

在数据更新后虽然没有立即更新数据,但是DOM中的数据会改变,这是vue双向数据绑定的作用。 可在更新前访问现有的DOM,如手动移出添加的事件监听器。 6、updated:数据更新后,完成虚拟DOM的重新渲染和打补丁。组件DOM已完成更新,可执行依赖的DOM操作。

注意:不要在此函数中操作数据(修改属性),会陷入死循环。 7、beforeDestroy:销毁前,可做一些删除提示,如:您确定删除xx吗? 8、destroyed:销毁后,当前组件已被删除,销毁监听事件,组件、事件、子实例也被销毁。这时组件已经没有了,无法操作里面的任何东西了。 9、额外的钩子:activated:在使用vue-router时有时需要使用来缓存组件状态,这个时候created钩子就不会被重复调用了。

如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发。 10、额外的钩子:deactivated:组件被移除时使用。 1、执行顺序: 1)父组件开始执行到beforeMount 然后开始子组件执行,最后是父组件mounted。 2)如果有兄弟组件,父组件开始执行到beforeMount,然后兄弟组件依次执行到beforeMount,然后按照顺序执行mounted,最后执行父组件的mounted。

2、完成流程顺序 1)加载渲染过程:父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 2)子组件更新过程:父beforeUpdate->子beforeUpdate->子updated->父updated 3)父组件更新过程:父beforeUpdate->父updated 4)销毁过程:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed 3、概念: 1)当子组件挂载完成后,父组件才会挂载。 2)当子组件完成挂在后,父组件会主动执行一次beforeUpdated/updated钩子函数(仅首次) 3)父子组件在data变化中是分别监控的,但是更新props中的数据是关联的。 4)销毁父组件时,先将子组件销毁后才会销毁父组件。

5)兄弟组件的初始化(mounted之前)是分开进行,挂载是从上到下依次进行 6)当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的 1、最大的改变就是setUp,setUp这个生命周期发生在beforeCreate和created之前。 两种形式的生命周期函数是可以共存,它们都会被执行。 2、其他都是大同小异,只不过换了写法前面加上了on 都写在setUp里面,在使用时需要按需引入函数 diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比,将变化的地方更新在真实DOM上;另外,也需要diff高效的执行对比过程,从而降低时间复杂度为0(N). 比较两组子节点是算法的重点,首先假设头尾节点可能相同做4次比对尝试; 如果没有找到相同节点才按照通用方式遍历查找,查找结束再按情况处理剩下的节点; 借助key通常可以非常准确的找到相同节点,因此整个patch过程非常高效。

vdom是一种使用js对象来描述真实DOM的技术,通过这种技术,们能精确知道哪些真实DOM改变了,从而尽量减少DOM操作的性能开销。 computed:计算属性只有在相关的数据发生变化时才会改变要计算的属性,当相关数据没有变化是,它会读取缓存。 一个数据受多个数据影响 1、支持缓存,只有依赖数据发生改变,才会重新进行计算 2、不支持异步,当computed内有异步操作时无效,无法监听数据的变化 watch:当需要在数据变化时执行异步或开销较大的操作时,一个数据影响多个数据 1、 不支持缓存,数据变直接会触发相应的操作; 2、watch支持异步; methods:调用总会执行该函数,每次都会重新计算 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新 答:keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

比如说把某一个列表滑动到第100条位置,切换到一个组件后这次切换回该组件还会保持在100条的位置。 答:vue文件的一个加载器,将template/js/style转换成js模块。 用途:js可以写es6、style样式可以scss或less、template可以加jade等 答:需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。

作用主要是为了高效的更新虚拟DOM。 不写key 会导致所有列表DOM重新渲染,大大降低性能,同时编辑器也会报错。 答:当设置deep:true时,就可以深度监听到对象到内部值的变化。 答:v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:v-bind绑定一个value属性;v-on指令给当前元素绑定input事件。

答:delete只是被删除的元素成了空项,其他的元素键值还是不变。 Vue.delete 直接删除了数组,改变了数组的键值。 1、父传子:子组件通过props[‘xx’] 来接收父组件传递的属性 xx 的值 写法 :key=”数据” 2、子传父:子组件通过 this.$emit(‘fn’,value) 来传递,父组件通过接收 fn 事件方法来接收回调 写法 :@ 提交的事件 = 接收的函数 3、Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex。 场景:多个组件共享数据或者是跨组件传�。

vue3.0有哪些新特性

图片[2]-2022年vue3.0面试题-学吧号

vue3.0新特性有: 1、性能比vue2.x快1.2 2倍- Performance ; 2、支持tree-shaking- Tree shaking support ; 3、引入了Composition API- Composition API ; 4、暴露了自定义渲染API- Custom Renderer API ; 5、新增三个组件(Fragment、Teleport、Suspense); 6、 更好的支持TS – Better TypeScript support; 一、Performance 二、 Three-shaking support Vue3.x中的核心API都支持tree-shaking,这些API都是通过包引入的方式而不是直接在实例化时就注入,只会对使用到的功能或特性进行打包(按需打包),这意味着更多的功能和更小的体积。 三、Composition API Vue2.x中,我们通常采用mixin来复用逻辑代码,使用起来虽然方便,但也存在一些问题:代码来源不清晰、方法属性可能出现冲突。

因此,Vue3.x引入了Composition API(组合API),使用纯函数分割复用代码。

和React Hooks的概念相似。 四、 Fragment、Teleport、Suspense Fragment 在书写Vue2.x时,由于组件必须是一个根结点,很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的(这和React 中的Fragment组件是一样的)。 Teleport Teleport其实就是React中的Portal。

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。 五、API- Custom Renderer API vue官方实现的 createApp 会给我们的 template 映射生成 html 代码,但是要是你不想渲染生成到 html ,而是要渲染生成到 canvas 之类的不是html的代码的时候,那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了。

Vue3.0采用新特性Proxy来实现数据状态的响应,它的原理是什么?

图片[3]-2022年vue3.0面试题-学吧号

Vue3 使用了 Proxy 替换了原来的 Object.defineProperty 来实现数据响应。 很简单,直接Vue引入reactive方法,接收一个对象参数,就实现了数据的响应式: reactive 内部的核心代码 简化 如下: 首先判断传入的参数类型是否可以用于观察,目前支持的类型为 Object|Array|Map|Set|WeakMap|WeakSet。

接下来判断参数的构造函数,根据类型获得不同的 handlers。

这里我们就统一使用 baseHandlers ,因为这个已经覆盖 99% 的情况了。只有 Set, Map, WeakMap, WeakSet 才会使用到 collectionHandlers。 对于 baseHandlers 来说,最主要的是劫持了 get 和 set 行为,这两个行为同时也能原生劫持 数组下标修改值及对象新增属性的行为, 这一点非常重要,因为 Object.defineProperty 就不行。 最后就是构造一个 Proxy 对象完成数据的响应式。

相比 Object.defineproperty 一开始就要 递归遍历整个对象 的做法来说,使用 Proxy 性能会好得多。比如原来 forEach 遍历: 接下来当我们去使用 state 对象的时候,就能劫持到内部的行为。 读取时:state.num 就会触发 get 函数; 修改时:state.num = 100 就会触发 set 函数。

以下是这两个函数的核心(TS语法): 对于 get 函数来说,获取值肯定是最核心的一步骤了。接下来是调用 track,这个和 effect 有关,下文再说。最后是判断值的类型,如果是对象的话就继续包装成 Proxy。

对于 set 函数来说,设置值是第一步骤,然后调用 trigger,这也是 effect 中的内容。 简单来说,如果某个 effect 回调中有使用到 state.num,那么这个回调会被收集起来,并在调用 state.num =100 时触发。 那么怎么收集这些内容呢?这就要说说 targetMap 这个对象了。

它用于存储依赖关系,类似以下结构,这个结构会在 effect 文件中被用到 先来解释下三者到底是什么,这个很重要 : 这里笔者把这些内容脱离源码串起来讲一下流程。 首先创建一个 Proxy 对象,targetMap 会把这个对象收集起来当做 key。 接下来调用 effect 回调的时候会把这个回调保存起来,用于下面的依赖收集。在调用的过程中会触发 counter 的 get 函数,内部调用了 track 函数,这个函数会使用到 targetMap。

这里首先通过 target 从 targetMap 中取到一个对象,这个对象也就是 target 所有的依赖关系。那么对于 counter.num 来说,num 就是这个对象的 key(这里如果有点模糊的话可以先看下上面的数据结构),值是一个依赖回调的集合,因为 counter.num 可能会被多个地方依赖到。 回调执行完毕以后会把保存的回调销毁掉。 当我们调用 counter.num = 7 时,触发 set 函数,内部调用 trigger 函数,同样会使用到 targetMap。

同样通过 target 取到一个对象,然后通过 key 也就是 num 去取出依赖集合,最后遍历这个集合执行里面所有的回调函数。 另外对于 computed 来说,内部也是使用到了 effect,无非它的回调不会在调用 effect 后立即执行,只有当触发 get 行为以后才会执行回调并进行依赖收集,举个例子: 对于以上代码来说,computed 的回调永远不会执行,只有当使用到了 cValue.value 时才会执行回调,然后接下来的操作就和上面的没区别了。

vue3.0中为何使用proxy?

图片[4]-2022年vue3.0面试题-学吧号

Object.defineProperty 是ES5中的方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。 用法如下: 当然也可以通过设置访问器get和set来控制obj对象,用法如下: 之后通过obj.name访问obj的name属性时会触发get方法,通过obj.name=’lisi’的方式设置obj的name属性值时,会触发set方法。

貌似没大用,但您不觉得在对象属性值得操作上可以做更多事情了吗?比如你不想让人知道obj的name属性是”张三”。

可以修改get方法的逻辑,如下: 这样用户在通过obj.name访问obj的name属性时得到的就是”zhang先生”,那么set的时候是不是也可以这样弄呢? 接上文~:其实都不能,这样会触发循环调用,因为 this.name 也是对属性的访问啊,也会触发get方法。 那如何实现返回”zhang先生”呢? 拷贝一个对象objCopy,属性和obj要一模一样 如下: 在obj的set,get方法里操作它就行了。如下: 这样就用两个对象和get,set方法成功的实现了好像是数据劫持或者是代理的这么个操作模式,有没有种 娶了媳妇连小姨子也到手的赶脚 ? 把dom数据更新的逻辑写到set或get方法里就实现了当下流行js框架的数据流。 那proxy是个什么东东呢? 此物一出,你再不用费力的去自己克隆一个对象。

用法如下: get,set方法的target参数即obj对象,key参数是要操作的属性,value参数是赋值动作时的值。 此后,可通过objCopy.name的方式访问obj的name属性,也可以通过objCopy.name=’lisi’的方式设置obj的name属性,而且不用给每个属性都设置set,get方法,不会触发循环调用,很是爽的。 这样我们通过对objCopy对象的操作就实现了对obj对象的操作,objCopy对象就是obj对象的代理对象 。

vue3.0使用了Proxy替换了原先遍历对象使用Object.defineProperty方法给属性添加set,get访问器的笨拙做法。 本文说了半天,和vue没靠上多少,没办法,热度蹭的不够技巧,我会继续努力的。

vue2.0和3.0区别

图片[5]-2022年vue3.0面试题-学吧号

项目目录不同

1、vue-cli3.o移除了config.文件夹。
2、多了vue.config.js文件。

3、新增了一个views文件夹。

4、删除了static新增了public文件夹。
5、index.html移动到public了。
配置项不同
1、vue-cli2.0的域名配置,分为开发环境和生产环境。
2、所以配置域名时,需要在config中的dev.env.js和。

3、prod.env.js中分别配置3.0 config.文件已经被移除。
4、但是多了。env.production和env.development文件。

5、除了文件位置,实际配置起来和2.没什么不同。

创建项目的方式不一样
1、vue-cli2.0,vue init webpack项目名。
2、vue-cli3.0 vue create项目名。

vue3.0和2.0的区别是什么?

图片[6]-2022年vue3.0面试题-学吧号

vue-cli2.0与3.0在目录结构方面,有明显的不同。

vue-cli3.0移除了配置文件目录,config 和 build 文件夹。

同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中。

配置项,3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同。
没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变。
Vue3.0不论是原生的html标签还是vue组件,他们都会通过h函数来判断,如果是原生html标签,在运行时直接通过Virtual Dom来直接渲染,同样如果是组件会直接生成组件代码。
数据监听,Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的,而vue3.0的版本,是基于Proxy进行监听的,其实基于proxy监听就是所谓的lazy by default。

版权声明:本文为CSDN博主「水墨-青花」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

THE END
喜欢就支持一下吧
点赞12
温馨提示:

1、本内容转载于网络,版权归原作者所有!
2、本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
3、本内容若侵犯到你的版权利益,请联系我QQ:243371741,会尽快给予删除处理!