1. 首页首页
  2. 科技前沿科技前沿

2025年vue2和vue3区别大吗（vue2和vue3的底层原理）

科技前沿 • • 阅读 40

vue2和vue3区别大吗（vue2和vue3的底层原理）h4 1 vue2 和 vue3 响应式原理发生了改变 h4 vue2 的响应式原理是利 es5 的 个 API Object defineProper 对数据进 劫持结合发布订阅模式的 式来实现的 vue3 中使 了 es6 的 proxy API 对数据代理 通过 reactive 函数给每 个对象都包 层 Proxy 通过 Proxy

大家好，我是讯享网，很高兴认识大家。



 <h4>1. vue2和vue3响应式原理发生了改变</h4>

讯享网

vue2 的响应式原理是利⽤es5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。

vue3 中使⽤了 es6 的 proxy API 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。

这⾥是引相⽐于vue2版本，使⽤proxy的优势如下

1.defineProperty只能监听某个属性，不能对全对象监听

2.可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

3.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。 （vue3.x可以检测到数组内部数据的变化）

2. Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。 

vue2：

讯享网

 vue3：

 
3.数据和方法的定义
 
Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是组合式API（Composition API）
 
   
 
    
旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的组合式API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，。
 
   
 
   
 
    
函数可以说是的属性和方法入口。在中，使用的是、。在中我们把属性和方法都放在函数中。函数中有以下几个特点：
 
   
 
   
 
    
 1.setup(props,context):接收两个参数
 
    
(1) props ：接收来自父组件传来的参数
 
    
(2) context ：上下文，主要包含3个使用参数：attrs,emits,slots，相当于Vue2中this的 attrs,emits,slots
 
   
 
   
 
    
2.有返回值，返回值可以是两种：
 
    
 (1) 返回 对象 ，返回的对象中的属性方法，可在模板中直接使用；
 
    

讯享网
 
    
 (2) 返回 渲染函数 ，可以自定义渲染的内容；
 
   
 
   
 
    
3.函数内部没有； 
 
   
 
   
 
    
 4.当内部有异步函数，需要使用到的时候，可以直接使用，不需要在前面加
 
   
 
4.生命周期钩子  
 
   

     vue2 vue3 说明 beforeCreate setup() 组件创建之前 created setup() 组件创建完成 beforeMount onBeforeMount 组件挂载之前 mounted onMounted 组件挂载完成 beforeUpdate onBeforeUpdate 数据更新，虚拟DOM打补丁之前 updated onUpdated 数据更新，虚拟DOM渲染完成 beforeDestroy onBeforeUnmount 组件销毁之前 destroyed onUnmounted 组件销毁后 activated onActivated deactivated onDeactivated 
   
 
   
     
    
  • 若组件被包含，则多出下面两个钩子函数。
    •  
   
 
   
     
    
  1. onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
    2.  
    
  2. onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。
    3.  
   
 
5.父子通信 
 
（1）父传子
 
   
 
   
 
   
 
    
     
     
  1. 父组件提供数据 
    2.  
     
  2. 父组件将数据传递给子组件 
    3.  
     
  3. 子组件通过defineProps进行接收 
    4.  
     
  4. 子组件渲染父组件传递的数据 
    5.  
    
 
   
 
讯享网
 
（2）子传父
 
   
 
   
 
   
 
    
     
     
  1. 在子组件中获取emit , defineEmits() 
    2.  
     
  2. 子组件中用emit发送事件 
    3.  
     
  3. 父组件要监听子组件的事件 
    4.  
     
  4. 父组件提供事件的处理函数 
    5.  
    
 
   
 
 
 
 

  

                    


                    


                    

                        

                            

                                小讯
                            

                            

                                

                                    
                                        
                                    
                                

                            

                        

                    

                


                

                    
                    
                    

                        
                        

                             上一篇
                            2025-04-27 18:27
                        

                    

                    
                    


                    
                    
                    

                        
                        

                            下一篇 
                            2025-04-18 23:47
                        

                    

                    
                    
                


                

                    
相关推荐

                    
                

                

                    

                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/191366.html