Vue vs. Riot: 둘 다 이긴 거야!

Vue.js와 폭동.js는 구성 요소 기반 응용 프로그램을 구축하는 데 아주 좋은 라이브러리입니다.이 두 가지는 매우 비슷하기 때문에 나는 그 중 하나를 선택할 충분한 이유가 있는지 비교해 보고 싶다.
우선 구성 요소 코드를 작성하는 느낌을 비교해야 한다.

단일 파일 구성 요소(SFC)
몇 년 전에 나는 이것이 매우 이상하다고 생각했지만, 나는 정말 고마웠다.Vue의 경우 SFC는 Vue 구성 요소를 생성하는 여러 방법 중 가장 많이 사용됩니다.Riot은 SFC입니다. SFC와 저만 좋아합니다!
비교해보겠습니다.
Vue
나의 대기 사항.vue

<template>
  <h1>Todos</h1>
</template>

<script>
  export default {
    name: 'my-todos'
  }
</script>

<style scoped>
</style>

폭동
나의 대기 사항.폭동

<my-todos>
  <h1>Todos</h1>

  <script>
    export default {
    }
  </script>

  <style>
  </style>
</my-todos>

그것들은 매우 비슷하다.나는 이 코드가 얼마나 익숙해 보이는지 좋아한다. 1분을 응시한 후에, 그것은 매우 정확하게 보였다.
이 경우 두 구성 요소는 Todos 제목을 포함하는 my-todos 요소만 렌더링됩니다.두 방법 중 하나를 사용하려면 애플리케이션에 동일한 태그를 사용해야 합니다.

<my-todos></my-todos>

이 파일들은 모두 유효한 HTML, CSS, 자바스크립트이기 때문에 플러그인 없이 처리됩니다.
내가 가장 좋아하는 것은 Vue가 어떻게 세 가지 표준 라벨을 사용하여 세 가지 주요 문제를 해결하는가이다.

<template>, HTML

<script>JavaScript

CSS

<style>Root은 이와 유사하지만, 단지 당신이 맞춤형 라벨로 그것을 포장할 뿐입니다.Vue의 name 속성보다 더 좋아하지만 Riot은 표준의 <template>을 사용하지 않습니다.그들은 모두 매우 좋다!
이 세 부분을 살펴보자. 틀부터 시작하자.

1. 템플릿
솔직히 React의 렌더링 함수와 JSX가 엉망이라고 생각해서 Vue와 Riot에 와서 진짜 HTML을 다시 사용하는 것은 정말 새롭다.
실제 HTML 이외에도 조건, 루프 및 이벤트 처리 프로그램의 작동 방식이 깨끗한 템플릿을 만드는 데 도움이 됩니다.
Vue

<template>
  <h1>Todos</h1>
  <p v-if="todos.length > 10">You have a lot to do!</p>
  <p v-for="todo in todos">{{todo}}</p>
  <input type="text">
  <button v-on:click="add">Add</button>
</template>

폭동

<my-todos>
  <h1>Todos</h1>
  <p if="{state.todos.length > 10}">You have a lot to do!</p>
  <p each="{todo in state.todos}">{todo}</p>
  <input type="text">
  <button onclick="{add}">Add</button>
</my-todos>

폭동은 너무 간단해!그것은 표준 HTML에 두 개의 사용자 정의 명령어인 if과 each을 더한 것이다. 바로 이렇다.onevent 속성은 예상한 것과 같습니다.나도 모든 표현은 반드시 큰 괄호로 묶어야 한다는 것을 좋아한다.
Vue 템플릿도 괜찮습니다.그것들은 절대로 JSX의 발전이지만, 나는 작은 일들을 좋아하지 않는다.

표현식은 때때로 괄호로 묶지 않았는데 예를 들어 v-if의 값이 아니다.각각 todo입니다.나는 앞뒤가 맞지 않는 것을 좋아하지 않는다.

이중 브래킷나는 단괄호나 표준 ${}을 더 좋아한다. 이것은 이식 템플릿을 더욱 쉽게 할 것이다!

