6.8作业

news/2025/2/13 5:25:59/

1.vue2与vue3的区别


        1- vue2与vue3双向绑定数据的原理不同
                vue2双向数据绑定采用了es5中Object.defineProperty() 对数据进行了劫持,结合发布订阅模式实现
                vue3 采用了es6中的proxy代理对象的方式进行数据交互,相较vue2来说大大的提高了效率
        2- vue3支持碎片(Fragments):支持多个根节点
        3- Composition API
                Vue2 与vue3 最大的区别是vue2使用选项式api,对比vue3组合式api。旧得选项型api在代码里分割了不同得属性:data,computed,methods等;新得组合式api能让我们使用方法来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁
        4-建立数据data
                vue2是把数据放入data中,vue3就需要使用一个新的setup()方法
                备注:此方法在组件初始化构造得时候触发。使用一下三个步骤来建立反应性数据:
                        1. 从vue引入reactive;
                        2. 使用reactive() 方法来声明数据为响应性数据;
                        3. 使用setup()方法来返回我们得响应性数据,从而template可以获取这些响应性数据。
        5- 生命周期
                vue2     --------------- vue3
                beforeCreate       ->   setup()
                Created            ->   setup()
                beforeMount        ->   onBeforeMount
                mounted            ->    onMounted
                beforeUpdate       ->    onBeforeUpdate
                updated            ->    onUpdated
                beforeDestroyed    ->    onBeforeUnmount
                destroyed          ->     onUnmounted
                activated          ->     onActivated
                deactivated        ->     onDeactivated

                beforeCreate 和 created 已经合并成一个新的函数 setup。
                deactivated 和 activated 已经被废弃,取而代之的是 beforeMount 和 beforeUpdate。因为在Vue3中,keep-alive组件被完全重写了,其默认行为现在与没有keep-alive一样。
        6- 父子传参不同
                父传子,用props,子传父用事件 Emitting Events。
                在vue2中,会调用this$emit然后传入事件名和对象;
                在vue3中得setup()中得第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
       7- 新增setup()函数特性

2.vue2响应式原理与vue3响应式原理的区别


        响应式原理就是指的是MVVM的设计模式的核心,即数据驱动页面,一旦数据改变,视图也会跟着改动。
        vue2的响应式原理是由Object.defineProperty()实现的 (数据劫持)
        vue3的响应式原理是由es6中的Proxy所实现的 (数据代理)

3.Vue3带来了什么改变?


        1.性能的提升
                打包大小减少41%
                初次渲染快55%, 更新渲染快133%
                内存减少54%
        2.源码的升级
                使用Proxy代替defineProperty实现响应式
                重写虚拟DOM的实现
        3.Vue3可以更好的支持TypeScript
                新的特性-Composition API(组合API)

4.vue2与vue3有什么区别

        vue2使用的是defineProperty,vue3采用的是proxy

        vue2采用的是面向对象编程,vue3采用的是函数式编程 

        vue3修改了细腻dom算法,只针对变化的层进行diff,而vue2是对所有的dom进行diff

5.vue3的常用compositionAPI有哪些

        setup , ref函数 , reactive函数 , vue3中的响应式原理 , 计算属性 , 监听属性 , vue3生命周期

        Teleport


http://www.ppmy.cn/news/280519.html

相关文章

idea中的快捷键大全, idea常用快捷键

文章目录 前言常用快捷键查找及修改快捷键根据快捷键名称查询根据快捷键查询修改快捷键 快捷键含义Alt/(代码提示)Ctrl/(注释当前行)CtrlF(在当前文件中搜索)CtrlShiftF(全局搜索)Ct…

通信算法之166: Dan载通信物理层基带波形设计

1. 项目指标 通信场景:Dan 地。 飞行高度:飞行器最高12千米. 通信距离:150km以上. 频段范围:频段1.3--1.4GHz。 发射功率:2W。 业务速率:256kbps、512kbps、1024kbps。 调制方式:BPSK/Q…

机器学习因子库及特征表达式,创业板布林带突破策略,年化13.3%(附代码)

原创文章第235篇,专注“个人成长与财富自由、世界运作的逻辑与投资"。 昨天有朋友留言说,L2R效果不好,当然我不知道这位兄弟的场景。 pybroker vs qlib pybroker的结构里,有一个特别的地方: 无论是规则型策略…

回溯算法part6(高阶!) | ● 332.重新安排行程 ● 51. N皇后 ● 37. 解数独

文章目录 332.重新安排行程思路思路代码困难 51. N皇后思路思路代码困难 37. 解数独思路思路代码困难 今日收获 332.重新安排行程 332.重新安排行程 思路 递归回溯解决。 由于同地点可能出发两次,并且需要根据字典排序选择小的先出发。 那么使用map记录每个出发点…

穿越火线击杀图标下载_穿越火线击杀图标替换器下载_766火线魔盒

火线魔盒插件集下载、安装、还原、分享、升级于一体,对于玩家来说非常的方便快捷。火线魔盒官方团队郑重向您承诺,本插件绝不包含恶意软件及病毒木马软件测试期间出现的一切杀软危险提示均为误报。 下载地址:http://www.pipipan.com/file/26…

冰点还原8.53破解版

冰点还原(DeepFreeze)是由Faronics公司出品的一款系统还原软件,它可自动将系统还原到初始状态,保护系统不被更改,能够很好的抵御病毒的入侵以及人为的对系统有意或无意的破坏。还原精灵的安装不会影响硬盘分区和操作系…

月光宝盒源码下载

游戏机月光宝盒源码运行视频 源码运行视频。 源码项目下载地址: https://download.csdn.net/download/sb11011bs/16076152 其中串口按键处理部分代码片段: #include “Com.h” #include “Random.h” #include “SerialPort.h” #include “Hardware.…

网页特效——潘多拉魔盒(.html)

目录 &#x1f49e;潘多拉魔盒&#x1f4e2; ✨ 一个温暖的家.html⛳️ &#x1f49e;潘多拉魔盒&#x1f4e2; ✨ 一个温暖的家.html⛳️ <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv…