位置: IT常识 - 正文

关于vue2与vue3(vue2和vue3的兼容)

编辑:rootadmin
关于vue2与vue3 Vue组件之间通信方式有哪些

推荐整理分享关于vue2与vue3(vue2和vue3的兼容),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue2和vue3的区别大不,vue2和vue3的兼容,vue2与3的区别,vue2和vue3的兼容,vue2和3,vue2与vue3 diff,vue2与vue3 diff,vue2与vue3的区别,内容如对您有帮助,希望把文章链接给更多的朋友!

vue是组件化开发框架,所以对于vue应用来说组件间的数据通信非常重要。

1. 组件通信常用方式有以下8种:

props

$emit/$on

$children/$parent

$attrs/$listeners

ref

$root

eventbus

vuex

注意vue3中废弃的几个API

在vue3中废除$children

移除$listeners

$on、$off和$once实例方法被移除

2.根据组件之间关系讨论组件通信最为清晰有效

父子组件

props / $emit / $parent / ref / $attrs

兄弟组件

$parent / $root / eventbus / vuex

跨层级关系

eventbus / vuex / provide + inject

v-if和v-for优先级问题

文档中曾有详细说明v2|v3;

v2中文文档地址https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81

 v3中文文档地址https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for

实践中不应该把v-for和v-if放一起

在vue2中,v-for的优先级是高于v-if,把它们放在一起,输出的渲染函数中可以看出会先执行循环再判断条件,哪怕我们只渲染列表中一小部分元素,也得在每次重渲染的时候遍历整个列表,这会比较浪费;另外需要注意的是在vue3中则完全相反,v-if的优先级高于v-for,所以v-if执行时,它调用的变量还不存在,就会导致异常

通常有两种情况下导致我们这样做:

为了过滤列表中的项目 (比如 v-for="user in users" v-if="user.isActive" )。此时定义一个计算属性 (比如 activeUsers ),让其返回过滤后的列表即可(比如users.filter(u=>u.isActive) )。

为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers" )。此时把 v-if 移动至容器元素上 (比如 ul 、 ol )或者外面包一层 template 即可。

文档中明确指出永远不要把 v-if 和 v-for 同时用在同一个元素上,显然这是一个重要的注意事项。

源码里面关于代码生成的部分,能够清晰的看到是先处理v-if还是v-for,顺序上vue2和vue3正好相反,因此产生了一些症状的不同,但是不管怎样都是不能把它们写在一起的。

知其所以然:

v2源码

if (el.staticRoot && !el.staticProcessed) { return genStatic(el, state) } else if (el.once && !el.onceProcessed) { return genOnce(el, state) } else if (el.for && !el.forProcessed) { return genFor(el, state) } else if (el.if && !el.ifProcessed) { return genIf(el, state) } else if (el.tag === 'template' && !el.slotTarget && !state.pre) { return genChildren(el, state) || 'void 0' } else if (el.tag === 'slot') { return genSlot(el, state) }

JavaScript

v3源码

switch(node.type){case NodeTypes.ELEMENT:case NodeTypes.IF:case NodeTypes.FOR;__DEV__&&assert(node.codegenNode != null,`Codegen node is missing for element/if/for node. `+`Apply appropriate transforms first.`)genNode(node.codegenNode!, context)break}

JavaScript

Vue的生命周期以及每个阶段做的事情

1.每个Vue组件实例被创建后都会经过一系列初始化步骤,比如,它需要数据观测,模板编译,挂载实例到dom上,以及数据变化时更新dom。这个过程中会运行叫做生命周期钩子的函数,以便用户在特定阶段有机会添加他们自己的代码。

2.Vue生命周期总共可以分为8个阶段:创建前后, 载入前后, 更新前后, 销毁前后,以及一些特殊场景的生命周期。vue3中新增了三个用于调试和服务端渲染场景。

生命周期V2

生命周期V3

描述

beforeCreate

beforeCreate

组件实例被创建之初

created

created

组件实例已经完全创建

beforeMount

beforeMount

组件挂载之前

mounted

mounted

组件挂载到实例上去之后

beforeUpdate

beforeUpdate

组件数据发生变化,更新之前

updated

updated

数据数据更新之后

关于vue2与vue3(vue2和vue3的兼容)

beforeDestroy

beforeUnmounted

组件实例销毁之前

destroyed

unmounted

组件实例销毁之后

生命周期V2

生命周期V3

描述

activated

activated

keep-alive 缓存的组件激活时

deactivated

deactivated

keep-alive 缓存的组件停用时调用

errorCaptured

errorCaptured

捕获一个来自子孙组件的错误时被调用

-

renderTracked

调试钩子,响应式依赖被收集时调用

-

renderTriggered

调试钩子,响应式依赖被触发时调用

-

serverPrefetch

ssr only,组件实例在服务器上被渲染前调用

生命周期流程图:

 

结合实践:

beforeCreate:通常用于插件开发中执行一些初始化任务。

created:组件初始化完毕,可以访问各种数据,获取接口数据等。

mounted:dom已创建,可用于获取访问数据和dom元素;访问子组件等。

beforeUpdate:此时 view 层还未更新,可用于获取更新前各种状态。

updated:完成 view 层的更新,更新后,所有状态已是最新。

beforeunmounted:实例被销毁前调用,可用于一些定时器或订阅的取消。

unmounted:销毁一个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器。

注意 :

setup执行时间比created更早 为了兼容vue2、 beforeCreate 和 created 在vue3中可以正常使用,但是不能在setup 中 写 onbeforeCreate 以及 created

Vue双向绑定+响应式原理

数据的变化影响了试图 试图的变化影响了数据 这就是mvvm

原理

mvvm是通过数据劫持实现的,通过Object.defineProperty(),通过对各个属性进行一个getter,setter进行一个监听,当数据发生变化的时候通知订阅者,触发回调函数,更新试图。

数据劫持

mvvm 是一个类 通过Observer (劫持监听所有属性、setter)在通过Watcher(观察者模式)通知变化,在通过添加订阅者,再更新试图。 最后通过Compile解析指令。

指令解析器---------Compile

数据监听器--------Observer

更新试图-----------Watcher

vue是采用数据劫持配合发布者-订阅者模式的方式,通过Object.definerProperty()来劫持各个属性的setter 和 getter ,在数据变动时,发布消息给依赖收集器,去通知观察者更新,做出对应的回调函数,去更新试图。

MVVM 作为绑定的入口,整合了Observer,Compile 和Watcher 三者,通过Observer来监听model 数据变化表,通过Compile 来解析编译模版指令,最终利用Watcher搭起Observer 和Compile 之间的通信桥梁。达到数据变化去影响试图的更新,试图交互变化影响数据model变更的双向绑定效果

MVVM框架中要解决的一个核心问题是连接数据层和视图层,通过数据驱动应用,数据变化,视图更新,要做到这点的就需要对数据做响应式处理,这样一旦数据发生变化就可以立即做出更新处理。

以vue为例说明,通过数据响应式加上虚拟DOM和patch算法,开发人员只需要操作数据,关心业务,完全不用接触繁琐的DOM操作,从而大大提升开发效率,降低开发难度。

vue2中的数据响应式会根据数据类型来做不同处理,如果是对象则采用Object.defineProperty()的方式定义数据拦截,当数据被访问或发生变化时,我们感知并作出响应;如果是数组则通过覆盖数组对象原型的7个变更方法,使这些方法可以额外的做更新通知,从而作出响应。这种机制很好的解决了数据响应化的问题,但在实际使用中也存在一些缺点:比如初始化时的递归遍历会造成性能损失;新增或删除属性时需要用户使用Vue.set/delete这样特殊的api才能生效;对于es6中新产生的Map、Set这些数据结构不支持等问题。

为了解决这些问题,vue3重新编写了这一部分的实现:利用ES6的Proxy代理要响应化的数据,它有很多好处,编程体验是一致的,不需要使用特殊api,初始化性能和内存消耗都得到了大幅改善;另外由于响应化的实现代码抽取为独立的reactivity包,使得我们可以更灵活的使用它,第三方的扩展开发起来更加灵活了。

nextTick的用法和原理

nextTick是用于获取下次DOM更新刷新的使用函数。

Vue有个异步更新策略,意思是如果数据变化,Vue不会立刻更新DOM,而是开启一个队列,把组件更新函数保存在队列中,在同一事件循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在DOM上,此时如果想要获取更新后的DOM状态,就需要使用nextTick。

开发时,比如我希望获取列表更新后的高度就可以通过nextTick实现。

nextTick签名如下: function nextTick(callback?: () => void): Promise<void> 所以我们只需要在传入的回调函数中访问最新DOM状态即可,或者我们可以await nextTick方法返回的Promise之后做这件事。

在Vue内部,nextTick之所以能够让我们看到DOM更新后的结果,是因为我们传入的callback会被添加到队列刷新函数(flushSchedulerQueue)的后面,这样等队列内部的更新函数都执行之后,所有DOM操作也就结束了,callback自然能够获取到最新的DOM值。

