Javascript

Vue2和Vue3的部分区别

本文主要是介绍Vue2和Vue3的部分区别,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
  1. 生命周期:

    整体变化不大,只是大部分生命周期钩子前+"on",功能是类似的。需要注意的是,Vue3在组合式API中使用生命周期钩子时需要先引入,Vue2在选项API中是可以直接使用的。

    //Vue3
    <script setup>
        import {{生命周期钩子}} from 'vue'
        生命周期钩子(() => {})
     	//可以将不同的逻辑拆成多个相同的生命周期钩子,它会按照顺序执行不会被覆盖
    </script>
    
    //Vue2
    <script>
    	export default{
            生命周期钩子(){}  //直接调用
         	//如果书写相同的生命周期钩子,后面的会覆盖前面的   
        }
    </script>
    
  2. 根节点:

    Vue2:只能存在一个根节点。

    Vue3:可以存在多个根节点。

    //Vue2
    <template>
    	<div>  <!-- 唯一的根节点 -->
            <header></header>
            <main></main>
            <footer></footer>
        </div>
    </template>
    
    //Vue3
    <template>
    	<!-- 多个根节点 -->
    	<header></header>
    	<main></main>
    	<footer></footer>
    </template>
    
  3. API:

    Vue2:选项API(Options API),一个逻辑会散乱在文件的不同位置,会导致代码的可读性变差,不易维护,当需要修改某个逻辑时,需要来回跳转文件位置。

    Vue3:组合式API(Composition API),可将同一逻辑的内容写在一起,增强了代码的可读性。

  4. 响应式原理:

    Vue2:Object.defineProperty

    Vue3:proxy

  5. 事件缓存:

    Vue3的cacheHandler可在第一次渲染后缓存事件,相对Vue2无需每次渲染都传递一个新函数

参考文献地址:https://juejin.cn/post/7067413380922867725

这篇关于Vue2和Vue3的部分区别的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!