เรียนรู้เกี่ยวกับ Vue.js Watchers เพื่อปรับปรุงการพัฒนาเว็บแอปของคุณ

ประเด็นที่สำคัญ

Vue เป็นเฟรมเวิร์ก JavaScript ยอดนิยมที่ให้ประโยชน์หลักหลายประการแก่นักพัฒนาในการสร้างเว็บแอปพลิเคชัน ซึ่งรวมถึงการสนับสนุนสถาปัตยกรรมแบบคอมโพเนนต์ ซึ่งช่วยให้โค้ดแบบโมดูลาร์และนำมาใช้ซ้ำได้ ระบบการจัดการสถานะที่แข็งแกร่ง ซึ่งช่วยรักษาความสอดคล้องในส่วนต่างๆ ของแอปพลิเคชัน และความสามารถในการกำหนดเส้นทางในตัว ช่วยให้สามารถนำทางระหว่างหน้าหรือมุมมองต่างๆ ภายในเว็บไซต์เดียวกันได้อย่างราบรื่น ด้วยการใช้ประโยชน์จากคุณสมบัติเหล่านี้ นักพัฒนาสามารถปรับปรุงเวิร์กโฟลว์ของตนและสร้างเว็บแอปที่มีประสิทธิภาพและปรับขนาดได้มากขึ้นโดยใช้ Vue

ผู้เฝ้าดู Vue ทำหน้าที่เป็นผู้สังเกตการณ์คุณสมบัติเชิงโต้ตอบ ช่วยให้สามารถตรวจจับการเปลี่ยนแปลง และอำนวยความสะดวกในการตอบสนองต่อเหตุการณ์ที่เกิดขึ้นหรือการแก้ไขข้อมูล

การใช้คุณสมบัติที่คำนวณนั้นเป็นทางเลือกที่กระชับและชัดเจนกว่าเมื่อเปรียบเทียบกับการใช้ตัวเฝ้าดูเพื่อให้ได้ฟังก์ชันที่คล้ายคลึงกัน ซึ่งท้ายที่สุดจะนำไปสู่ความเร็วในการดำเนินการที่ดีขึ้นและกระบวนการดีบักที่คล่องตัวยิ่งขึ้น

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

Vue มีคุณสมบัติมากมายที่เอื้อต่อการพัฒนาแอปพลิเคชันอย่างรวดเร็ว ฟังก์ชันหนึ่งดังกล่าวคือคุณลักษณะ Watch ซึ่งช่วยให้นักพัฒนาสามารถติดตามการเปลี่ยนแปลงในค่าตัวแปรและนิพจน์ระหว่างการดำเนินการรันไทม์

Watchers ใน Vue คืออะไร?

ผู้เฝ้าดู Vue ประกอบขึ้นเป็นฟังก์ชันที่สังเกตการเปลี่ยนแปลงในคุณสมบัติที่เกิดปฏิกิริยา และต่อมาให้การตอบสนองที่เหมาะสมตามการแก้ไขดังกล่าว เครื่องมือเฝ้าดูเหล่านี้ช่วยให้ผู้ใช้ตอบสนองต่อเหตุการณ์ที่เกิดขึ้นและการปรับเปลี่ยนข้อมูล ซึ่งเป็นช่องทางสำหรับการตรวจสอบอย่างเอาใจใส่ภายในแอปพลิเคชัน

ในการใช้ Watcher ภายในโปรเจ็กต์ Vue ของคุณ คุณต้องนำเข้าฟังก์ชัน “watch” จากแพ็คเกจ Vue ก่อนและรวมเข้ากับสคริปต์ของคุณ

 <script setup>
import { watch } from 'vue';
</script>

การใช้ฟังก์ชัน watch ที่ให้มา เราอาจรวม"watcher"ไว้ภายในองค์ประกอบ Vue ของตนได้อย่างมีประสิทธิภาพ ภาพประกอบเบื้องต้นมีดังนี้:

 <template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const user = ref('Chinedu');

const changeName = () => {
  user.value = 'Victor'; // Change the user's name
};

