ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue2和Vue3的部分区别

2022-07-20 23:35:59  阅读:167  来源: 互联网

标签:逻辑 生命周期 区别 钩子 API 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

标签:逻辑,生命周期,区别,钩子,API,Vue2,Vue3
来源: https://www.cnblogs.com/shallow-dreamer/p/16500272.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有