ทำความรู้จักกับ Reactive ใน Vue.js และสิ่งที่มักจะพลาดกัน

Nitipat Lowichakornthikun
Jun 7 · 3 min read

ปัญหานี้มันเกิดจากการที่เรายังไม่ได้เข้าใจหลักการการทำงานของ Reactive นั่นเอง


เปรียบเทียบจุดสำคัญที่แตกต่างกันของ Vue.js กับ React.js


การทำงานของ Reactive ในโลกของ Vue.js

var vm = new Vue({
data: {
msg: "test"
}
})
console.log(vm.$data)
var o = {
a: 7,
get b() {
return this.a + 1;
},
set c(x) {
this.a = x / 2;
}
};

console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25
Vue.set(vm.someObject, 'b', 2)
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
var vm = new Vue({   
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // is NOT reactive
Vue.set(vm.items, indexOfItem, newValue)


I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ มีประสบการณ์จากการทำงานจากทั้งในและนอกประเทศอย่างโชกโชน แต่ถ้าพวกเราเขียนโปรแกรมเพื่อจบงานไปอย่างเดียวมันก็ไม่สนุก พวกเราเลยรวมตัวกันขึ้นมาเปิดเป็นบริษัท Startup ที่มีชื่อว่า I GEAR GEEK ในจังหวัดเชียงใหม่นี้

Nitipat Lowichakornthikun

Written by

Just another software engineer in thailand, https://nitip.at

I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ มีประสบการณ์จากการทำงานจากทั้งในและนอกประเทศอย่างโชกโชน แต่ถ้าพวกเราเขียนโปรแกรมเพื่อจบงานไปอย่างเดียวมันก็ไม่สนุก พวกเราเลยรวมตัวกันขึ้นมาเปิดเป็นบริษัท Startup ที่มีชื่อว่า I GEAR GEEK ในจังหวัดเชียงใหม่นี้