접두사 v-.나는 모서리가 뚜렷한 것도 좋아하지 않고 베일도 좋아하지 않는다.그러나 마찬가지로 표지에서 발견되기 쉽다.이것은 결정이다.

v-on:click.stop.prevent처럼 너무 신기해요.흥미로운 것은 모든 템플릿 마법이 기본적인 자바스크립트로 대체되기 쉽다는 것이다. 이것은 템플릿을 더욱 깨끗하게 하고 코드를 이식할 수 있게 할 것이다.Vue에서 이러한 옵션을 제거하면 Vue가 더 가볍고 쉽게 학습할 수 있으며 v-on:click.prevent이 e.preventDefault()보다 낫습니까?

한 마디로 하면 이 두 템플릿은 모두 JSX의 대업그레이드이기 때문에 이 템플릿을 사용하는 것은 실패하지 않을 것이다.

2. 대본
간단한 객체를 내보내고 템플릿의 역할 영역을 해당 객체로 설정합니다.이것은 일을 나에게 더욱 뚜렷하고 직관적으로 한다.
Vue는 Riot보다 이 물체에 대해 더 많은 견해를 가지고 있다.위에서 보듯이 방법은 methods이라는 최고급 속성의 속성이다.이러한 요구가 큰 장점이 없다면, 나는 라이터가 그렇게 자신의 의견을 고집하지 않는 디자인을 더 좋아한다.
상태와 아이템도 매우 비슷하다.도구는 속성을 통해 부모 구성 요소에서 하위 구성 요소로 전달되는 읽기 전용 데이터입니다.아이는 this.props을 통해 이들을 방문했다.구성 요소는 자신의 상태도 관리할 수 있다.Vue는 data 함수로 설정되어 있으며, this과 같은 this.todos의 속성에 직접 접근할 수 있습니다.Root에는 state 대상이 있는데, 예를 들어 this.state.todos에 방문할 수 있습니다.둘 다 템플릿에서 this을 삭제할 수 있습니다.보기:
Vue

<template>
  <h1>Todos</h1>
  <p v-if="todos.length > 10">You have a lot to do!</p>
  <p v-for="todo in todos">{{todo}}</p>
  <input type="text">
  <button v-on:click="add">Add</button>
</template>

<script>
  export default {
    name: 'my-todos',

    data() {
      return {
        todos: []
      }
    },

    methods: {
      add(e) {
        this.todos.push(todo);
      }
    }
  }
</script>

폭동

<my-todos>
  <h1>Todos</h1>
  <p if="{state.todos.length > 10}">You have a lot to do!</p>
  <p each="{todo in state.todos}">{todo}</p>
  <input type="text">
  <button onclick="{add}">Add</button>

  <script>
    export default {
      state: {
        todos: []
      },

      add(e) {
        this.state.todos.push(todo);
      }
    }
  </script>
</my-todos>

마찬가지로 매우 비슷하다.
나는 리오트의 방법을 더 좋아할 것 같다.주 정부를 원하십니까?state 속성을 추가하고 방문하십시오.Riot은 추상적인 개념을 누설하지 않고 필요한 마법을 처리한다.
Vue는 처음에는 좀 당혹스러웠을 뿐입니다.data이라는 함수를 만들었지만 호출되지 않았습니다. 그리고 data이 되돌아오는 대상의 모든 속성은 this에서 this.data에 직접 접근할 수 있습니다.내가 처음으로 Vue를 체험했을 때 나는 this.data().todos이 맞을 수도 있다고 생각했고 this.$data.todos이 맞을 수도 있다고 생각했지만 나는 곧 내가 틀렸다는 것을 깨닫고 마법을 받아들일 수밖에 없었다.Riot에는 이 감속대가 없다.
상태가 변경되면 렌더링이 더 달라집니다.Riot은 this.update()을 변경한 후 this.state으로 직접 전화를 걸어야 합니다.전송 상태를 update으로 변경하여 바로 가기를 설정할 수 있습니다. 예를 들어 this.update({todos: []})입니다.Vue는 더 간단합니다. 이 데이터 속성 중 하나를 변경하고 렌더링을 터치합니다. (이것이 바로 마법입니다.)
그것들은 이곳에서 매우 비슷해서 선호하기가 매우 어려워서 내가 주의한 차이는 매우 작다.둘 다 좋아요!

