Hỏi về watch và mount?


#1

Em chào mọi người, em mới tìm hiểu về vuejs và có một câu hỏi muốn nhờ mọi người giải thích giúp với ạ.

Vue.component('check-mark', {
  name: 'check-mark',
  template: `
    <input :value="value">
  `,
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  data(){
    return {
      class: null
    }
  },
  methods:{
    setClass(value){
      if (value == 'Y') {
        this.class = 'checked';
      } else {
        this.class = 'unchecked';
      } 
    }
  },
  mounted: function () {
    this.setClass(this.value)
  },
  watch: {
    value: function (value) {
      this.setClass(value)
    },
  },
});

Cho em hỏi tại sao lại phải dùng cả watch và mounted ở trường hợp này. Vì em thử bỏ một trong hai thì lại chạy không được, mong mọi người giải thích lý do cho em với ạ.
Với mong mọi người có thể nói rõ hơn khi nào dùng watch được không ạ.
Em cảm ơn ạ.


#2

Trước hết, bạn không nên dùng tên prop là class, vì Vue sẽ báo lỗi. Sau đó, nếu có thể thì bạn nên tạo một jsfiddle.


#3

Cảm ơn anh đã trả lời. Nhưng em muốn nhờ mọi người giải thích vì sao lại phải dùng cả mounted và watch. Hoặc có thể giải thích rõ hơn cho em ý nghĩa của mounted và watch được không ạ, em đã đọc document rồi nhưng vẫn chưa hiểu rõ lắm.
Em cảm ơn ạ.


#4

Nhưng em muốn nhờ mọi người giải thích vì sao lại phải dùng cả mounted và watch.

Thông thường thì không cần dùng cả hai, nên mình mới bảo bạn thử tạo JSFilde để xem vấn đề ở đâu.