当前位置: 首页 > news >正文

23.11.19日总结(vue2和vue3的区别,项目中期总结)

        经过昨天的中期答辩,其实可以看出来项目进度太慢了,现在是第十周,预计第十四周是终级答辩,在这段时间要把项目写完。

        前端要加上一个未登录的拦截器,后端加上全局的异常处理。对于饿了么项目的商品建表,之前建的表有很多问题,商品的口味规格加料之类的属性,不能直接像笛卡尔积一样,一个一个对应匹配,因为有些组合是不存在的,此时用一个spu表存商品的各种属性(口味,甜度),一个sku表存属性之间的链接关系。

spu:标准的商品单元,可以理解为这是一杯杨枝甘露,它属于生产过程中一个标准品,标准品在缺乏具体规格信息的时候是不能直接售卖的(除非这个产品只有一个规格,例如:只有大杯)

sku:最小的库存单元,这个商品的规格信息在生产的时候就已经确定了的,例如:这杯杨枝甘露有温度(加冰,少冰,常温),甜度(三分糖,五分糖,七分糖)和规格(中杯,大杯)的属性,并且商家没有中杯加冰这个组合。此时在数据库建表时和前端显示上面上做处理。

SpringBoot项目快速启动

对springBoot项目打包(执行Maven构建指令package)

mvn package

运行项目(执行启动指令)

java -jar springboot.jar

jar支持命令行启动需要依赖maven插件支持,请确认打包时是否具有SpringBoot对应的maven插件

 Windows端口被占用的情况

Vue2与Vue3的区别:

双向数据绑定原理不同

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

vue3使用了ES6的Proxy API对数据代理

API类型不同

vue2使用选项类型api,选项型api在代码里分割了不同的属性:data,computed,methods等。

vue3使用合成型api,新的合成型api能让我们使用方法来分割,相比于旧的api使用属性来分组,这样代码会更加简便和整洁。

定义数据变量和方法不同

vue2是把数据放入data中,在vue2中定义数据变量是data(){} ,创建的方法要在methods:{} 中。

vue3就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据:

  • 从vue引入reactive
  • 使用reactive() 方法来声明数据为响应性数据;
  • 使用setup()方法来返回我们的响应性数据,从而template可以获取这些响应性数据。

生命周期的钩子不同

vue2中的生命周期

  • beforeCreate 组件创建之前
  • created 组件创建之后
  • beforeMount 组价挂载到页面之前执行
  • mounted 组件挂载到页面之后执行
  • beforeUpdate 组件更新之前
  • updated 组件更新之后

vue3中的生命周期

  • setup 开始创建组件
  • onBeforeMount 组价挂载到页面之前执行
  • onMounted 组件挂载到页面之后执行
  • onBeforeUpdate 组件更新之前
  • onUpdated 组件更新之后

父子传参不同

父传子,用props,子传父用事件 Emitting Events。

vue2中,会调用this$emit然后传入事件名和对象。

vue3中的setup()中的第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

main.js文件不同

vue2中我们可以使用pototype(原型) 的形式去进行操作,引入的是构造函数

vue3中需要使用结构的形式进行操作,引入的是工厂函数;vue3中app组件中可以没有根标签

相关文章:

  • ARCGIS网络分析
  • C#WPF数据模板应用实例
  • -bash: jps: command not found
  • ESP01S通过心知天气获取天气和时间信息
  • Git 提交竟然还能这么用?
  • 第十七篇-Awesome ChatGPT Prompts-备份-百度翻译
  • RHCSA --- Linux存储管理
  • 设计模式—结构型模式之外观模式(门面模式)
  • JOSEF 同步检查继电器 JT-1 额定电压100V 柜内固定安装,板前接线
  • 【数据结构初阶】单链表SLlist
  • 3 redis实现一个消息中间件
  • “我“摸爬滚打5年,干了测试工程师,现在测试怎么样了...
  • Spark数据倾斜_产生原因及定位处理办法_生产环境
  • 多视图聚类的论文阅读(一)
  • “绵柔的,好喝的”海之蓝畅销20年的经典秘诀:做大众喜爱的好酒
  • __proto__ 和 prototype的关系
  • Angular Elements 及其运作原理
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • HTTP中的ETag在移动客户端的应用
  • iOS 颜色设置看我就够了
  • JavaScript 事件——“事件类型”中“HTML5事件”的注意要点
  • Js基础——数据类型之Null和Undefined
  • npx命令介绍
  • rabbitmq延迟消息示例
  • Redash本地开发环境搭建
  • spring boot 整合mybatis 无法输出sql的问题
  • Vue ES6 Jade Scss Webpack Gulp
  • Work@Alibaba 阿里巴巴的企业应用构建之路
  • 彻底搞懂浏览器Event-loop
  • 搞机器学习要哪些技能
  • 关于使用markdown的方法(引自CSDN教程)
  • 精彩代码 vue.js
  • 面试题:给你个id,去拿到name,多叉树遍历
  • 前端自动化解决方案
  • 数组的操作
  • 算法系列——算法入门之递归分而治之思想的实现
  • 微信小程序:实现悬浮返回和分享按钮
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 写给高年级小学生看的《Bash 指南》
  • 新书推荐|Windows黑客编程技术详解
  • 正则表达式小结
  • 中文输入法与React文本输入框的问题与解决方案
  • 深度学习之轻量级神经网络在TWS蓝牙音频处理器上的部署
  • Linux权限管理(week1_day5)--技术流ken
  • ​低代码平台的核心价值与优势
  • # 安徽锐锋科技IDMS系统简介
  • # 深度解析 Socket 与 WebSocket:原理、区别与应用
  • #在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • (1)(1.13) SiK无线电高级配置(五)
  • (Git) gitignore基础使用
  • (k8s中)docker netty OOM问题记录
  • (MIT博士)林达华老师-概率模型与计算机视觉”
  • (ZT)北大教授朱青生给学生的一封信:大学,更是一个科学的保证
  • (附源码)php投票系统 毕业设计 121500