本文主要记录在开发过程中遇到的各种问题，不断更新，持续维护

子组件prop类型和默认值

1. vue中子组件接受的参数，加上类型和默认值，可以减少错误，增加代码的可读性。

// bad
props: ['height']
props: {
	
    // good
    height: Number,
    // 检测类型 + 其他验证 + better
    age: {
        type: Number,
        default: 0,
        required: true,
        validator: function(value) {
            return value >= 0;
        }
    }
}

注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

2. 数据类型为Array、Function、Object时的写法

//接收的数据类型为数组
arr: {
    type: Array,
    default: () => {
        return [];
    }
},

//接收的数据类型为函数
fun: {
    type: Function,
    default: () => () => {}
},

//接收的数据类型为对象
obj: {
    type: Object,
    default: () => ({}) //这里是注意是括弧，必须是括弧。
}

让页面里的字体变清晰，变细用CSS怎么做？

为了对比明显先将-webkit-font-smoothing设置为none，非常模糊。

将-webkit-font-smoothing:antialiased，变得非常平滑，效果非常不错。

watch 中防抖函数不是生效

防抖动函数实际是一个闭包，return出来的function内部有一个setTimeout，初次调用debounce会得到防抖动函数，这里主要说下与vue框架中watch一起使用，debounce不能写在watch函数内部，仔细观察debounce可以发现防抖的关键是定时器的使用和清除，上诉例子中timeout记录当前作用域中是否存在定时器。 还有一点需要注意的是debounce传入函数内部this的指向不是当前vue实例，我这里采用的是调用的时候讲this传入。

简单小动效

1. 旋转90度

<img
    :class="{ slidebar__rotate: item.status }"
    src="~assets/img/components/arrow-right.png"
    alt=""
    class="slidebar__arrow--t-right"
/>


.slidebar__rotate {
      transform: rotate(90deg);
  }


 .slidebar__arrow--t-right {
      display: block;
      width: 20px;
      height: 20px;
      transition: all 0.3s;
  }

2. 平滑展开

// 动态获取高度，并进行设置
<div
    :style="[
        {
            height: item.status ? item.height + 'px' : '0'
        }
    ]"
    class="slidebar__second"
>
</div>

&__second {
  transition: all 0.3s;
  overflow: hidden;
}