东航电商前端技术周刊第三期如约而至，本期主要内容如下：
1.如何理解react中的diff算法
2.阿里云OSS填坑录
3.如何在Vue中实现动画效果
4.v-if和v-show的区别
5.v-once的用途
1.如何理解react中的diff算法
b.diff算法是怎么算的
2.阿里云OSS填坑录
本周得到需求要将项目使用的静态资源转移到阿里云OSS对象存储。原本并不复杂，实际处理时还是有些坑需要注意。
区分大小写
由于之前静态资源存放在Windows平台IIS服务器，早期Windows为了兼容DOS，文件系统是不区分大小写的，这也导致了IIS在处理URL的时，同样不区分大小写。而阿里云OSS使用的是Linux，Linux的文件系统是严格区分大小写的。此时，之前在Windows平台正常展示的静态资源，都会由于不规范的资源链接地址以及命名暴露无疑。比如，链接URL为大写，而实际资源文件为小写命名，只会得到一个404 Not Found。
服务区禁止与浏览器拦截
在迁移过程中，有一些特殊文件，如字体的iconfont出现了不能展示的问题。根据以往经验，出现这种情况，多半是由于服务器并没有启用此MIME类型，而在阿里云OSS中，当通过浏览器新窗口直接打开资源链接时，文件正常下载，这也就说明虽然在OSS中字体文件的MIME类型，也就是在HTTP响应头中的Content-Type设置的并不是标准的“application/x-font-woff”或者“font/x-woff”等，但实际上服务器并没有禁止此类型文件传送到客户端浏览器。
当禁用Chrome浏览器的安全限制后，所有的iconfont均能正常展示。所以问题明朗，由于CSS文件是通过href链接到页面里的，类似JSONP浏览器并不会拦截此类get请求，而字体文件在CSS中被引用，又一个典型的跨域问题。此时，为了实现跨域资源共享（CORS），打开阿里云OSS管理后台，基础设置－跨域设置，设置规则将允许跨域共享的域名填入，再次打开浏览器，“Access-Control-Allow-Origin”正常设置，问题被解决。
总结：作为一名前端，是需要了解一些运维知识的，否则真的有蛮多坑要填。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感谢严明坤老师热情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.如何在Vue中实现过渡效果
Vue中有一个自带的transition组件，就是用来实现过渡效果的，具体怎么使用呢，很简单，其实就两个步骤：
①用transition组件，把要做过渡效果的元素包起来
②写上相应的过渡效果的css
是不是很简单，比把大象装冰箱还简单。然而，并没有，在这两个步骤中，我们要遵守一定的规则：
在第一步中，我们要给transition组件写一个name，例如
<div id="box" class="box"> <div @click="showFn" class="green"> <transition name="red"><div v-show="show" class="red"></div></transition> </div> </div>
相对应的css也是有规则的，要根据transition是name属性延伸出来：[name]-enter、[name]-enter-active、[name]-leave、[name]-leave-active；
这四个属性分别是什么意思呢？
[name]-enter：显示或加载元素时的过渡效果的初始样式（在元素被插入之前生效，在元素被插入之后的下一帧移除）
[name]-enter-active：显示或加载元素时的过渡效果的动画样式（在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。）
[name]-leave：隐藏或删除元素时的过渡效果的初始样式（在离开过渡被触发时立刻生效，下一帧被移除）
[name]-leave-active：隐藏或删除元素时的过渡效果的动画样式（在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。）
下面，上代码：
.red{ width: 100%; height: 100%; background-color: red; /*下面的样式可以不写，这里为了方便理解*/ opacity: 1; margin-left:0; } .red-enter{ opacity: 0; margin-left:100%; } .red-enter-active,.red-leave-active{ transition: all 1s; } .red-leave{ /*对于简单动画来说，[name]-leave也可以不写，多数情况下，此处的样式和元素正常显示是的样式是相同的*/ opacity: 1; margin-left:0; } .red-leave-active{ opacity: 0; margin-left:100%; }
这样，在控制transition内的div标签显示隐藏时，就有了过渡效果了，是不是很简单。
4.v-if和v-show的区别
v-if和v-show这两个指令，在效果上来说，都是控制元素的显示与否，在很多情况下也可以相互替代，那么，它们有哪些区别，到底用哪个指令更好一些呢？
区别：在原理上来说，v-if是通过插入或删除元素，来实现元素的显示与否，而v-show则是通过修改元素的样式（display），来控制元素的显示与否。
所以，在使用时，对于一些会频繁显示隐藏的元素，我们可以用v-show来控制，这样浏览器就不用对同一个元素去进行重复的样式渲染，提高效率，对于一些不会频繁去修改元素，则更适合用v-if去控制，可以减少dom的数量。
（angular中的ng-if/ng-show也是如此）
5.v-once的用途
v-once，一个貌似不常用的Vue指令，对于只需要一次加载，此后不再改变的元素或组件来说，是一个非常好的指令。
既能不受后续数据改变的影响，也能让随后的渲染过程视其为静态内容，利于优化更新性能。