2020.7.20 今天是每日时报陪伴您的第 375 天

[文章] 自定义 ESLint 规则，让代码持续美丽：https://mp.weixin.qq.com/s/zDTRB9BQFbzj6SeAM7mVcA (opens new window)

[文章] 全民 K 歌推流直播 Web 实践：https://mp.weixin.qq.com/s/NjU0OqWxelM2eTJfg66W4Q (opens new window)

[工具] 在 React 中用 vue-compsition-api，终于要合体了吗：https://github.com/antfu/reactivue (opens new window)

[类库] Vue-RC 版本发布以及 Vue3 Doc 发布：https://v3.vuejs.org/ (opens new window)

配图 - 自定义 ESLint 规则

配图 - 推流直播 Web 实战

示例 - React 中用 vue-compsition-api

import React from 'React'
import { defineComponent, ref, computed } from 'reactivue'

interface Props {
  value: number
}

const MyCounter = defineComponent(
  // setup function in Vue
  (props: Props) => {
    const counter = ref(props.value)
    const doubled = computed(() => counter.value * 2)
    const inc = () => counter.value += 1

    return { counter, doubled, inc }
  },
  // functional component in React
  ({ counter, doubled, inc }) => {
    // you can still use other React hooks
    return (
      <div>
        <div>{counter} x 2 = {doubled}</div>
        <button>Increase</button>
      </div>
    )
  }
)

// use it as you normally would
render(<MyCounter value={10}>, el)