前端备忘 - 掘金

由于公司内部要新做一个发布系统，项目紧急而且前端暂时未招到人，临时客串一下前端开发。在这开发期间碰到的一些问题的记录和总结。

官方文档上面写的非常详细，我是基本我其中有疑问的地方做的记录，如果是专业的，肯定还是将源码看一遍，这样才能真正理解其中的实现。

由于以前写过小程序，所以研究过前端的 css 布局，然后主要使用的 flex 布局，这个和 iOS 的 AutoLayout 及 Android 的 ContraintLayout 很像，所以基本上写 UI 布局基本上没什么问题。

为什么 data 需要是一个函数？防止多个相同同组件引用的是同一个对象，导致组件的修改会相互影响，组件data 相当于浅拷贝。如果使用函数，每次返回都是一个新的实例，组件的修改不会相互影响，组件的 data 相当于深拷贝。
生命周期函数 beforeCreate->created->beforeMount->mounted->beforeDestroy->destroyed mounted->beforeUpdate->updated
scoped 的原理相当于生成一个 data-v-xxxx 的随机数，然后内部的选择器会加上含有这个随机数的选择器。
popover 是渲染在最顶层的，所以会导致在 style 中加 scoped 无效，只能写成不加 scoped 的形式，内部的其他样式可以写在 scoped 中。
v-model 其实就是 value 和 input 的组合。如果想更改成其他

model: {
    prop: 'prop',
    event: 'event'
},

$on 发布订阅者模式
ref 可以获取一个具体的节点，然后获取他对应的属性，包括挂载的方法、属性、值...等
filter 用于文本格式化，比如日期、大小写转换，多个可串联

{{ message | filterA | filterB }}

高阶函数 filter、reduce、some、every、forEach、map、flat、sort 这些函数基本上跟 swift 里面的一样
自定义组件中可以使用 slot 来进行内部细节的定制。
在 flex 盒子中，如果最后一个居中可以 margin: auto;，如果居右可以使用 margin-left: auto; 原理也很简单，css 里面也解释了。
更改 input 的 placeholder 的颜色

input::-webkit-input-placeholder {
    color: red;
}

当 hover 的时候，再显示某些元素

.a {
    display: none;
}
&:hover {
    .a {
        display: inline !important;
    }
}

~~14. computed 传参数（其实本质还是返回不同的函数，无意义）~~

computed: {
    xxx() {
        return (xx) => {
            return xx.xxxxx
        }
   }
}

文字和图片居中对齐

vertical-align: middle;

hairline 处理

@mixin hairline-border($border-color, $border-radius) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    border: 1px solid $border-color;
    border-radius: $border-radius * 2;
  }
}

@mixin hairline-bottom($border-color) {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid $border-color;
    color: $border-color;
    transform: scaleY(0.5);
  }
}

img 标签和长文字在一排时，安卓机器上的图片会发生变形。本来以为固定了图片的宽高之后，后面的文字会被压缩，其实在 iOS 上面也是这样的，但是安卓不行。后续有时间再探究一下这种恶心的问题。

flex-shrink: 0; // 我一点也不压缩

还原初始数据

Object.assign(this.$data, this.$options.data())

第二个需要 data()，相当于重新生成一个新的 data，然后复制给 this.$data。

为什么 IFFE 前面需要加 ; 或者 !?

(function() {
  console.log('111')
})()
// 或者把调用的()写在里面
(function() {
  console.log('111')
}())

但是如果这个前面其他

var a = 1
(function() {
  console.log('111')
})()

其实这句话会被解释成 1()()，明显有问题，1 又不是函数，调用个什么劲呢？但是 js 就是这么设计的，这个就是前面需要加 ; 的理由。

! 的效果也是异曲同工之处，相当于把后面的表达式取反，自然而然就是把这个表达式的结果执行了再取反，所以 ! 这个不需要加 () 了。

所以正确的写法应该是这样

;(function() {
    ...
}()) 
或者
!function() {
   ...
}()

flex: 1 表示什么？ flex: 1 1 0%，并不是 flex: 1 1 auto，如果是 auto 的话，其实只是平分剩余空间，挤压同等空间。