Как правильно создавать вспомогательные функции рендера vue?

Question

[lodbrock]

Добрый вечер. Разбираю пример туториала с сайта React для Vue. Столкнулся с проблемой создания дополнительной функции renderSquare во vue для рендера компонента. То же самое с созданием дополнительной переменной, как status в методе render в React, поместил данную переменную в метод. Принято ли так делать вообще во vue и как решаются данные ситуации, заранее спасибо!?

React:

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>

        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

Vue:

<template>
  <div>
    <div className="board-row">
      {{ renderSquare(0) }}
      {{ renderSquare(1) }}
      {{ renderSquare(2) }}
    </div>
  </div>
</template>

<script>
  import CSSModules from 'vue-css-modules'

  import Square from 'components/Square'
  import styles from './styles.css'

  export default {
    name: 'Board',
    components: {
      Square
    },
    methods: {
      status() {
        return 'Next player'
      },
      renderSquare(i) {
        return ...                           и тут начались проблемы
      },
    },

    mixins: [CSSModules(styles)],
  }
</script>

Comments

[Andrey Suha]

На мой взгляд лучше вставить 3 компонента Square и пропсами передать то что им нужно

[lodbrock]

Andrey Suha, а с переменной status не подскажите как быть?

[Andrey Suha]

lodbrock, ну вообще ее лучше юзать в data, а что с ней подсказать? Из вашего кода вообще не понятно для чего она

[lodbrock]

Andrey Suha, к примеру чтобы в дальнейшем вывести кто ходит( X или O). Извините, а разве в data можно использовать переменные, которые не реактивные и не будут изменяться?

[Andrey Suha]

lodbrock, ну если переменная в дате то она уже реактивная. А что Вам нужно подсказать я так и не понял

[lodbrock]

Andrey Suha, ну например, в React в render методе можно сделать так: const status = this.state.xIsNext ? 'x' :'o', и затем вывести, хотелось бы понять как правильно сделать во vue.

[Andrey Suha]

lodbrock, смотрите на computed свойства типа

status() {
    return this.xIsNext ? "X": "O";
}

[lodbrock]

Andrey Suha, спасибо понял. а все же отрендерить компонент во Vue с помощью функции вообще нельзя? В React я часто делал это с целью лучшей читаемости, допустим:

class App extends React.Component {
  state: {
    view: 'full'
  }

  renderHeader()
    return (
      <div>
        <Header />
        <HeaderControls />
     </div>
    );
  }

  render() {
    return (
      <div>
        { this.state.view === 'full' ? this.renderHeader() : null}
        <MainContent />
      </div>
    );
  }
}

[Andrey Suha]

lodbrock, может это Вам поможет, но я не пробовал. Имхо, но такой подход ухудшает читаемость, а не улучшает

[Анатолий]

lodbrock, Читаемость лучше, когда разметка компонента вместе вся, а не куски вперемешку с кодом. В чем проблема? В условном рендере? v-if/v-show вам в помощь.