莫_辞
获得徽章 0
- vue首屏加载优化
1、使用路由懒加载
2、非首屏的组件使用异步组件
3、首屏显示的不着急的组件做延迟加载。不用第一眼就引入眼帘的首屏组件，可以用延迟加载的方法，比如人工等个1s后再加载
4、静态资源放在CDN链。俗称CDN加速，使得用户访问资源会找离自己物理距离最近的站点去获取资源
5、减少首屏的js，css等资源文件大小，用一些压缩工具压缩资源
6、图片使用webp格式，相同质量下，webp格式的图片体积比JPEG格式图像减小40%，大大减少请求图片时间
7、使用服务器端渲染
8、降低DOM数量和层级。渲染DOM是需要消耗GPU计算的，越复杂的DOM渲染越慢
9、图片宽高事先定好。不然会导致图片宽高数据涌来时，图片的高度变化带来的重排重绘
10、使用雪碧图/精灵图降低请求数量。将多个需要请求的图片合成一张图片来请求
11、做Loading提示。在首屏等待的时候，手动添加loading提示/骨架屏/进度条，从感知上减少用户等待时长
12、Nginx开启Gzip压缩。启用Gzip压缩功能, 可以使网站的css、js 、xml、html 等静态资源在传输时进行压缩,经过Gzip压缩后资源可以变为原来的30%甚至更小
13、图片懒加载图片太多不用一起请求，用户看到哪儿就请求哪儿的图片，没看到的地方不请求，放个占位图展开评论点赞 - #挑战每日一条沸点# 数据的双向绑定：
当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。
Vue.js 是采用Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，并用Object.defineProperty（）方法把它们转化为 getter/setter方法。当data中的属性被访问时，则会调用getter方法；当data中的属性被改变时，则会调用setter方法。展开评论点赞 - vue常见指令：
v-model 多用于表单元素实现双向数据绑定
v-bind：简写为：@，动态绑定一些元素的属性，类型可以是：字符串、对象或数组。
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json
v-show 显示内容
v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来
v-if指令：取值为true/false，控制元素是否需要被渲染
v-else-if 必须和v-if连用
v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出展开评论点赞 - TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
TypeScript 是一门静态类型、弱类型的语言。TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。评论点赞 - #挑战每日一条沸点#
flex 是 flex-grow、flex-shrink、flex-basis的缩写。
假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。评论点赞