开发流程及vue的相关原理

简介: 开发流程及vue的相关原理



七十六、Vue-cli 项目目录结构

 

七十七、开发流程

        产品提出需求--  画出原型图--  需求评审会议--  安排工期(各部门制定)---   UI  设计图--  前端开发--  后端开发(顺序不一定)-- -  测试阶段--  上线---  回测里 程碑小结--->维护项目


七十八、Vue 的 nextTick 的原理是什么?

       1. 为什么需要 nextTick  ,Vue 是异步修改 DOM 的并且不鼓励开发者直 接接触 DOM,但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理, 这时候就可以使用 Vue.nextTick(callback)这个 api 了。


       2. 理解原理前的准备    首先需要知道事件循环中宏任务和微任务这两个  概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(),  MutationObserver;


       3. 理解 nextTick 的原理正是 Vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码,会发现其中 做了很多 isNative()的判断, 因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑,对性能的良苦用心。


七十九、如何对 Vue 首屏加载实现优化?

       1、把不常改变的库放到 index.html 中,通过 cdn 引入


       2、Vue 路由的懒加载


       3、不生成 map 文件


       4、Vue 组件尽量不要全局引入


       5、使用更轻量级的工具库


       6、开启 gzip 压缩


       7、首页单独做服务端渲染


八十、 Vue 中操作 data 中数组的方法中哪些可以触发视图更新,哪些不可以,不可以的话有什么解决办法?

       push()、pop()、shift()、unshift()、splice()、sort()、reverse()这些 方法会改变被操作的数组;  filter()、concat()、 slice()这些方法不会改变 被操作的数 组,返回一个新的数组;  以上方法都可以触发视图更新。


       利用索引直接设置一个数组项,例: this.array[index] = newValue


       直接修改数组的长度,例: this.array.length = newLength 以上两种方法不可以触发视图更新;


       解 决 方 法  1: 可 以 用  this.$set(this.array,index,newValue) 或 this.array.splice(index,1,newValue)


       解决方法 2:  可以用 this.array.splice(newLength)

相关文章
|
8月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
675 2
|
7月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
571 137
|
11月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1089 0
|
11月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
10月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
680 1
|
11月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
687 17
|
10月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
489 0
|
11月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
701 1
|
11月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
960 0
|
11月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
513 0