VueJS - ภาพรวม

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

การติดตั้งสำหรับ VueJS นั้นง่ายมากที่จะเริ่มต้นด้วย นักพัฒนาทุกคนสามารถเข้าใจและสร้างอินเทอร์เฟซเว็บแบบโต้ตอบได้โดยใช้เวลาไม่นาน VueJS สร้างขึ้นโดย Evan You อดีตพนักงานจาก Google VueJS เวอร์ชันแรกเปิดตัวในเดือนกุมภาพันธ์ 2014 และเพิ่งมีการโอเวอร์คล็อกไปที่ 64,828 ดาวบน GitHub ทำให้เป็นที่นิยมอย่างมาก

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติที่สามารถใช้ได้กับ VueJS

DOM เสมือน

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

การผูกข้อมูล

คุณลักษณะการผูกข้อมูลช่วยจัดการหรือกำหนดค่าให้กับแอตทริบิวต์ HTML เปลี่ยนสไตล์กำหนดคลาสด้วยความช่วยเหลือของคำสั่งการผูกที่เรียกว่า v-bind ใช้ได้กับ VueJS

ส่วนประกอบ

ส่วนประกอบเป็นคุณสมบัติที่สำคัญอย่างหนึ่งของ VueJS ที่ช่วยสร้างองค์ประกอบที่กำหนดเองซึ่งสามารถนำมาใช้ซ้ำใน HTML ได้

การจัดการเหตุการณ์

v-on เป็นแอตทริบิวต์ที่เพิ่มให้กับองค์ประกอบ DOM เพื่อรับฟังเหตุการณ์ใน VueJS

ภาพเคลื่อนไหว / การเปลี่ยนแปลง

VueJS มีหลายวิธีในการเปลี่ยนไปใช้องค์ประกอบ HTML เมื่อมีการเพิ่ม / อัปเดตหรือลบออกจาก DOM VueJS มีองค์ประกอบการเปลี่ยนแปลงในตัวที่ต้องพันรอบองค์ประกอบเพื่อให้ได้เอฟเฟกต์การเปลี่ยนแปลง เราสามารถเพิ่มไลบรารีแอนิเมชั่นของบุคคลที่สามได้อย่างง่ายดายและยังเพิ่มการโต้ตอบเพิ่มเติมให้กับอินเทอร์เฟซ

คุณสมบัติที่คำนวณ

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

เทมเพลต

VueJS มีเทมเพลตที่ใช้ HTML ที่เชื่อมโยง DOM กับข้อมูลอินสแตนซ์ Vue Vue รวบรวมเทมเพลตไว้ในฟังก์ชัน DOM Render เสมือน เราสามารถใช้ประโยชน์จากเทมเพลตของฟังก์ชันการเรนเดอร์และในการทำเช่นนั้นเราต้องแทนที่เทมเพลตด้วยฟังก์ชันเรนเดอร์

คำสั่ง

VueJS มีคำสั่งในตัวเช่น v-if, v-else, v-show, v-on, v-bind และ v-model ซึ่งใช้เพื่อดำเนินการต่างๆบนส่วนหน้า

คนดู

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

การกำหนดเส้นทาง

การนำทางระหว่างเพจดำเนินการด้วยความช่วยเหลือของ vue-router

น้ำหนักเบา

สคริปต์ VueJS มีน้ำหนักเบามากและประสิทธิภาพยังเร็วมาก

Vue-CLI

สามารถติดตั้ง VueJS ที่บรรทัดคำสั่งโดยใช้อินเตอร์เฟสบรรทัดคำสั่ง vue-cli ช่วยสร้างและคอมไพล์โครงการได้อย่างง่ายดายโดยใช้ vue-cli

เปรียบเทียบกับกรอบงานอื่น ๆ

ตอนนี้ให้เราเปรียบเทียบ VueJS กับเฟรมเวิร์กอื่น ๆ เช่น React, Angular, Ember, Knockout และ Polymer

VueJS v / s ปฏิกิริยา

Virtual DOM

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