watch(user, (newUser, oldUser) => {
  alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>

องค์ประกอบเฉพาะนี้ใช้ฟังก์ชัน Watcher เพื่อติดตามการเปลี่ยนแปลงตัวตนของผู้ใช้ พื้นที่มาร์กอัปของบล็อกโค้ดจะสร้างเฟรมเวิร์ก HTML ของส่วนประกอบ ซึ่งประกอบด้วยองค์ประกอบย่อหน้าที่แสดงมูลค่าของสารตั้งต้นชื่อ “ผู้ใช้

เทมเพลตประกอบด้วยส่วนประกอบของปุ่มที่เชื่อมโยงกับตัวฟังเหตุการณ์การคลิกและฟังก์ชัน changeName เมื่อแก้ไขอินพุตของผู้ใช้ Vue จะเรียกใช้ฟังก์ชันการโทรกลับที่กำหนดซึ่งต่อมาจะแสดงข้อความป๊อปอัปที่ระบุว่า"ชื่อผู้ใช้ได้รับการอัปเดตจาก’Chinedu’เป็น’Victor'

การเปรียบเทียบผู้ดูด้วยคุณสมบัติที่คำนวณ

จำเป็นอย่างยิ่งที่จะต้องเข้าใจความแตกต่างระหว่างผู้เฝ้าดูและคุณสมบัติที่คำนวณ เมื่อใช้เป็นกลไกเชิงโต้ตอบภายในกรอบงาน Vue แม้ว่าทั้งสองฟังก์ชันจะทำหน้าที่คล้ายกันในแง่ของการอัปเดตการผูกข้อมูลตามการเปลี่ยนแปลง แต่ก็จำเป็นอย่างยิ่งที่จะต้องใช้ฟังก์ชันแต่ละอย่างเพื่อวัตถุประสงค์เฉพาะของตน

ภาพประกอบของแนวคิดนี้สามารถพบได้ในการคำนวณอายุรวมของพ่อและลูกชายโดยใช้นาฬิกาแดด ดังนี้

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
import { ref, watch } from 'vue';

const father = ref();
const son = ref();
const total = ref();

watch(son, (newAge, oldAge) => {
  total.value = Number(father.value) \+ Number(newAge)
})

watch(father, (newAge, oldAge) => {
  total.value = Number(newAge) \+ Number(son.value)
})

</script>

ส่วนประกอบ Vue ที่กำหนดใช้ผู้เฝ้าดูเพื่อรับผลรวมอายุของพ่อและลูกชายโดยการสร้างตัวแปรปฏิกิริยาใหม่ที่เรียกว่า"ผลรวม"กระบวนการนี้ดำเนินการโดยใช้ Composition API ที่ได้รับจาก Vue

รหัสใช้ฟังก์ชันนาฬิกาสองฟังก์ชันเพื่อติดตามอายุของทั้งพ่อและลูก ด้วยการคำนวณผลรวมของอายุเหล่านี้และอัปเดตมูลค่าของอายุของบุคคลหนึ่งด้วยอายุของอีกคนหนึ่ง จะได้ผลรวมสุดท้ายสำหรับอายุรวม ผลลัพธ์นี้จะถูกเก็บไว้ใน

ในทำนองเดียวกัน ลองตรวจสอบตัวอย่างที่เกี่ยวข้องกับคุณสมบัติที่คำนวณ:javascriptconst person={firstName:‘John’,lastName:‘Doe’,fullName() {return this.firstName +’’+ this.lastName;}};console เข้าสู่ระบบ(person.fullName);//เอาท์พุต: จอห์น โด

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
import { ref , computed } from 'vue';

const father = ref();
const son = ref();

const total = computed(() => {
  return Number(father.value) \+ Number(son.value);
});

</script>

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

การใช้คุณสมบัติที่คำนวณได้ทำให้มีวิธีที่มีประสิทธิภาพมากขึ้นในการกำหนดค่าผลรวมของค่าอายุสองค่า เมื่อเทียบกับการพึ่งพาผู้เฝ้าดู การใช้งานตัวเฝ้าดูในบริบทนี้อาจส่งผลให้เวลาในการโหลดเพิ่มขึ้นและทำให้กระบวนการแก้ไขจุดบกพร่องซับซ้อนขึ้นเนื่องจากโค้ดเบสที่ซับซ้อนมากขึ้นโดยเนื้อแท้

ขอแนะนำให้ใช้ผู้เฝ้าดูเพื่อการสังเกตและตอบสนองต่อการแก้ไขข้อมูลโดยเฉพาะ แทนที่จะใช้มันเป็นทางเลือกแทนคุณสมบัติการคำนวณ ซึ่งได้รับการออกแบบมาโดยเฉพาะเพื่อรับข้อมูลเพิ่มเติมจากข้อมูลเชิงโต้ตอบในปัจจุบัน

ตัวเลือกทันทีที่มีให้สำหรับผู้ดูใน Vue

ตัวเลือก “ทันที” ซึ่งทำหน้าที่เป็นทางเลือกอื่นในระหว่างกระบวนการสร้างตัวเฝ้าดู จะกำหนดว่าฟังก์ชันการโทรกลับของผู้เฝ้าดูจะถูกดำเนินการทันทีเมื่อติดตั้งส่วนประกอบ Vue ที่เกี่ยวข้องสำเร็จหรือไม่

แน่นอนว่า นี่คือภาพประกอบของส่วนประกอบที่ใช้ฟังก์ชันเฝ้าดูพร้อมกับแอตทริบิวต์"ทันที":

 <script setup>
import { ref, watch } from 'vue';

const count = ref(10);

watch(
  count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
  { immediate: true }
);
</script>

เมื่อเริ่มต้นวงจรชีวิตของส่วนประกอบดังกล่าว ผู้สังเกตการณ์จะต้องดำเนินการฟังก์ชันเสริมทันทีและลงทะเบียน"การนับเปลี่ยนจากสถานะไม่แน่นอนเป็นสิบ"ในบันทึกของระบบ การกระทำดังกล่าวบ่งชี้ว่าเอนทิตีเบื้องต้นไม่ได้รับการกำหนดค่าใด ๆ ก่อนที่ Vue จะระบุค่าสิบให้กับการอ้างอิงตัวนับ

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

ตัวเลือก Deep มีอยู่ใน Vue Watchers

คุณลักษณะการเฝ้าดูของ Vue นำเสนอการสังเกตในระดับที่ลึกซึ้งสำหรับการแก้ไขภายในวัตถุหรืออาร์เรย์ที่ปิดล้อม ช่วยให้สามารถตรวจจับการเปลี่ยนแปลงที่เกิดขึ้นภายในคุณสมบัติที่ฝังลึกได้ ความสามารถนี้เปิดใช้งานได้โดยการตั้งค่าพารามิเตอร์ที่เกี่ยวข้องให้เทียบเท่ากับการยืนยัน

นี่คือภาพประกอบของส่วนประกอบ Vue.js ที่ใช้ตัวเลือก"ลึก"ซึ่งช่วยให้สามารถแสดงและแก้ไขออบเจ็กต์ที่ซ้อนกันในโครงสร้างคล้ายต้นไม้ภายในช่องอินพุต:

 <script setup>
import { ref, watch } from 'vue';

const data = ref({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  },
  { deep: true }
);

// This will trigger the watcher because it's a deep change
data.value.length = 43;
</script>

ส่วนโค้ดที่ให้มาจะเริ่มต้นการอ้างอิง data ด้วยออบเจ็กต์ที่มีแอตทริบิวต์"length"ต่อจากนั้น จะเปิดใช้งานตัวเลือก"ลึก"และตรวจสอบในคอนโซลว่าข้อมูลได้รับการอัปเดตเนื่องจากค่าของคุณสมบัติ"ความยาว"ได้เปลี่ยนจากสถานะดั้งเดิมเป็นสามสิบสาม (33)

เมื่อเริ่มต้นตัวแปรข้อมูลใน Vue เป็นออบเจ็กต์ที่มีปฏิกิริยา ตัวแปรจะสามารถติดตามการเปลี่ยนแปลงของออบเจ็กต์ที่ซ้อนกันแบบลึกโดยไม่ต้องใช้ตัวเลือก"ลึก"ในทางกลับกัน หากไม่ได้เปิดใช้งานตัวเลือก"ลึก"ฟังก์ชันนาฬิกาจะไม่สามารถตรวจจับการแก้ไขที่ทำกับวัตถุดังกล่าวได้

 <script setup>
import { ref, watch } from 'vue';

const data = reactive({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  }
);

// This will trigger the watcher because it changes a reactive object
data.length = 43;
</script>

รหัสที่ให้มาประกอบด้วยฟังก์ชันนาฬิกา ซึ่งเมื่อตรวจพบการเปลี่ยนแปลงต่อวัตถุปฏิกิริยาที่เรียกว่า"ข้อมูล"จะบันทึกข้อความไปยังคอนโซลเพื่อระบุว่ามีการแก้ไขดังกล่าวเกิดขึ้น

สร้างแอปที่ดีขึ้นด้วย Vue Watchers

ผู้เฝ้าดูของ Vue เปิดใช้งานพฤติกรรมเชิงโต้ตอบในระดับสูงภายในแอปพลิเคชัน โดยอนุญาตให้สังเกตการแก้ไขคุณลักษณะข้อมูลเฉพาะ ทริกเกอร์การดำเนินการที่กำหนดไว้ล่วงหน้าร่วมกับการเปลี่ยนแปลงดังกล่าว

การทำความเข้าใจสถานการณ์ที่เหมาะสมสำหรับการจ้างผู้เฝ้าดูอย่างเชี่ยวชาญ การแยกแยะความแตกต่างกับคุณสมบัติที่คำนวณได้ และการทำความคุ้นเคยกับตัวเลือกต่างๆ เช่น ทันทีและเชิงลึกจะช่วยเพิ่มขีดความสามารถอย่างมากในการสร้างแอปพลิเคชัน Vue ที่มีปฏิกิริยาสูง