🖥️ 前端经典面试题 吊打面试官 专栏：Vue2和Vue3的区别

🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

目录

一    
    
    
、回答点

二     


     


     


     、深入回答

监测机制的变化

Fragments（碎片）

API模式的变化

数据的存放

生命周期钩子

父子传参

diff算法

v-if和v-for优先级

一




 




 




 



、回答点

监测机制的变化
   

   

   

、Fragments（碎片）的更新     

     

     

    、API模式的变更 




  




  




  


、数据的存放

  


  


  


、生命周期钩子     
     
     
   、父子传参等    
    
    
。     


     


     


     。

二  




   




   




   

、深入回答

监测机制的变化

Vue3中使用了ES6中Proxy API 对数据进行代理    
    
    
    
，监测整个对象


     


     


     


，而不再是某个属性




 




 




 



。 消除Vue2中基于Object.defineProperty的实现所存在的诸多限制
   

   

   

。 Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化     

     

     

    。 Vue3中支持Map


 



 



 



、Set                 、WeakMap和WeakSet

Fragments（碎片）

Vue2在组件中只能有一个根节点 




  




  




  


。 Vue3在组件中可以拥有多个根节点

  


  


  


。

API模式的变化

Vue2使用选项式API（Options API）     
     
     
   。Vue3使用组合式API（Composition API）

数据的存放

Vue2中数据存放在data属性中 Vue3使用setup()方法
 




 




 




 ，setup()方法在组件初始化构造的时候触发  




   




   




   

。 从vue引入ref或reactive 简单数据类型使用ref()方法进行处理   

   

   

   
，复杂数据类型使用reactive()方法进行处理


 



 



 



。 使用setup()方法来返回响应式数据 

     

     

     

，在template可以获取这些响应式数据                 。

生命周期钩子

setup()：开始创建组件之前

  




  




  




 ，在beforeCreate和created之前执行   




    




    




    
。 onBeforeMount()：组件挂载到节点之前执行


















。 onMounted()：组件挂载完成之后执行                。 onBeforeUpdate()：组件更新之前执行    



     



     



     。 onUpdated()：组件更新之后执行



















。 onBeforeUnmount()：组件卸载之前执行    
    
    
。 onUnmounted()：组件卸载之后执行 若组件被keep-alive包裹  


  


  


  
，则多出两个钩子函数 onActivated()：被激活时执行     


     


     


     。 onDeactivated()：A组件切换到B组件




 




 




 



。A组件消失时执行
   

   

   

。

父子传参

子组件通过defineProps()进行接收  
     
     
     
，并且接收这个函数的返回值进行相应操作     

     

     

    。

diff算法

Vue2：进行虚拟节点对比


   




   




   




 ，并返回一个patch对象来存储两个节点的不同 



 



 



 
，最后用patch记录的消息去局部更新Dom 




  




  




  


。它会比较每一个Vnode但对一些不参与更新的元素                  ，进行比较会消耗性能

  


  


  


。 Vue3：diff算法在初始化时会给每个虚拟节点一个patchFlags（优化的一个标识）     
     
     
   。只会比较patchFlags发生变化的Vnode



    




    




    




 ，从而进行视图更新















，对比没有变化的做静态标记                   ，渲染时直接复用  




   




   




   

。

v-if和v-for优先级

Vue2中：v-for优先执行 Vue3中：v-if优先执行 注：最好不要把v-if和v-for同时用在一个元素上



     



     



     



 ，这样会带来性能的浪费