VueJS และ React ทั้งคู่ใช้ DOM เสมือนซึ่งทำให้เร็วขึ้น

Template v/s JSX

VueJS ใช้ html, js และ css แยกกัน เป็นเรื่องง่ายมากสำหรับผู้เริ่มต้นที่จะเข้าใจและนำสไตล์ VueJS มาใช้ วิธีการใช้เทมเพลตสำหรับ VueJS นั้นง่ายมาก

React ใช้วิธี jsx ทุกอย่างเป็น JavaScript สำหรับ ReactJS HTML และ CSS ล้วนเป็นส่วนหนึ่งของ JavaScript

Installation Tools

ใช้ปฏิกิริยา create react app และ VueJS ใช้ vue-cli /CDN/npm. ทั้งสองใช้งานง่ายมากและโครงการได้รับการตั้งค่าตามข้อกำหนดพื้นฐานทั้งหมด React ต้องการ webpack สำหรับบิลด์ในขณะที่ VueJS ไม่ทำ เราสามารถเริ่มต้นด้วยการเข้ารหัส VueJS ที่ใดก็ได้ใน jsfiddle หรือ codepen โดยใช้ไลบรารี cdn

Popularity

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

VueJS เป็นกรอบการทำงานที่กำลังพัฒนา ปัจจุบันโอกาสในการทำงานกับ VueJS มีน้อยกว่าเมื่อเทียบกับ React จากการสำรวจพบว่าหลายคนปรับตัวเข้ากับ VueJS ซึ่งสามารถทำให้เป็นที่นิยมมากขึ้นเมื่อเทียบกับ React และ Angular มีชุมชนที่ดีที่ทำงานเกี่ยวกับคุณสมบัติต่างๆของ VueJS vue-router ได้รับการดูแลโดยชุมชนนี้ด้วยการอัปเดตเป็นประจำ

VueJS ได้นำส่วนที่ดีมาจาก Angular และ React และได้สร้างไลบรารีที่มีประสิทธิภาพ VueJS เร็วกว่ามากเมื่อเทียบกับ React / Angular เนื่องจากไลบรารีน้ำหนักเบา

VueJS v / s เชิงมุม

Similarities

VueJS มีความคล้ายคลึงกับ Angular มาก คำสั่งเช่น v-if, v-for เกือบจะคล้ายกับ ngIf, ngFor ของ Angular ทั้งคู่มีอินเทอร์เฟซบรรทัดคำสั่งสำหรับการติดตั้งโปรเจ็กต์และสร้างมัน VueJS ใช้ Vue-cli และ Angular ใช้ angular-cli ทั้งสองมีการผูกข้อมูลแบบสองทางการแสดงผลฝั่งเซิร์ฟเวอร์ ฯลฯ

Complexity

Vuejs นั้นง่ายมากที่จะเรียนรู้และเริ่มต้นด้วย ตามที่กล่าวไว้ก่อนหน้านี้ผู้เริ่มต้นสามารถใช้ไลบรารี CDN ของ VueJS และเริ่มต้นใช้งานใน codepen และ jsfiddle

สำหรับ Angular เราจำเป็นต้องทำตามขั้นตอนต่างๆสำหรับการติดตั้งและเป็นเรื่องยากสำหรับผู้เริ่มต้นที่จะเริ่มต้นใช้งาน Angular ใช้ TypeScript สำหรับการเข้ารหัสซึ่งเป็นเรื่องยากสำหรับผู้ที่มาจากพื้นหลัง JavaScript หลัก อย่างไรก็ตามมันง่ายกว่าที่จะเรียนรู้สำหรับผู้ใช้ที่เป็นพื้นหลัง Java และ C #

Performance

ในการตัดสินใจประสิทธิภาพนั้นขึ้นอยู่กับผู้ใช้ ขนาดไฟล์ VueJS เบากว่า Angular มาก การเปรียบเทียบประสิทธิภาพของเฟรมเวิร์กมีให้ในลิงค์ต่อไปนี้http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

Popularity

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

Dependencies

