0


Vue经典面试题:Vue2和Vue3的区别

  • 双向绑定原理- vue2是用过ES5的一个API Object.defineProperty()对数据进行劫持配合发布订阅者模式的方式来实现的- Vue3是使用了ES6的proxyAPI对数据代理
  • Vue3支持碎片(Fragments)- 就是说组件可以有多个根节点
  • Composition API
  • vue2采用选项类型API,而vue3采用 合成型API。代码更加的简便整洁
  • 生命周期钩子函数- 若组件被keep-alive包裹,则多出下面两个钩子函数- onActivated() 激活时执行 onDeactivated() 失活时执行
  • setup()函数新特性- 它接受两个参数(props、context(包含attrs、slots、emit))- 在beforeCreate和Created 两个钩子函数之前的函数- 执行setup时,组件实例尚未被创建,在setup内部this不指向vue实例,是undefined- 和模板一起使用:需要返回一个对象 定义的变量和方法最后都需要return 出去- 使用渲染函数:可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态- 注意:- setup函数中的props是响应式的,当传入新的prop时,它将被更新 但是因为props是响应式的,所以不能使用ES6解构,因为会消除prop的响应式。可以通过setup函数中的toRefs来完成此操作- setup函数只能是同步的不能是异步的- setup函数只会在初始化的时候执行一次
  • teleport瞬移组件
  • 如何取舍ref和reactive- 优先使用ref函数,因为ref函数 可以处理简单数据类型,也可以处理复杂类型,常用于数据类型定义响应式数据ref特点:在代码中获取或者修改值时,需要补 .value 但是在template模板中不需要- reactive 常用于定义复杂数据类型作为响应式数据特点 :不需要 .value,如果明确知道对象中有什么属性久使用reactive
  • 父子通信- 父传子- 在setup函数中有两个参数 第一个参数为props,第二个参数为context
- props为一个对象,props接收后,内部包含了所有传递过来的prop数据
​
- context包含了attrs,slots,emit属性,其中emit方法可以完成子传父
  • 子传父- 子setup(props,context) { context.emit('name','李雷')}- 父<template> <Son @name="name" ></Son> </template> setup() { const name = (name)=>console.log(name); return {name}}, - 父传子:在setup中使用props数据 setup(props){ props就是父组件数据 }- 子传父:触发自定义事件的时候emit来自 setup(props,{emit}){ emit 就是触发事件函数}
  • performance
  • 原本在vue2中虚拟dom时进行全量的杜比,而在vue3中新增了静态标记(patchFlag),值对比带有PF的节点,并通过Flag的信息得知当前节点要比对的内容,这样就无需遍历整个虚拟dom,从而大大提升性能。
  • vue3响应式原理- 实现原理- 通过proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写、添加和删除- 通过reflect(反射)ES6:对源数据的属性进行操作。proxy: [[handle]]: 增删改查靠它完成 [[target]]: 数据}- Object.defineProperty是单线程,不能捕获错误 只能通过try和catch实现Reflect可以捕获错误(reflect也具有defineProperty)const per 代理数据 = new proxy 代理对象 (源数据person,操作项{ per: 代理数据 proxy: 代理对象,俩个参数(源数据、操作项)​ get (源数据target,属性名propName) { return Reflect.get(target,propName) } set (源数据target,属性名propName,操作后的值value) { 追加也能调用,引起源数据的变化 Reflect.set(target,propName,value) }​ deleteProperty (源数据target,属性名propName) { return Reflect.delete(target,propName) }})

本文转载自: https://blog.csdn.net/znhyXYG/article/details/128578609
版权归原作者 znhyXYG 所有, 如有侵权,请联系我们删除。

“Vue经典面试题:Vue2和Vue3的区别”的评论:

还没有评论