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

相关文章
|
4天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
41 1
|
15天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
33 1
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
35 1
|
2月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
2月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
65 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1066 0