Angular มีคุณสมบัติในตัวมากมาย เราต้องนำเข้าโมดูลที่ต้องการและเริ่มต้นใช้งานเช่น @ angular / animations, @ angular / form

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

Flexibility

VueJS สามารถรวมเข้ากับโครงการขนาดใหญ่อื่น ๆ ได้อย่างง่ายดายโดยไม่มีปัญหาใด ๆ Angular จะไม่ใช่เรื่องง่ายที่จะเริ่มทำงานกับโปรเจ็กต์อื่น ๆ ที่มีอยู่

Backward Compatibility

เรามี AngularJS, Angular2 และตอนนี้ Angular4 AngularJS และ Angular2 มีความแตกต่างกันมากมาย แอปพลิเคชันโครงการที่พัฒนาใน AngularJS ไม่สามารถแปลงเป็น Angular2 ได้เนื่องจากความแตกต่างหลัก

VueJS เวอร์ชันล่าสุดคือ 2.0 และเข้ากันได้ดีกับรุ่นเก่า มีเอกสารประกอบที่ดีซึ่งเข้าใจง่ายมาก

Typescript

Angular ใช้ TypeScript สำหรับการเข้ารหัส ผู้ใช้ต้องมีความรู้เรื่อง typescript เพื่อเริ่มต้นใช้งาน Angular อย่างไรก็ตามเราสามารถเริ่มต้นด้วยการเข้ารหัส VueJS ที่ใดก็ได้ใน jsfiddle หรือ codepen โดยใช้ไลบรารี cdn เราสามารถทำงานกับ JavaScript มาตรฐานซึ่งเริ่มต้นได้ง่ายมาก

VueJS v / s Ember

Similarities

Ember มีเครื่องมือบรรทัดคำสั่ง Ember เช่น ember-cli สำหรับการติดตั้งและการคอมไพล์สำหรับโปรเจ็กต์ Ember อย่างง่ายดาย

VueJS ยังมีเครื่องมือบรรทัดคำสั่ง vue-cli เพื่อเริ่มต้นและสร้างโครงการ

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

Performance

VueJS มีประสิทธิภาพที่ดีกว่าเมื่อเทียบกับ Ember Ember ได้เพิ่มเอ็นจิ้นการเรนเดอร์ริบหรี่โดยมีจุดประสงค์เพื่อปรับปรุงประสิทธิภาพการเรนเดอร์ซึ่งเป็นแนวคิดที่คล้ายกันกับ VueJS และ React โดยใช้ DOM เสมือน อย่างไรก็ตาม VueJS มีประสิทธิภาพที่ดีกว่าเมื่อเทียบกับ Ember

VueJS v / s น็อกเอาต์

Knockout ให้การสนับสนุนเบราว์เซอร์ที่ดี ได้รับการสนับสนุนบน IE เวอร์ชันที่ต่ำกว่าในขณะที่ VueJS ไม่รองรับบน IE8 และต่ำกว่า การพัฒนาน็อกเอาต์ช้าลงเมื่อเวลาผ่านไป ช่วงเวลาที่ผ่านมามีความนิยมไม่มากนัก

ในทางกลับกัน VueJS เริ่มได้รับความนิยมจากทีม Vue ที่ให้การอัปเดตเป็นประจำ

VueJS v / s พอลิเมอร์

ห้องสมุด Polymer ได้รับการพัฒนาโดย Google มีการใช้งานในโครงการต่างๆของ Google เช่น Google I / O, Google Earth, Google Play Music เป็นต้นโดยมีคุณสมบัติการผูกข้อมูลและคำนวณคล้ายกับ VueJS

การกำหนดองค์ประกอบที่กำหนดเองของพอลิเมอร์ประกอบด้วย JavaScript / CSS ธรรมดาคุณสมบัติขององค์ประกอบการเรียกกลับของวงจรชีวิตและวิธีการ JavaScript ในการเปรียบเทียบ VueJS อนุญาตให้ใช้ JavaScript / html และ CSS ได้อย่างง่ายดาย

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