技术标签: vue 前端 vue.js javascript
目录
尽管现在 Vue3 是默认版本,但还有许多用户、相关库、周边生态使用的是 Vue2,且由于依赖兼容性、浏览器支持要求或没有足够的带宽升级,导致不得不继续使用 Vue2。难道 Vue3 发布了这么多“真香”的特性,我们 Vue2 的用户与项目就只能眼巴巴地看着?当然不是!有一个好消息是,前两天 Vue2.7 正式发布了。在此版本中,从 Vue3 向后移植了一些最重要的功能,以便 Vue2 用户也可以从中受益。
在 Vue2.7 中,Vue3 的很多功能将会向后移植,以便于 Vue2 的很多项目可以使用 Vue3 的一些很好用的新特性,例如:
Composition API (组合式 API)
SFC <script setup> (单文件组件 <script setup>)
SFC CSS v-bind (单文件组件 CSS 中的 v-bind)
此外,还支持以下 API:
defineComponent()
:具有改进的类型推断(与Vue.extend
相比);
h()
、useSlot()
、useAttrs()
、useCssModules()
;
set()
、del()
和 nextTick()
在 ESM 构建中也作为命名导出提供;
支持 emits
,但仅用作类型检查用途(不影响运行时行为)。
Vue2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时,编译后的模板渲染函数将通过为普通 JavaScript 配置的相同 loaders / plugins
。这意味着如果为.js
文件配置了 Babel,它也将应用于 SFC 模板中的表达式。
现在你终于可以在模版里面用可选链 formData?.userInfo?.userId
,而不用写一长串 &&
,也可以直接使用零合并操作符 ??
来给变量赋一个默认值了,而不需要用可能导致 bug 的或 ||
。
注意:在 ESM 构建中,这些 API 作为命名导出提供(仅限于命名导出)
import { ref, reactive } from 'vue'
而在 UMD 和 CJS 构建中,这些 API 作为全局 Vue 对象上的属性暴露。
Composition API 使用 Vue2 的基于 getter/setter
的响应式系统进行反向移植,以确保浏览器兼容性。这意味着与 Vue3 的基于 proxy
的系统存在一些重要的行为差异:
所有 Vue2 更改检测警告仍然适用;
reactive()
、ref()
和 shallowReactive()
将直接转换原始对象而不是创建代理:
// 在2.7中可行,在3.x中不可行
reactive(foo) === foo
readonly()
确实创建了一个单独的对象,但它不会跟踪新添加的属性并且不适用于数组;
避免在 reactive()
中使用数组作为 root
值,因为如果没有属性访问,则不会跟踪数组的变化(这将导致警告);
Reactivity APIs 忽略带有 symbol
键的属性。
此外,以下功能是未移植的:
createApp()
(Vue2 没有独立的应用范围)
<script setup>
中的顶层 await(Vue2 不支持异步组件初始化)
模板表达式中的 TypeScript 语法(与 Vue2 解析器不兼容)
Reactivity transform(仍处于试验阶段)
options
组件不支持 expose
选项(但 <script setup>
支持 defineExpose()
)。
使用脚手架 Vue Cli 或者构建工具 Webpack 搭建的项目,需注意一下几点:
(1)将本地 @vue/cli-xxx
依赖项升级到主要版本范围内的最新版本(如果适用)
对于 v4:~4.5.18
对于 v5:~5.0.6
(2)将 Vue 升级到 ^2.7.0。还可以从依赖项中删除 vue-template-compiler
,因为在 2.7 中不再需要它。注意:如果正在使用 @vue/test-utils
,可能需要暂时将它保留在依赖项中,但是这个要求也将在新版本的 Test Utils 中被取消。
原 ^2.6.14 项目
编辑 package.json,升级为 ^2.7.0,删除 vue-template-compiler
(3)检查包管理器 lock
文件以确保以下依赖项满足版本要求。它们可能是 package.json
中未列出的传递依赖项:
vue-loader: ^15.10.0
vue-demi: ^0.13.1
如果没有,需要删除 node_modules
和 lock
文件并重新安装,以确保它们升级到最新版本。
(4)如果之前使用过 @vue/composition-api
,请将其导入更新为 vue。注意,插件导出的一些 API,例如 createApp
,未在 2.7 中移植。
(5)如果在使用 <script setup>
时遇到未使用的变量的 lint
错误,请将 eslint-plugin-vue
更新到最新版本 (9+)。
(6)Vue 2.7 的 SFC 编译器现在使用 PostCSS8。PostCSS8 应该向后兼容大多数插件,但如果以前使用只能与 PostCSS7 一起使用的自定义 PostCSS 插件,升级可能会导致问题。在这种情况下,需要将相关插件升级到与 PostCSS8 兼容的版本。
尝试在项目使用 Vue3 特性
<template>
<div>
<h1 :style="styleObj">{
{ msg }}</h1>
<button @click="changeColor">切换颜色</button>
</div>
</template>
<script setup>
import { toRefs, reactive } from 'vue'
let props = defineProps({
msg: String
})
let { msg } = toRefs(props)
console.log(msg,'msg')
let styleObj = reactive({
color:'blue'
})
console.log(styleObj,'styleObj')
let changeColor = function(){
if(styleObj.color === 'blue'){
styleObj.color = 'red'
} else {
styleObj.color = 'blue'
}
}
</script>
控制台无报错,页面效果
控制台打印响应性变量
Vue2.7 是 Vue2.x 的最终次要版本。在这个版本之后,Vue2 进入了 LTS(长期支持),从现在开始持续 18 个月,并且将不再接收新功能。这意味着 Vue2 将在 2023 年底结束其生命周期。这应该为大多数生态系统迁移到 Vue3 提供充足的时间。
Vue2.7 的正式发布,预示着你在自己的 Vue2 项目中可以使用部分 Vue3 的特性了,赶紧试试吧!
文章浏览阅读6.9k次。WCE 下载地址:链接:https://share.weiyun.com/5MqXW47 密码:bdpqku工具界面_wce.exe -s aaa:win-9r7tfgsiqkf:00000000000000000000000000000000:a658974b892e
文章浏览阅读4.5k次。Weather Globe(Mackiev)Google Earth(Google)Virtual Earth(Microsoft)World Wind(NASA)Skyline Globe(Skylinesoft)ArcGISExplorer(ESRI)国内LTEarth(灵图)、GeoGlobe(吉奥)、EV-Globe(国遥新天地) 软件名称: 3D Weather Globe(http:/_网络地球仪
文章浏览阅读1.9w次,点赞113次,收藏57次。我要买这些东西,然后震惊整个办公室_程序员展示刀,产品经理展示枪
文章浏览阅读1.6w次,点赞7次,收藏63次。霍尔信号、编码器信号与电机转向从电机出轴方向看去,电机轴逆时针转动,霍尔信号的序列为编码器信号的序列为将霍尔信号按照H3 H2 H1的顺序组成三位二进制数,则霍尔信号翻译成状态为以120°放置霍尔为例如不给电机加电,使用示波器测量三个霍尔信号和电机三相反电动势,按照上面所说的方向用手转动电机得到下图① H1的上升沿对应电机q轴与H1位置电角度夹角为0°,..._霍尔信号
文章浏览阅读7.1k次,点赞5次,收藏36次。个人微信淘宝客返利机器人搭建一篇教程全搞定天猫淘宝有优惠券和返利,仅天猫淘宝每年返利几十亿,你知道么?技巧分享:在天猫淘宝京东拼多多上挑选好产品后,按住标题文字后“复制链接”,把复制的淘口令或链接发给机器人,复制机器人返回优惠券口令或链接,再打开天猫或淘宝就能领取优惠券啦下面教你如何搭建一个类似阿可查券返利机器人搭建查券返利机器人前提条件1、注册微信公众号(订阅号、服务号皆可)2、开通阿里妈妈、京东联盟、拼多多联盟一、注册微信公众号https://mp.weixin.qq.com/cgi-b_怎么自己制作返利机器人
文章浏览阅读2.1k次,点赞2次,收藏5次。技术分享时应秉持的基本原则:应有团队和个人、奉献者(统筹人)的概念,同时匹配团队激励、个人激励和最佳奉献者激励;团队应该打开工作内容边界,成员应该来自各内容方向;评分标准不应该过于模糊,否则没有意义,应由客观的基础分值以及分团队的主观综合结论得出。应有心愿单激励机制,促进大家共同聚焦到感兴趣的事情上;选题应有规范和框架,具体到某个小类,这样收获才有目标性,发布分享主题时大家才能快速判断是否是自己感兴趣的;流程和分享的模版应该有固定范式,避免随意的格式导致随意的内容,评分也应该部分参考于此;参会原则,应有_技术分享
文章浏览阅读1k次。在模板中,我们使用了标签,将由o2-view组件负责渲染,给o2-view传入了两个参数:app="内容管理数据"和name="所有信息",我们将在o2-view组件中使用这两个参数,用于展现“内容管理数据”这个数据应用下的“所有信息”视图。在o2-view组件中,我们主要做的事是,在vue组件挂载后,将o2的视图组件,再挂载到o2-view组件的根Dom对象。当然,这里我们要在我们的O2服务器上创建好数据应用和视图,对应本例中,就是“内容管理数据”应用下的“所有信息”视图。..._vue2 oa
文章浏览阅读222次。table是lua中非常重要的一种类型,有必要对其多了解一些。
文章浏览阅读549次,点赞30次,收藏9次。我们前面学习都有一个概念,被private封装的资源只能类内部访问,外部是不行的,但这个规定被反射赤裸裸的打破了。反射就像一面镜子,它可以清楚看到类的完整结构信息,可以在运行时动态获取类的信息,创建对象以及调用对象的属性和方法。
文章浏览阅读1.1k次,点赞35次,收藏12次。Logical Volume Manager,逻辑卷管理能够在保持现有数据不变的情况下动态调整磁盘容量,从而提高磁盘管理的灵活性/boot分区用于存放引导文件,不能基于LVM创建PV(物理卷):基于硬盘或分区设备创建而来,生成N多个PE,PE默认大小4M物理卷是LVM机制的基本存储设备,通常对应为一个普通分区或整个硬盘。创建物理卷时,会在分区或硬盘的头部创建一个保留区块,用于记录 LVM 的属性,并把存储空间分割成默认大小为 4MB 的基本单元(PE),从而构成物理卷。
文章浏览阅读379次,点赞7次,收藏10次。4、Dielecteic voltage-withstand test 介电耐压试验。1、Maximum output voltage test 输出电压试验。6、Resistance to crushing test 抗压碎试验。8、Push-back relief test 阻力缓解试验。7、Strain relief test 应变消除试验。2、Power input test 功率输入试验。3、Temperature test 高低温试验。5、Abnormal test 故障试验。
文章浏览阅读535次。镜像烧写说明_正点原子 imx6ull nand 烧录