reactからvueにお引っ越ししてみる(後篇)

実際に簡単なアプリ置き換えの実装してみたときの追加メモ
react/reduxで書いたアプリも今のところ大きな問題もなく移植はできている

propsの受け渡し

propsで受け取ったデータを変更して出力する場合、computedを使う
親から子にデータを渡す場合はv-bindを使う
これでreactのpure renderなcomponentはつくれる

  <div
    v-for="(item, index) in items"
  >
    <my-component :item="item" />
  </div>

inlineStyle

<div
  :style="{width: '100px'}"
/>

postcss

こちらを参考に導入
https://github.com/vuejs/vue-loader/issues/74
https://vue-loader.vuejs.org/en/features/postcss.html
generateLoaders経由ではうまく動かなかったのであまり頑張らずに
vue-loader.conf.jsにpostcssを追加して対応

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  postcss: [
    require('postcss-cssnext')({
      warnForDuplicates: false,
    }),
  ],

これでnestとかが使える

イベントハンドリング

methods使う

vuexのactionの引数

引数は一つしか渡せないので複数のデータを渡したいときはObjectで渡す

ElementUIでbuttonとかを使う

import Button from 'element-ui'

<template>
  <button>hoge</button>
</template>

とかやろうとするとbutton要素とかはデフォルトの要素名と重複するので怒られる

Do not use built-in or reserved HTML elements as component id: Button

aliasで対応する

import { Button as HogeButton } from 'element-ui';

<template>
  <hoge-button>hoge</hoge-button>
</template>

templateのプロパティにobjectを使いたい

templateがごちゃごちゃするのを避けたかったのでdata/conputed使った

dataとcomputedとmethod

dataはlocal stateと認識
computedとmethodは取れる値は同じ
computedはcacheが聞いていて依存関係が更新されたときのみ更新
methodはrender毎に都度呼ばれる