剑飞csdn博客附加$set

watch和computed的区别

计算属性可以从组件数据派生出新数据,最常⻅的使用方式是设置一个函数,返回计算之后的结果,computed和methods的差异是它具备缓存性,如果依赖项不变时不会重新计算。侦听器可以侦测某个响应式数据的变化并执行副作用,常⻅用法是传递一个函数,执行副作用,watch没有返回值,但可以执行异步操作等复杂逻辑。

计算属性常用场景是简化行内模板中的复杂表达式,模板中出现太多逻辑会是模板变得臃肿不易维护。侦听器常用场景是状态变化之后做一些额外的DOM操作或者异步操作。选择采用何用方案时首先看是否需要派生出新值,基本能用计算属性实现的方式首选计算属性。

使用过程中有一些细节,比如计算属性也是可以传递对象,成为既可读又可写的计算属性。watch可以传递对象,设置deep、immediate等选项。

vue3中watch选项发生了一些变化,例如不再能侦测一个点操作符之外的字符串形式的表达式; reactivityAPI中新出现了watch、watchEffect可以完全替代目前的watch选项,且功能更加强大。

本文链接地址:https://www.jiuchutong.com/zhishi/300610.html 转载请保留说明!

上一篇:你知道Object类和Objects的常用方法吗(object的类有哪些)