3. 스타일
콘셉트 어디 있어요?패션 꼬리표에 또 어디 있어?!너는 틀림없이 좋아할 거야!
Vue

<template>
  <h1>Todos</h1>
  <p v-if="todos.length > 10">You have a lot to do!</p>
  <p v-for="todo in todos">{{todo}}</p>
  <input type="text">
  <button v-on:click="add">Add</button>
</template>

<script>
  export default {
    name: 'my-todos',

    data() {
      return {
        todos: []
      }
    },

    methods: {
      add(e) {
        this.todos.push(todo);
      }
    }
  }
</script>

<style scoped>
  h1 {
    color: charcoal;
  }
</style>

폭동

<my-todos>
  <h1>Todos</h1>
  <p if="{state.todos.length > 10}">You have a lot to do!</p>
  <p each="{todo in state.todos}">{todo}</p>
  <input type="text">
  <button onclick="{add}">Add</button>

  <script>
    export default {
      state: {
        todos: []
      },

      add(e) {
        this.state.todos.push(todo);
      }
    }
  </script>

  <style>
    h1 {
      color: charcoal;
    }
  </style>
</my-todos>

Riot은 자동으로 스타일 범위를 구성 요소로 제한합니다. Vue는 scoped 속성만 필요합니다.템플릿에서 진짜 HTML을 사용하듯이 진짜 CSS를 다시 사용하는 것은 매우 새롭다.Vue와 Riot의 대승!

도서관 규모
Vue와 Riot은 상대적으로 작습니다.이들이 축소·압축한 형태에서는 Vue가 23.5kb, Riot이 6.5kb였다.
나는 Riot의 비교적 작은 사이즈가 유리하다고 절대 생각한다.이에 비해 Vue의 크기는 React의 절반 정도이고, Riot은 6배 작다!이 충분한 다운로드/해석/실행 비용으로 페이지의 부하를 변경할 수 있습니다.폭동이 이렇게 작아서 영광입니다.
내가 본 또 다른 사이즈는 API다.Riot의 API 인터페이스는 훨씬 작습니다. 제 경험에 따르면 기능이 부족한 것은 아닙니다.이것은 배울 것이 적고, 범한 실수가 적으며, 고려할 일도 적다는 것을 의미한다.Riot은 내가 Riot을 위해 일하는 것이 아니라 나에게 효과가 있다고 느꼈다.Vue는 조금 적었을 뿐이에요.다른 한편, React는 나를 너무 많은 번거로움에 빠지게 했다. 나는 제품을 진정으로 개선하는 것이 아니라 React의 문제를 해결하는 것이라고 생각한 적이 한 번도 없었다.

사용 편의성
제작에는 적합하지 않지만 CDN에서 Vue와 Riot을 얻을 수 있으며 구축 과정에서 발생하는 모든 번거로움을 뛰어넘을 수 있습니다.이것은 좋은 시작이자 새로운 휴식 체험이다.
파이프를 구축해야 할 때, 수요는 반응보다 훨씬 적다.Riot은 몇 가지 선택이 있는데, 최종적으로 가장 쉽게 생산을 준비할 수 있다.

결론
둘 다 좋아해요.그들도 비슷해!Vue는 심지어 프레임 비교 페이지에서 Riot과 가장 가깝다고 언급했다.만약 내가 선택을 강요당한다면, 나는 폭동을 일으킬 것이다. 왜냐하면 그것은 좀 깨끗하고 너무 작기 때문이다.하지만 저는 현재 Vue를 사용하고 있으며 아무런 고소도 하지 않았습니다.
둘 다 해봤어요?만약 당신의 머리가 React에 잠긴 지 오래되었다면, 당신은 정말 Vue나 Riot을 시험해 볼 필요가 있습니다!