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

相关文章
|
6天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
6天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
6天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
6天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
5天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
7天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
5天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
7天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
12天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
12天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex