Vue 2升级 Vue 3初探小细节
前言
嗯,偶尔看看学习Vue 3技能啦,此前用过Vue 2做过一点东西,Vue 3已面世一段时间,于是乎,我来看看所遇到的问题是否在Vue 3中得到解决,首先,我们来讲讲一个例子在Vue 2中的实现,举个栗子吧,开发过程中我们只会用到省、市、区,这里的区也可以看做是三、四线城市中的县,若我们想要基于县动态创建镇、村,更有甚者,在全国各地在镇下还划分不同的区域,我们通过Vue结合ElementUI来实现此例子
Vue 2 + ElementUI
由于示例代码比较多,这里我们首先直接看效果,如下:
具体代码如下所示,太多?忽略不看,我们只讲解核心问题
<el-dialog :modal="dialogModal" :title="townTitle" @close="closeDialog" :visible.sync="dialogVisible" :close-on-click-modal="false" width="800px" top="10vh" center>
<el-row>
<el-form label-width="40px" ref="form" size="mini">
<el-form-item>
<el-button size="small" @click="createMultipleTown" icon="el-icon-plus">添加镇</el-button>
</el-form-item>
<el-form-item v-for="(town, tindex) in form.towns" :key="tindex" style="border: 1px dashed #AAAAAA;margin:10px 0 20px 0;">
<el-row style="margin:20px 0 20px 0;">
<el-col :span="19">
<el-button type="danger" size="small" icon="el-icon-delete" @click="removeTown(tindex)">移除镇</el-button>
</el-col>
</el-row>
<el-row style="margin:20px 0 20px 0;">
<el-col :span="4">
镇名称
</el-col>
<el-col :span="19">
<el-input maxlength="30" v-model="town.townName" placeholder="请输入镇名称"></el-input>
</el-col>
</el-row>
<el-row style="margin-bottom:20px;">
<el-col :span="4">
区域、村
</el-col>
<el-col :span="20">
<el-radio-group v-model="town.option">
<el-radio @change="dynamicAddRegion(tindex)" label="添加区域"></el-radio>
<el-radio label="添加村" @change="dynamicAddVillage(tindex)"></el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row v-for="(region, rindex) in town.regions" :key="rindex" style="margin-bottom:20px;">
<el-row>
<el-col :span="4">
{{region.regionTitle}}
</el-col>
<el-col :span="5" style="margin-right:20px;" v-show="town.townRegionVisible">
<el-input size="small" maxlength="30" v-model="region.regionName" placeholder="请输入区域名称"></el-input>
</el-col>
<el-col :span="5" style="margin-right:20px;">
<el-tooltip class="item" effect="dark" content="输入村名称并回车,即可连续添加" placement="top">
<el-input size="small" maxlength="30" v-model="region.villageName" @keyup.enter.native="getVillage(tindex, rindex)" placeholder="请输入村名称"></el-input>
</el-tooltip>
</el-col>
<el-col :span="5" v-show="!town.townRegionVillageVisible">
<el-button size="small" icon="el-icon-plus" @click="continueAddRegion(tindex)">追加区域</el-button>
</el-col>
<el-col :span="3" v-show="!town.townRegionVillageVisible" style="width:100px;">
<el-button size="small" type="danger" icon="el-icon-delete" @click="removeRegion(tindex, rindex)">移除区域</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<span> </span>
</el-col>
<el-col :span="20">
<el-tag :key="tagindex" v-for="(tag, tagindex) in region.tags" closable :disable-transitions="false" style="margin:10px 10px 0 0;" @close="handleClose(tindex, rindex, tagindex)">
{{tag}}
</el-tag>
</el-col>
</el-row>
</el-row>
</el-form-item>
</el-form>
</el-row>
<el-row v-show="saveButtonVisible">
<el-col :span="20">
<span> </span>
</el-col>
<el-col :span="2">
<el-button @click="save" type="primary">确定</el-button>
</el-col>
<el-col :span="1">
<el-button @click="cancel">取消</el-button>
</el-col>
</el-row>
</el-dialog>
直接看如下定义数据结构可得知,存在三层遍历,第一层遍历从镇开始,第二层遍历从镇下区域开始,最后一层遍历则是区域下的村(即上述标签)
form: {
areaId: 0,
towns: [
{
townName: '',
regions: [{
regionTitle: '',
regionName: '',
villageName: '',
tags: []
}]
}
]}
在Vue 2中一直存在的问题则是无法监听数组,若我没记错的话,Vue 2是通过Object.defineProperty()来监听对象,也就是后台语言中对应的属性get和set方法。结合上述示例图和代码,当我们输入村名称时,然后回车,则将村名称添加到村数组中去,然后通过el-tag标签进行遍历渲染
接下来问题来了,此时我们想要删除村,所以点击村标签的删除图标,毫无疑问直接将区域下的村数组通过索引将其移除即可,但是,但是,根本无法移除,因为此时区域下的村是一个数组,Vue 2无法监听得到,也就是我们在数组中给对应村移除时,但页面上无法同步删除,移除方法如下:
handleClose (tindex, rindex, tagindex) {
let self = this
let region = self.form.towns[tindex].regions[rindex]
region.tags.splice(tagindex, 1)
}
那么在Vue 2中如何解决这个问题呢?根据我们的示例来看,我们将输入的村名称即文本框绑定回车事件,然后将文本框绑定的模型数据添加到村数组中去,所以此时我们假装先再次在文本框上绑定一个“占位符”,然后紧接着将其置空,给Vue 2一种“错觉”刚才的数据没绑定上,所以上述删除标签方法,变成如下即可解决:
handleClose (tindex, rindex, tagindex) {
let self = this
let region = self.form.towns[tindex].regions[rindex]
region.tags.splice(tagindex, 1)
// 添加文本准备添加“一个占位符”,以便于页面上能删除标签
region.villageName = '占位符'
region.villageName = ''
}
Vue 3 + ElementPlus
空闲之余,试了试Vue 3结合ElementPlus,这个问题得到了解决,在Vue 3中通过proxy(代理)方式监听所有属性,当然也就包括数组,然后在Vue 3中相关键盘事件等,比如回车,都已通过v-on:key.enter来绑定事件实现
总结
本文也是做做小demo遇到的问题,特此记录下,其他倒没什么可以说的了,再会~~~~
Vue 2升级 Vue 3初探小细节的更多相关文章
- Vue.js 和 MVVM 的小细节
Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- 如何快速把 Vue 项目升级到 webpack3
由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue + ajax + php 接口的使用小接
vue + ajax + php 接口的使用小接 前端代码: (获取用户信息,并渲染页面) userinfor.html <!DOCTYPE html> <html lang=&qu ...
- 升级vue全家桶过程记录
背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...
- Vue框架——页面组件中使用小组件
小组件在components文件夹中,页面组件在views文件夹中 一.先写小组件的vue,比如text.vue(在template设置模板渲染,style设置样式) <template> ...
- Vue报错 [Vue warn]: Cannot find element
在前端开发全面进入前端的时代 作为一个合格的前端开发工作者 框架是不可或缺的Vue React Anguar 作为前端小白,追随大佬的脚步来到来到博客园,更新现在正在学习的Vue 注 : 相信学习Vu ...
随机推荐
- string大小写转换
string大小写转换 源码: 1 #include <string> 2 #include <iostream> 3 #include <algorithm> 4 ...
- 07:JS(03)
BOM与DOM操作 # 截至目前为止 我们虽然已经学会了js语法 但是你会发现跟浏览器和html文件还是一点关系没有 """ BOM 浏览器对象模型 Browser Ob ...
- ES6中的Map
今天小编和大家一起探讨一下引用类型中的map,在其中会有一些map与数组联合应用,还有和map类似的weakmap类型的说明,这篇文章同时也增加了一些操作数组的办法和实际应用.大家也可以关注我的微信公 ...
- MySQL:数据库优化,看这篇就够了
数据库优化一方面是找出系统的瓶颈,提高MySQL数据库的整体性能,而另一方面需要合理的结构设计和参数调整,以提高用户的相应速度,同时还要尽可能的节约系统资源,以便让系统提供更大的负荷. 1. 优化一览 ...
- 从架构师角度谈谈mybatis-plus可能存在的问题
存在这么一个情况:对于缺营养的人来说,医生更倾向于建议他选择纯牛奶,而不是有机奶(因其有添加剂).然而,大部分人却更加倾向于选择有机奶, 因其口感不错,因此,对于选择纯牛奶还是有机奶,这是个博弈问题. ...
- 裸辞闭关2个月,成功进大厂!吃透这份562页《算法知识手册》,化身offer收割机!
前言 记得我上本科的时候,我们老师一直跟我们强调:"算法才是编程的灵魂,一定要把算法学好."因为不管你是Java编程爱好者.还是python的忠实粉丝,亦或觉得PHP才是这个世界最 ...
- 基于ABP落地领域驱动设计-03.仓储和规约最佳实践和原则
目录 系列文章 仓储 仓储的通用原则 仓储中不包含领域逻辑 规约 在实体中使用规约 在仓储中使用规约 组合规约 学习帮助 围绕DDD和ABP Framework两个核心技术,后面还会陆续发布核心构件实 ...
- redis淘汰+过期双向保证高可用 | redis 为什么那么快?
前言 redis和数据相比除了他们的结构型颠覆以外!还有他们存储位置也是不相同.传统数据库将数据存储在硬盘上每次数据操作都需要IO而Redis是将数据存储在内存上的.这里稍微解释下IO是啥意思.IO就 ...
- excel VBA中正则模块vbscript.regexp的用法
一.是一个对象,用于执行 正则表达式! 二.有三个属性: 1. Global属性: True or False, 指明模式是匹配整个字符串中所有与之相符的地方还是只匹配第一次出现的地方.默认 ...
- 《手把手教你》系列技巧篇(六)-java+ selenium自动化测试-阅读selenium源码(详细教程)
1.简介 前面几篇基础系列文章,足够你迈进了Selenium门槛,再不济你也至少知道如何写你第一个基于Java的Selenium自动化测试脚本.接下来宏哥介绍Selenium技巧篇,主要是介绍一些常用 ...