Riot.Js5.2.0 출시🎉 구형 구문 지원

며칠 전Riot.js(이하 riot라고 약칭) 버전 v5.2.0 출시❗ 이 버전의 발표는 riot 근처에서 화제가 되었는데, 이번에는 이 업데이트를 적어 보겠습니다.

노트 를 발행 하다

공식 창고의 발행 노트v5.2.0를 보면 다음과 같다.
Some liked more the old RIot.js syntax so you can now write components also as follows
그렇군요. 예전에는 v3학과의 문법이 생각보다 인기가 많았어요.v4.0.0시에 파괴적인 변경이 발생했고 문법도 드라마로 변경되었기 때문에 v4과에서 리오트를 떠난 사람도 어느 정도 있다고 생각합니다.
그럼 이제 발매 노트에 놓인 코드를 봅시다.

<old-syntax>
  <p>{ state.message }</p>
  <button onclick="{onClick}">Click Me</button>

  <script>
    this.onBeforeMount = () => {
      this.state.message = 'Hello'
    }

    this.onClick = () => {
      this.update({
        message: 'Goodbye',
      })
    }
  </script>
</old-syntax>

그렇구나.export default {} 안 써도 되죠.물론 쓰고도 조작을 확인했다.참고로 현재의 작법은 다음과 같습니다. 비교를 위해 쓰겠습니다.

<current-syntax>
  <p>{ state.message }</p>
  <button onclick="{onClick}">Click Me</button>

  <script>
    export default {
      onBeforeMount() {
        this.state.message = 'Hello'
      },
      onClick() {
        this.update({
          message: 'Goodbye',
        })
      },
    }
  </script>
</current-syntax>

이것밖에 모르니까 어떻게 쓰는 게 좋을지 다시 볼게요.👍

3개 매개 변수:opts,proops,state

우선 3개 파라미터opts, props, state의 확인부터 시작한다.다음 코드를 통해 확인한 후 props, state 문제 없이 동작을 하였으나 opts 오류가 발생하여 사용할 수 없습니다.

console.log(opts) // opts is not defined

this.onBeforeMount = (props, state) => {
  console.log(props) // {title: "Old Syntax Demo"}
  state.message = 'Hello'
}

라이프 사이클 방법의 쓰기

다음은 라이프 사이클을 쓰는 방법입니다.지금은 쓰는 법도 괜찮지만 구판 쓰는 법this.on('xxx')은 못 쓰는 것 같아요.

// OK
this.onMounted = () => {
  this.update({
    message: 'Bye',
  })
}

// NG
// SyntaxError: Unexpected token
this.on('mount', () => {
  console.log(this)
})

script 태그 생략

구 버전의 작법에서 <script> 라벨을 쓰지 않아도 되지만, 이것은 생략할 수 없다.

<old-syntax>
  <p>{ state.message }</p>
  <button onclick="{onClick}">Click Me</button>

  <!-- error -->
  this.onBeforeMount = () => {
    this.state.message = 'Hello'
  }

  this.onClick = () => {
    this.update({
      message: 'Goodbye'
    })
  }
</old-syntax>

이전 버전의 기능은 사용할 수 없습니다.

물론 riot.mount('*')처럼 mount 방법의 어댑터와observable, mixin 등을 사용할 수 없다.

끝맺다

솔직히 기대치보다 조금 낮은 건 진심이야😅 v3학과의 문법을 지지하는 사전 통지에서 나는 각양각색의 복각을 생각했지만 그건 너무 이르다💦 이렇게 말하면 명확하지 않게 export default {}써도 돼요. 업데이트 차이가 별로 없어요.그러면 개인적으로는 명시export default {}의 가독성이 높아서 좋아해요.
그 전의 업데이트에서 부활 기능이 있을지도 모르니 잔잔한 기대를 가지고 이 기사를 끝내도록 해주세요
그럼 안녕히 계세요.ω ゜)ノ