选择vue2还是vue3（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)   } })