Reactjs 和 Vuejs 建立 Component 的方式比對

最近這陣子剛好有機會接觸到 Vuejs，之前覺得會寫一點 Reactjs 應該就可以騙吃騙喝了（誤），但是這陣子感受到蠻多人好像都開始寫 Vuejs，不稍微碰一下感覺會落伍啊！其實學 Vuejs 是為了在 Laravel 前端上使用，之前稍微看過一些文章感覺真的蠻棒的！

以下的文章或許會有錯誤，I'm Vuejs rookie！希望在讀文章的各位不要鞭的太用力，若有錯誤歡迎指正！

Create Simple Todo List

How to create Reactjs Todo List Component:

const Todo = ({ todo }) => <li>{todo.text}</li>;

const TodoList = ({ todos }) => {
  const todoNode = todos.map((todo) => <Todo todo={todo} key={todo.id} />);

  return <ul>{todoNode}</ul>;
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [
        { id: 1, text: 'Write Some Code' },
        { id: 2, text: 'Running' },
        { id: 3, text: 'Play Baskebtall' },
      ],
    };
  }

  render() {
    return (
      <div>
        <TodoList todos={this.state.todos} />
      </div>
    );
  }
}

How to create Vuejs Todo List Component:

<div id="app">
  <ul>
    <todo-item v-for="todo in todos" :key="todo.id" :todo="todo"></todo-item>
  </ul>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`,
});

new Vue({
  el: '#app',
  data: {
    todos: [
      { id: 1, text: 'Write Some Code' },
      { id: 2, text: 'Running' },
      { id: 3, text: 'Play Baskebtall' },
    ],
  },
});

觀察 Reactjs 和 Vuejs 他們是如何傳遞 props

Reactjs 部分

Reactjs 主要透過自己特殊的 jsx 語法，看到 class App return 的地方：

<TodoList todos={this.state.todos} />

1. 在 App constructor 初始化的 todos state。
2. <TodoList todos={this.state.todos} /> 的 tag todos，這是要傳到 child component 的 props name，可以透過這樣的方式不斷的往下傳遞 props，除了傳值之外也可以傳 function。
3. const TodoList = ({ todos }) => { ... } 我們 destructuring 傳下來的 props，再把這些 todos 做 map 往 <Todo /> 傳下去。

Vuejs 部分

Vuejs 主要是從 HTML 上的 attribute 特性來實現的：

<todo-item v-for="todo in todos" :key="todo.id" :todo="todo"></todo-item>

1. 看到 Vuejs 自己特殊的 v-for attribute，這裡就是 iterator todos 的 Object，也是我們熟悉的 for-in。

2. :key="todo.id" 是 v-bind:key="todo.id" 的縮寫，後面的 :todo 也是。

• 註：這裡的 :todo 是動態的，它會受到 parent component 影響，更多請參考官方文件說明

3. todo-item 是由我們自己所定義的 Component，可以看到第二個參數物件內的 props：

Vue.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`,
});

4. props: ['todo'] 是由 parent :todo 傳下來的 ，所以我們可以在 child component 內的 props 來接收。

我們在 root component 內已經先初始化 todos 的資料：

new Vue({
  el: '#app',
  data: {
    todos: [
      { id: 1, text: 'A' },
      { id: 2, text: 'B' },
      { id: 3, text: 'C' },
    ],
  },
});

加入新增 Todo 的方法

Reactjs 部分

// 新增一個 functional component

const InputTodo = ({ addTodo }) => {
  let inputText;

  return (
    <div>
      <input ref={(input) => (inputText = input)} />
      <button
        onClick={() => {
          addTodo(inputText.value);
          inputText.value = '';
        }}
      >
        Add
      </button>
    </div>
  );
};

// 在 App 新增一個 `addTodo` method

addTodo = (todo) => {
  const todoLength = this.state.todos.length;

  this.state.todos.push({
    id: todoLength + 1,
    text: todo,
  });

  this.setState({ todos: this.state.todos });
};

//

// 在 App return 內把 InputTodo Component 加入，
// 並把 `this.addTodo` function 作為 props 傳下去

<InputTodo addTodo={this.addTodo} />;

Vuejs 部分

1. 在 HTML 內加入一個 input 和 button。
2. input 使用 v-model 來 binding。
3. button 監聽 onClick 事件，當被點擊時，觸發並使用 addTodo 這個 method 來處理。

<input v-model="text" />
<button @click="addTodo">Add</button>

1. 在 data 新增一個 text，主要是和 input 的 v-model="text" 做 binding，當 input 輸入值改變時，也會改變 data.text。
2. methods 是當一些 event 被觸發時，要對應到哪個 method 來做處理，這裡我們在 button 設定 @click="addTodo"，所以在 methods 也要有對應的 addTodo method。

// 更新 JavaScript 部分

data: {
  text: '',
  todos: [
    { id: 1, text: 'Write Some Code' },
    { id: 2, text: 'Running' },
    { id: 3, text: 'Play Baskebtall' },
  ]
},
methods: {
  addTodo() {
    let todoLength = this.todos.length;

    this.todos.push({
      id: todoLength + 1,
      text: this.text,
    });

    this.text = '';
  }
},

大概可以稍微感受一下 Vuejs，不過看了一下官方文件，不過還蠻多很棒的特性都還沒有使用到啊！