开发流程及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)

相关文章
|
2天前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
11 3
|
5天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
40 6
|
2天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
5 2
|
2天前
|
JavaScript 搜索推荐 UED
vue的自定义指令
【10月更文挑战第14天】Vue 自定义指令为我们提供了一种强大的工具,使我们能够更灵活地控制和扩展 Vue 应用的行为。通过合理地使用自定义指令,可以提高开发效率,增强应用的功能和用户体验。
|
3天前
|
JavaScript
|
4天前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
24 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
5天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
11 1
|
1天前
|
JavaScript 前端开发 Java
vue2知识点:Vue封装的过度与动画
vue2知识点:Vue封装的过度与动画
7 0
|
2天前
|
JavaScript UED
在 Vue 中使用自定义指令
【10月更文挑战第14天】通过合理地使用自定义指令,可以为 Vue 应用带来更多的灵活性和扩展性,提高开发效率和用户体验。
|
3天前
|
JavaScript 前端开发 容器
vue的哈希模式下乾坤微应用的使用
vue的哈希模式下乾坤微应用的使用