首页 > 其他分享 >vue2和vue3的主要区别#记录

vue2和vue3的主要区别#记录

时间:2024-03-25 18:01:18浏览次数:21  
标签:函数 记录 setup 使用 API vue2 vue3

一、 vue2和vue3的区别

1、vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x,使用proxy的优势如下
  1. defineProperty只能监听某个属性,不能对全对象监听
  2. 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
  3. 可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

 二、Vue3支持碎片(Fragments),也就是说在组件可以拥有多个根节点

//vue2
<template>
    <div>
        111
        <div>222</div>
    </div>
</template>

//vue3
<template>
    <div>111</div>
    <div>222</div>
</template>

三、Composition API

Vue2与Vue3 最大的区别 — Vue2使用选项类型API(Options API)对比Vue3合成型API(Composition API)

四、生命周期钩子 — Lifecyle Hooks

 五、父子传参不同,setup() 函数特性

总结:

1、setup 函数时,它将接受两个参数:(props、context(包含attrs、slots、emit)

2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

3、执行 setup 时,组件实例尚未被创建

4、与模板一起使用:需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)(setup语法糖除外)

5、使用渲染函数:可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态

注意事项:

1、setup函数中不能使用this。Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined

2、setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。但是,因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性。(如果需要解构 prop,可以通过使用 setup 函数中的toRefs 来完成此操作)

标签:函数,记录,setup,使用,API,vue2,vue3
From: https://blog.csdn.net/junsens/article/details/137020934

相关文章

  • 代码随想录刷题记录4——滑动窗口和螺旋矩阵
    数组:701.二分查找27.移除元素977.有序数组的平方209.长度最小的子数组59.螺旋矩阵思路:209.长度最小的子数组只要知道要用滑动窗口的思路来写就好了!滑动窗口本质上就是双指针核心问题是考虑好窗口什么时候变大什么时候变小59.螺旋矩阵并没有什么新的算法思想,但......
  • 微机原理上机实验记录
    eg0202.asm;eg0202.asmincludeio32.inc.datacountdword12345678h,9abcdef0h,0,0,3721h.codestart:moveax,33221100hmovebx,eaxmovecx,countmovebx,offsetcountmovedx,[ebx]movesi,[ebx+4]movesi,4movedi,count[esi]movedi,[ebx+esi]movecx,[eb......
  • Python数据匹配和记录链接库之recordlinkage使用详解
    概要Python的recordlinkage库为数据匹配和记录链接提供了一个强大的工具集,使得从不同数据源识别重复或相关记录变得简单高效。这对于数据清洗、合并数据集、实体识别等任务至关重要。recordlinkage库简介recordlinkage提供了一套全面的工具来进行复杂的记录比较、匹配和......
  • 一三云服务器,centos中怎么查看重启记录
    在一三云服务器管理中,经常遇到需要查看服务器操作的记录,比如重启服务器的记录日志等,接下来我就给大家简单介绍一下。要查看CentOS中的重启记录,可以使用以下命令:使用last命令查看系统启动和关机记录:lastrebootAI代码助手复制代码使用journalctl命令查看系统日志,可以筛选出......
  • vue3项目中使用echarts实现中国地图大区任意分区
    最终效果:背景:项目需要在中国地图上显示各大区的库存情况,使用echarts将下载的中国地图挂载后,好家伙,全是一块块的省份,再定睛一看,我这项目需求的大区咋只有6个,好好好,看来得探索一波如何将各省份自定义为大区了。1.echarts、中国地图json文件下载echarts下载:npminstallecha......
  • 个人理解记录 --- 前端篇(持续更新)
    目录Q:CSS相关问题盒模型有哪些?区别是什么?box-sizing的作用什么是BFC?如何创建?有何应用?什么是重绘和回流?如何优化?Q:JS相关问题对Promise的理解Promise对象Promise语法代码Promise方法原型和原型链原型是什么?原型链是什么?二者有什么作用?new关键字都做了什么防抖......
  • ELK学习记录 - elasticsearch 7.9.1安装
    说明:以7.9.1版本为例,运行环境RockyLinuxrelease9.3elasticsearch下载:https://mirrors.huaweicloud.com/elasticsearch/7.9.1/elasticsearch-7.9.1-linux-x86_64.tar.gz解压:$tar-xfelasticsearch-7.9.1-linux-x86_64.tar.gz修改配置文件:$cdelasticsearch-7.9.1/$vi......
  • Linux学习记录13——shell脚本
    一.学习的内容    shell终端解释器提供了诸如循环、分支等高级编程语言才有的控制结构。shell脚本命令的工作方式有下面两种:    交互式:用户每输入一条命令就立即执行        批处理(Batch):由用户事先编写好一个完整的Shell脚本,Shell会一次性执行脚本......
  • vue2 defineComponent 自定义组件的强大功能
    完全可以通过向defineComponent()传入一个选项式API所定义的object,来定义一个组件,并包含各种响应式功能;如下About组件所示:<scriptsetup>import{ref,computed,defineComponent}from'vue'constHome=defineComponent({template:`<h1>Home</h1>`})constAbo......
  • Blazor学习记录四_表单和验证___
    12.表单和验证表单几件套——EditForm组件验证特性标签或说注解[Required]命名空间System.ComponentModel.DataAnnotations其作用在模型类的属性前面。绑定模型,即组件参数Model="Instance"(一般是一个class对象)验证器子组件<DataAnnotationsValidator/>验证结果子组......