下一篇:web3:区块链常见的几大共识机制及优缺点(区块链网站模板)

  • iPhoneX怎么关闭程序 iPhoneX新手势的使用方法(iphonex怎么关闭锁屏密码)

    iPhoneX怎么关闭程序 iPhoneX新手势的使用方法(iphonex怎么关闭锁屏密码)

  • 微博怎么关闭视频自动播放功能(微博怎么关闭视频弹幕)

    微博怎么关闭视频自动播放功能(微博怎么关闭视频弹幕)

  • 华为mate30pro有北斗导航吗(华为mate30pro支不支持北斗导航)

    华为mate30pro有北斗导航吗(华为mate30pro支不支持北斗导航)

  • 荣耀v20什么时候更新emui10(荣耀v20什么时候能升级鸿蒙2.0)

    荣耀v20什么时候更新emui10(荣耀v20什么时候能升级鸿蒙2.0)

  • 华为p20原装充电器型号是(华为手机p20原装充电器)

    华为p20原装充电器型号是(华为手机p20原装充电器)

  • 微信怎样使用共享单车(微信怎样使用共享屏幕)

    微信怎样使用共享单车(微信怎样使用共享屏幕)

  • 平板id账号密码忘了(平板id账号密码忘了重新注册一个能用吗)

    平板id账号密码忘了(平板id账号密码忘了重新注册一个能用吗)

  • vivo手机拦截短信在哪里找(vivo手机的拦截短信,在哪儿找)

    vivo手机拦截短信在哪里找(vivo手机的拦截短信,在哪儿找)

  • 微信设置了仅聊天还能看到朋友圈吗(微信设置了仅聊天可以打语音视频吗)

    微信设置了仅聊天还能看到朋友圈吗(微信设置了仅聊天可以打语音视频吗)

  • 飞行模式可以上网吗(飞行模式可以上抖音国际版吗)

    飞行模式可以上网吗(飞行模式可以上抖音国际版吗)

  • 一般哪里可以刻光盘(一般哪里可以刻章子)

    一般哪里可以刻光盘(一般哪里可以刻章子)

  • 苹果手机硬解后的坏处(苹果手机硬解后失主能定位到吗)

    苹果手机硬解后的坏处(苹果手机硬解后失主能定位到吗)

  • 华为手机带红外遥控吗(华为手机带红外线有几种)

    华为手机带红外遥控吗(华为手机带红外线有几种)

  • 直播没声音怎么回事(直播没声音怎么弄出来)

    直播没声音怎么回事(直播没声音怎么弄出来)

  • 苹果手机看视频卡顿是什么原因(苹果手机看视频没有声音怎么回事)

    苹果手机看视频卡顿是什么原因(苹果手机看视频没有声音怎么回事)

  • col al10是什么型号(cor al10是什么型号)

    col al10是什么型号(cor al10是什么型号)

  • 存储器可分为哪两类(存储器可分为哪三类答案)

    存储器可分为哪两类(存储器可分为哪三类答案)

  • iphonex来电闪光灯怎么设置(iphonex来电闪光灯)

    iphonex来电闪光灯怎么设置(iphonex来电闪光灯)

  • 华为手机支付保护中心在哪里(华为手机支付保护中心需要开启吗)

    华为手机支付保护中心在哪里(华为手机支付保护中心需要开启吗)

  • 趣头条手机怎么拍视频(趣头条手机怎么关闭)

    趣头条手机怎么拍视频(趣头条手机怎么关闭)

  • 怎样删除qq音乐云端记录(怎样删除qq音乐里的最近常听的音乐)

    怎样删除qq音乐云端记录(怎样删除qq音乐里的最近常听的音乐)

  • 做淘宝客需要什么软件(店铺做淘宝客要花钱吗)

    做淘宝客需要什么软件(店铺做淘宝客要花钱吗)

  • 现代操作系统的两个基本特征是资源共享和(现代操作系统的两个重要特征包括)

    现代操作系统的两个基本特征是资源共享和(现代操作系统的两个重要特征包括)

  • ps不能保存ram内存不够(ps不能存储为jpg怎么解决)

    ps不能保存ram内存不够(ps不能存储为jpg怎么解决)

  • 快手为什么显示x作品(快手为什么显示暂无浏览记录)

    快手为什么显示x作品(快手为什么显示暂无浏览记录)

  • 红米k20pro有光学防抖吗(红米k20pro有光学变焦吗)

    红米k20pro有光学防抖吗(红米k20pro有光学变焦吗)

  • 时光相册怎么导出照片(时光相册怎么导出照片到另外的手机)

    时光相册怎么导出照片(时光相册怎么导出照片到另外的手机)

  • 北京增值税发票查验平台
  • 离境退税政策文件
  • 工资个人所得税标准表
  • 独立法人有什么风险
  • 股东退股退本金及利润
  • 间接费包含哪些具体内容
  • 股权转让与增资扩股的税务
  • 仓库缺货怎么处理
  • 现金折扣税务筹划
  • 递延所得税如何计算
  • 个人独资的企业性质是什么
  • 营改增后企业所得税
  • 2017年金税盘服务费已全额减免,勾选系统怎么处理
  • 增值税计入无形资产的入账价值吗?
  • 差额征税的差额怎么算
  • 红冲发票地址不一样可以吗
  • 企业的筹建期间
  • 同一控制下企业合并商誉
  • 1697509439
  • 支付给董事的董事费怎么征收个人所得税?
  • 个人股票期权收益所得税怎么缴纳?
  • 台式电脑机箱怎么选
  • 企业从政府取得的经济资源均应当
  • php statement
  • 给予减免
  • ghost打开
  • 穆尔官网
  • 存货的核算方法一次可以选用几个
  • 实际交印花税会计分录
  • wordpress添加css
  • 广告代理费收取比例
  • 小程序开发公司十大排名
  • bounded linear functional
  • 企业怎么可以合理避税?
  • 如何解决php乱码
  • 新企业所得税实施细则
  • 勘察设计费怎么入账
  • 以固定资产抵债发生的固定资产
  • 个人所得税经营所得
  • 注销的公司需要清算吗
  • mysql常用表
  • 核定征收企业所得税应税所得率
  • 个人股权转让需要评估吗
  • 租赁合同的印花税怎么交
  • 人员招聘费用预算
  • 以非现金资产抵偿债务
  • 交易性金融资产的账务处理
  • 电梯改造税率
  • 福利企业增值税退税标准
  • 政府补助的会计准则
  • 确认收入时,也必须确认资产或债务
  • 发票联遗失的证明怎么开
  • 同一张发票报销两次会被发现吗
  • 个体户一个月能赚多少钱
  • 在固定资产下的折旧年限
  • 工程与会计
  • 劳务费需要通过应付职工薪酬科目核算吗
  • 公司增资需要什么流程呢 最新
  • 原始凭证书写要求
  • sql修改表的所属空间
  • bios设置bios密码
  • 怎么远程登录另一台电脑
  • mac计算器怎么用
  • win10mobile下载官网
  • windows8如何使用
  • win10系统开机重装教程
  • jquery实现回到顶部
  • android自定义控件入门与实战
  • Cocos2dx 疯狂跑酷(CrazyRun)游戏项目解析
  • jquery prevall
  • Python 正则表达式实现计算器功能
  • nodejs使用express
  • javascript数组的常用方法
  • js判断当前页面是否为空
  • 安卓 触摸屏
  • 微信气泡png
  • 上海个人所得税税率表2023
  • 重庆国税官网网址
  • 马达加斯加秒懂百科
  • 深圳沙井社保局在哪个位置
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设