14 ਅਕਤੂ 2025·8 ਮਿੰਟ
Evan You ਅਤੇ Vue.js: ਸੁਗਮ ਅਰਗੋਨੋਮਿਕਸ, ਮੁੱਖਧਾਰਾ ਪੈਮਾਨਾ
Evan You ਨੇ Vue.js ਨੂੰ ਸੁਗਮਤਾ ਅਤੇ ਡਿਵੈਲਪਰ ਐਰਗੋਨੋਮਿਕਸ ਨੂੰ ਮੱਧ ਰੱਖ ਕਰ ਡਿਜ਼ਾਈਨ ਕੀਤਾ। ਪੜ੍ਹੋ ਕਿ ਇਹ ਚੋਣਾਂ ਕਿਸ ਤਰ੍ਹਾਂ ਬਣੀਆਂ ਇੱਕ ਸਕੇਲਯੋਗ ਇਕੋਸਿਸਟਮ ਬਿਨਾਂ enterprise-ਸਟਾਈਲ ਓਵਰਹੈੱਡ ਦੇ।
Evan You ਨੇ Vue.js ਨੂੰ ਸੁਗਮਤਾ ਅਤੇ ਡਿਵੈਲਪਰ ਐਰਗੋਨੋਮਿਕਸ ਨੂੰ ਮੱਧ ਰੱਖ ਕਰ ਡਿਜ਼ਾਈਨ ਕੀਤਾ। ਪੜ੍ਹੋ ਕਿ ਇਹ ਚੋਣਾਂ ਕਿਸ ਤਰ੍ਹਾਂ ਬਣੀਆਂ ਇੱਕ ਸਕੇਲਯੋਗ ਇਕੋਸਿਸਟਮ ਬਿਨਾਂ enterprise-ਸਟਾਈਲ ਓਵਰਹੈੱਡ ਦੇ।
Vue.js ਦੀ ਸ਼ੁਰੂਆਤ ਕਾਫ਼ੀ ਨਿੱਜੀ ਹੈ: Evan You ਨੇ ਉਹ ਚੀਜ਼ ਬਣਾਈ ਜੋ ਉਹ ਵੱਡੇ ਫ੍ਰੇਮਵਰਕਾਂ 'ਤੇ ਕੰਮ ਕਰਦਿਆਂ ਚਾਹੁੰਦੇ ਸਨ। ਮਕਸਦ “ਅਗਲਾ ਵੱਡਾ ਚੀਜ਼” ਬਣਾਉਣਾ ਨਹੀਂ ਸੀ। ਇਹ ਉਹ ਸ਼ਕਤੀ برقرار ਰੱਖਣ ਲਈ ਸੀ ਜੋ component-ਅਧਾਰਤ UI ਵਿਕਾਸ ਵਿੱਚ ਮਿਲਦੀ ਹੈ, ਪਰ ਉਹ ਘਰੱਨੂ ਰੁਕਾਵਟਾਂ ਹਟਾਉਣ ਲਈ ਜੋ ਰੋਜ਼ਮਰਾ ਦੇ ਕੰਮ ਨੂੰ ਭਾਰੀ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦੀਆਂ ਸਨ।
ਇਹ ਇਰਾਦਾ ਅੱਜ ਭੀ Vue ਦੇ ਕੋਰ ਮੁੱਲਾਂ ਵਿੱਚ ਨज़र ਆਉਂਦਾ ਹੈ: ਸੁਗਮਤਾ (ਘੱਟ ਰੁਕਾਵਟ ਨੁਕਤਾ), ਐਰਗੋਨੋਮਿਕਸ (ਰੋਜ਼ਾਨਾ ਡਿਵੈਲਪਰ ਅਨੁਭਵ), ਅਤੇ ਪ੍ਰਯੋਗਿਕਤਾ (ਜਿੱਥੇ ਜ਼ਰੂਰਤ ਹੋਵੇ ਤਾਕਤ—ਬਿਨਾਂ ਜ਼ਰੂਰੀ ਰਸਮੀਕਰਨ ਦੇ)।
ਜਦੋਂ Vue “ਸੁਗਮਤਾ” ਬਾਰੇ ਗੱਲ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਕੁਝ ਕੰਮ ਤੇਜ਼ੀ ਨਾਲ ਚਾਲੂ ਕਰ ਸਕਦੇ ਹੋ ਬਿਨਾਂ ਹਰ ਚੀਜ਼ ਲਈ ਨਵੀਂ ਭਾਸ਼ਾ ਸਿੱਖਣ ਦੇ। ਜੇ ਤੁਸੀਂ HTML, CSS ਅਤੇ JavaScript ਜਾਣਦੇ ਹੋ, ਤਾਂ Vue ਉਹਨਾਂ ਹੁਨਰਾਂ ਦਾ ਕੁਦਰਤੀ ਵਿਆਪਕ ਵਜੋਂ ਮਹਿਸੂਸ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ—ਇੱਕ ਬਦਲੀ ਨਹੀਂ। ਇਸ ਵਿੱਚ ਪੜ੍ਹਨ-ਯੋਗ ਟੈਮਪਲੇਟ, ਸਾਫ਼ ਐਰਰ ਸੁਨੇਹੇ, ਅਤੇ ਇੱਕ ਰਾਹ ਸ਼ਾਮਿਲ ਹੈ ਜਿੱਥੇ “hello world” ਇਕ ਆਰਕੀਟੈਕਚਰ ਤਰਕ-ਵਿਚਾਰ ਨਹੀਂ ਬਣਦਾ।
ਐਰਗੋਨੋਮਿਕਸ ਅਗਲਾ ਪਰਤ ਹੈ: ਉਹ ਛੋਟੀ-ਛੋਟੀ ਡਿਜ਼ਾਈਨ ਚੋਣਾਂ ਜੋ ਤੁਹਾਡੇ ਐਪ ਦੇ ਵੱਡੇ ਹੋਣ 'ਤੇ ਮਨਸਿਕ ਓਵਰਹੈੱਡ ਘਟਾਉਂਦੀਆਂ ਹਨ। ਸੋਚੋ: ਸਮਝਦਾਰ ਡੀਫਾਲਟਸ, ਲਗਾਤਾਰ ਪੈਟਰਨ, ਅਤੇ API ਜੋ ਆਮ ਕਾਰਜਾਂ ਨੂੰ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ ਬਿਨਾਂ ਇਸਦੇ ਕਿ ਉਹ ਤੁਹਾਨੂੰ ਦੱਸਣ ਲੱਗਣ ਕਿ ਪਿੱਛੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ। ਲਕਸ਼ ਸਾਦਾ ਹੈ: ਉਤਪਾਦੀ ਕੰਮ 'ਤੇ ਵਧੇਰੇ ਸਮਾਂ ਅਤੇ ਟੂਲਜ਼ ਨਾਲ ਸੰਘਰਸ਼ 'ਤੇ ਘੱਟ ਸਮਾਂ ਖ਼ਰਚ ਕਰੋ।
Vue ਦੀ ਡਿਜ਼ਾਈਨ ਪ੍ਰਯੋਗਿਕ ਹੈ: ਇਹ ਸਪਸ਼ਟਤਾ ਅਤੇ ਡਿਵੈਲਪਰ ਅਨੁਭਵ ਨੂੰ ਪਹਿਲ ਦੇਂਦੀ ਹੈ, ਫਿਰ ਭੀ ਗੰਭੀਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਸਹਾਇਤਾ ਦਿੰਦੀ ਹੈ।
ਇਸ ਸੰਤੁਲਨ ਦੇ ਨਾਲ ਕੁਝ ਟਰੇਡ-ਆਫ਼ ਹੁੰਦੇ ਹਨ। Vue ਅਕਸਰ ਸੁਪਾਸ਼ਟ, ਪੜ੍ਹਨਯੋਗ ਪੈਟਰਨਾਂ ਨੂੰ ਵਧੀਕ ਅਬਸਟਰੈਕਟ ਪੈਟਰਨਾਂ 'ਤੇ ਤਰਜੀਹ ਦਿੰਦਾ ਹੈ, ਅਤੇ ਇਹ ਇੱਕ ਹੀ “ਸਿਰਫ ਇੱਕ ਠੀਕ” ਆਰਕੀਟੈਕਚਰ ਫਰਜ ਨਹੀਂ ਕਰਦਾ। ਜਿਵੇਂ ਗਤੀਵਿਧੀਆਂ (ਟੂਲਿੰਗ, ਰਾਊਟਿੰਗ, ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਅਤੇ ਮੈਟਾ-ਫ੍ਰੇਮਵਰਕ) ਨੇ ਫੈਲਾਅ ਹੋਇਆ, ਚੁਣੌਤੀ ਇਹ ਰਹਿ ਗਈ ਕਿ ਅਸਲ ਸਾਦਗੀ ਕਿਵੇਂ ਰੱਖੀ ਜਾਵੇ ਜਦੋਂ ਸਕੇਲਿੰਗ ਦੀ ਲੋੜ ਪਏ।
ਇਹ ਲੇਖ ਵੇਖਦਾ ਹੈ ਕਿ ਇਹ ਚੋਣਾਂ Vue ਦੀਆਂ ਕੋਰ ਫੀਚਰਾਂ, ਇਸਦੀ ਟੂਲਿੰਗ ਵਿਕਾਸ ਅਤੇ ਆਸ-ਪਾਸ ਬਣੇ ਇਕੋਸਿਸਟਮ ਨੂੰ ਕਿਵੇਂ ਰੂਪ ਦਿੱਤਾ—ਅਤੇ ਉਹ ਹੱਦਾਂ ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਹੋਰ ਢਾਂਚਾ ਜਾਂ ਕੱਢੇ ਨਿਯਮਾਂ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।
Vue ਦੀ ਸੁਗਮਤਾ ਸਿਰਫ਼ ਨਵੇਂ ਆਉਣ ਵਾਲਿਆਂ ਲਈ ਨਹੀਂ; ਇਹ ਇੱਕ ਸੋਚ-ਵਿਚਾਰ ਕੀਤੀ ਡਿਜ਼ਾਈਨ ਚੋਣ ਹੈ: ਪਹਿਲਾ ਕਦਮ ਪਰਿਚਿਤ ਮਹਿਸੂਸ ਹੋਵੇ, ਅਤੇ ਹਰ ਅਗਲਾ ਕਦਮ ਵਿਕਲਪਿਕ ਰਹੇ ਜਦ ਤੱਕ ਤੁਹਾਨੂੰ ਉਸਦੀ ਲੋੜ ਨਾ ਹੋਵੇ।
ਸਿੱਧੀ ਬੋਲਣੀ ਵਿੱਚ, Vue ਤੁਹਾਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸ਼ਾਮਿਲ ਹੋਣ ਦੀ ਆਜ਼ਾਦੀ ਦਿੰਦਾ ਜਿਵੇਂ ਤੁਸੀਂ ਕੋਈ ਫੀਚਰ ਜੋੜਦੇ ਹੋ—ਬਿਨਾਂ ਪੂਰੇ ਆਰਕੀਟੈਕਚਰ ਦੀ ਬਦਲਾਅ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਦੇ।
ਤੁਸੀਂ ਇੱਕ ਇਕੱਲੇ ਇੰਟਰਐਕਟਿਵ ਵਿਡਜਿਟ (ਕਿਸੇ ਮੌਜੂਦਾ ਪੰਨੇ 'ਤੇ ਪ੍ਰਾਇਸਿੰਗ ਕੈਲਕੁਲੇਟਰ, ਫਿਲਟਰ ਪੈਨਲ, ਸਾਈਨ-ਅਪ ਮੋਡਲ) ਨਾਲ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ। ਉਹ ਵਿਡਜਿਟ ਸੇਰਵਰ-ਰੈਂਡਰਡ HTML, ਪੁਰਾਣੇ jQuery ਜਾਂ ਹੋਰ UI ਪਰਤਾਂ ਦੇ ਨਾਲ ਇਕੱਠੇ ਰਹਿ ਸਕਦੀ ਹੈ। Vue ਦਿਨ ਇੱਕ ਪੰਨੇ ਨੂੰ “Vue ਐਪ” ਹੋਣ ਦੀ ਮੰਗ ਨਹੀਂ ਕਰਦਾ।
ਜਿਵੇਂ ਹੀ ਤੁਹਾਡੀਆਂ ਲੋੜਾਂ ਵਧਦੀਆਂ ਹਨ, ਤੁਸੀਂ ਉਸੇ ਕੋਡਬੇਸ ਨੂੰ ਵਧਾ ਸਕਦੇ ਹੋ:
ਸਿੱਖਣ ਦਾ ਕਰਵਾਅ ਉਸ ਸਮੱਸਿਆ ਦੇ ਅਨੁਸਾਰ ਮਿਲਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਹੱਲ ਕਰ ਰਹੇ ਹੋ। ਤੁਹਾਨੂੰ ਸਭ ਕੁਝ ਪਹਿਲਾਂ ਹੀ ਸਿੱਖਣ ਦੀ ਲੋੜ ਨਹੀਂ।
ਬਹੁਤ ਸਾਰੀਆਂ frontend ਰੀਰਾਈਟਾਂ ਉਸ ਵੇਲੇ ਫੇਲ ਹੋ ਜਾਂਦੀਆਂ ਹਨ ਜਦ ਉਹ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸ਼ੁਰੂਆਤੀ ਫੈਸਲੇ ਮਜ਼ੂਰ ਕਰਵਾਉਂਦੀਆਂ ਹਨ: ਫਾਇਲ ਸਟਰੱਕਚਰ, ਸਟੇਟ ਪੈਟਰਨ, ਬਿਲਡ ਟੂਲਿੰਗ, ਅਤੇ ਕਈ ਕਿਸਮ ਦੇ ਲਾਜ਼ਮੀ ਨਿਯਮ।
Vue ਇਸ ਦਬਾਅ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ। ਇਹ ਤੁਹਾਨੂੰ ਇੱਕ ਸਮਝਦਾਰ ਡਿਫਾਲਟ ਤਜਰਬਾ ਦਿੰਦਾ ਹੈ, ਪਰ ਤੁਰੰਤ ਭਾਰੀ ਸਟੈਕ ਚੁਣਨ ਦੀ ਲੋੜ ਨਹੀਂ ਪਾਉਂਦਾ। ਟੀਮਾਂ ਪਹਿਲਾਂ ਵੈਲਯੂ ਸ਼ਿਪ ਕਰ ਸਕਦੀਆਂ ਹਨ, ਫਿਰ ਅਸਲੀ ਵਰਤੋਂ ਦੇ ਆਧਾਰ 'ਤੇ (ਪਰਫਾਰਮੈਂਸ, ਟੀਮ ਸਾਈਜ਼, ਉਤਪਾਦ ਜਟਿਲਤਾ) ਮੁਕੰਮਲ ਮਿਆਰੀਕਰਨ ਕਰ ਸਕਦੀਆਂ ਹਨ—ਬਜਾਏ ਸ਼ੁਰੂ ਵਿੱਚ ਅਣਦਿੱਖੇ ਅਨੁਮਾਨ ਲਗਾਉਣ ਦੇ।
ਇਹ ਮਿਲਾਪ—ਪਰਿਚਿਤ ਆਨ-ਰੈਂਪ ਅਤੇ ਵਿਕਲਪਿਕ ਜਟਿਲਤਾ—ਵੋਹ ਗੁਣ ਹੈ ਜੋ Vue ਨੂੰ ਸਵਾਗਤਯੋਗ ਬਣਾਉਂਦਾ ਹੈ ਬਿਨਾਂ ਸੀਮਿਤ ਕਰਨ ਦੇ।
Vue ਇਸ ਲਈ ਮਸ਼ਹੂਰ ਹੋਇਆ ਕਿ ਤੁਸੀਂ ਇਸਨੂੰ ਅਜ਼ਮਾਉਣ ਲਈ “ਕੰਪਨੀ ਤੇ ਦਾਅਵ” ਨਹੀਂ ਲਗਾਉਂਦੇ। ਤੁਸੀਂ ਛੋਟੇ ਤੋਂ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ, ਮੁੱਲ ਸਾਬਿਤ ਕਰੋ, ਅਤੇ ਓਥੇ ਹੀ ਫੈਲਾਅ ਕਰੋ ਜਿੱਥੇ ਇਹ ਮੈਸਰੂਫ਼ ਹੋ—ਬਿਨਾਂ ਮੌਜੂਦਾ ਕੋਡਬੇਸ ਨੂੰ ਤਬਾਹ ਕੀਤੇ।
ਸਭ ਤੋਂ ਹਲਕਾ ਸ਼ੁਰੂਆਤ CDN ਸਕ੍ਰਿਪਟ ਟੈਗ ਹੈ: Vue ਨੂੰ ਮੌਜੂਦਾ ਪੇਜ਼ 'ਤੇ ਡਰੌਪ ਕਰੋ ਅਤੇ ਕਿਸੇ ਇਕ ਐਲੀਮੈਂਟ 'ਤੇ ਮਾਉਂਟ ਕਰੋ। ਇਹ ਫਾਰਮ, ਡਾਇਨਾਮਿਕ ਟੇਬਲ ਜਾਂ ਮਾਰਕੀਟਿੰਗ-ਪੇਜ਼ ਇੰਟਰਐਕਸ਼ਨ ਨੂੰ ਅਪਗਰੇਡ ਕਰਨ ਲਈ ਚੰਗਾ ਹੈ—ਬੈਕਵੇਂਡ ਜਾਂ ਬਿਲਡ ਸੈਟਅਪ ਨਹੀਂ ਬਦਲਣਾ ਪੈਂਦਾ।
ਜੇ ਤੁਸੀਂ ਆਧੁਨਿਕ ਵਰਕਫਲੋ ਲਈ ਤਿਆਰ ਹੋ ਤਾਂ Vite-ਚਲਿਤ ਐਪ ਤੁਹਾਨੂੰ ਤੇਜ਼ dev startup ਅਤੇ ਸਮਝਦਾਰ ਡੀਫਾਲਟਸ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ ਇੱਕ ਸਥਾਈ Vue ਐਪ ਬਣਾ ਸਕਦੇ ਹੋ, ਜਾਂ ਸਰਵਰ-ਰੈਂਡਰਡ ਪੰਨਿਆਂ 'ਤੇ ਕਈ Vue “ਆਈਲੈਂਡ” ਮਾਊਂਟ ਕਰ ਸਕਦੇ ਹੋ।
ਇੱਕ ਤੀਜਾ ਰਾਹ ਇਸ ਦੋਹਾਂ ਦੇ ਵਿਚਕਾਰ ਹੈ: ਮੌਜੂਦਾ ਐਪ ਵਿੱਚ ਇਕ ਪੰਨਾ (ਜਾਂ ਇਕ ਕੰਪੋਨੈਂਟ) ਦੇ ਅਨੁਸਾਰ Vue ਨੂੰ ਇਕਠਾ ਕਰਨਾ। ਟੀਮਾਂ ਅਕਸਰ ਇੱਕ jQuery ਵਿਡਜਿਟ ਜਾਂ ਨਾਜੁਕ vanilla ਸਕ੍ਰਿਪਟ ਨੂੰ Vue ਕੰਪੋਨੈਂਟ ਨਾਲ ਬਦਲ ਕੇ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ, ਫਿਰ ਭਰੋਸਾ ਵਧਣ ਤੇ ਪੈਟਰਨਾਂ ਨੂੰ ਮਿਆਰੀਕਰਦੀਆਂ ਹਨ।
Vue ਦੇ ਕੋਰ ਸਿਧਾਂਤ—ਕੰਪੋਨੈਂਟ, ਟੈਮਪਲੇਟ ਅਤੇ reactive state—ਸ਼ੁਰੂ ਵਿੱਚ ਆਸਾਨ ਹਨ, ਪਰ ਬਾਅਦ ਵਿੱਚ ਵੀ ਬੇਕਾਰ ਨਹੀਂ ਹੋ ਜਾਂਦੇ। ਜਿਵੇਂ-ਜਿਵੇਂ ਪ੍ਰੋਜੈਕਟ ਵਧਦਾ ਹੈ, ਤੁਸੀਂ ਰਾਊਟਿੰਗ, ਸਾਂਝਾ ਸਟੇਟ ਅਤੇ ਹੋਰ ਢਾਂਚਾਬੱਦੀ ਅਰਕੀਟੈਕਚਰ ਤਦ ਜੋੜ ਸਕਦੇ ਹੋ ਜਦੋਂ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇ, ਨਾ ਕਿ ਪਹਿਲਾਂ ਹੀ ਸਾਰੀ ਜਟਿਲਤਾ ਭੁਗਤਣੀ ਪੈਵੇ।
ਕ੍ਰਮਿਕ ਅਪਣਾਉਣ ਅਸਲ-ਦੁਨੀਆ ਦੀਆਂ ਪਾਬੰਦੀਆਂ ਨਾਲ ਮਿਲਦੀ ਹੈ: ਪੁਰਾਣੇ ਪੰਨੇ ਨਵੇਂ ਸਕ੍ਰੀਨਾਂ ਦੇ ਨਾਲ, ਵੱਖ-ਵੱਖ ਟੀਮਾਂ ਅਤੇ ਵੱਖ-ਵੱਖ ਰੀਲੀਜ਼ ਸਾਈਕਲ। Vue ਸਰਵਰ ਫ੍ਰੇਮਵਰਕਾਂ, ਪੁਰਾਣੇ ਫਰੰਟਐਂਡ ਕੋਡ ਜਾਂ ਹੋਰ UI ਪਰਤਾਂ ਨਾਲ ਇਕੱਠੇ ਰਹਿ ਸਕਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਹਿੱਸਾ-ਦਰ-ਹਿੱਸਾ ਮਾਈਗਰੇਟ ਕਰ ਰਹੇ ਹੋ। ਇਸ ਤਰ੍ਹਾਂ “ਰੀਰਾਈਟ” ਛੋਟੀਆਂ ਅਪਗ੍ਰੇਡਾਂ ਦੀ ਲੜੀ ਬਣ ਜਾਂਦੀ ਹੈ, ਨ ਕਿ ਜੋਖਮ ਭਰੀ ਸਾਰੀ-ਜੋ ਕੁਝ-ਇੱਕ ਘਟਨਾ।
Vue ਦਾ ਡੀਫਾਲਟ ਲੇਖਣ ਅੰਦਾਜ਼ ਇਰਾਦਤਨ ਪਰਿਚਿਤ ਹੈ: HTML-ਨੁਮਾ ਟੈਮਪਲੇਟ ਲਿਖੋ, ਘੱਟ ਹੁਕਮਾਂ ਦਾ ਵਰਤੋਂ ਕਰੋ, ਅਤੇ “ਅਸਲ ਲੋਜਿਕ” JavaScript ਵਿੱਚ ਰੱਖੋ। ਸਰਵਰ-ਰੈਂਡਰਡ ਐਪਾਂ ਜਾਂ jQuery-ਯੁਗ ਦੇ ਡਿਵੈਲਪਰਾਂ ਲਈ, ਇਹ ਅਕਸਰ ਇੱਕ ਨਵੇਂ ਮਨੋਵਿਗਿਆਨ ਦੀ ਥਾਂ ਇਕ ਜਾਰੀ ਰਹਿਣ ਵਾਲੀ ਅਦਤ ਵਾਂਗ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।
Vue ਦੇ ਟੈਮਪਲੇਟ ਸਟੈਂਡਰਡ HTML ਵਰਗੇ ਲੱਗਦੇ ਹਨ, ਪਰ ਆਮ UI ਲੋੜਾਂ ਲਈ ਇੱਕ ਛੋਟੀ ਭਾਸ਼ਾ ਜੋੜਦੇ ਹਨ:
v-if / v-else ਸ਼ਰਤੀ ਰੇਂਡਰਿੰਗ ਲਈv-for ਲਿਸਟਾਂ ਲਈv-bind (ਅਕਸਰ :) ਡਾਇਨਾਮਿਕ attributes ਲਈv-on (ਅਕਸਰ @) events ਲਈਇਹ directives ਸਪਸ਼ਟ ਅਤੇ ਸੁਨਿਰਧਾਰਿਤ ਹਨ, ਇਸ ਲਈ ਇੱਕ ਟੈਮਪਲੇਟ ਅਕਸਰ UI ਦਾ ਵਰਣਨ ਵਾਂਗ ਪੜ੍ਹਿਆ ਜਾਂਦਾ ਹੈ ਬਜਾਏ nested function calls ਦੇ ਪਹੇਲੇ ਖੋਲ੍ਹਣ ਦੇ।
Single-File Components (SFCs) template, logic ਅਤੇ styles ਨੂੰ ਇਕੱਠੇ ਪੈਕ ਕਰਦੇ ਹਨ ਜਿਸ ਤਰ੍ਹਾਂ ਲੋਕ UI ਬਾਰੇ ਸੋਚਦੇ ਹਨ: ਇੱਕ ਕੰਪੋਨੈਂਟ ਵਜੋਂ।
<template>
<button :disabled="loading" @click="submit">Save</button>
</template>
<script setup>
const loading = ref(false)
function submit() {}
</script>
<style scoped>
button { font-weight: 600; }
</style>
ਇਹ ਫਾਰਮੈਟ context switching ਘਟਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਹਰ ਰੋਜ਼ ਦੇ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਲਈ ਵੱਖ-ਵੱਖ ਫਾਇਲਾਂ ਵਿੱਚ ਨਹੀਂ ਭਟਕਦੇ—"ਇਹ ਕਲਾਸ ਕਿੱਥੇ ਪਰਿਭਾਸ਼ਿਤ ਹੈ?" ਜਾਂ "ਕਿਸ ਹੈਂਡਲਰ ਨੂੰ ਕਲਿੱਕ 'ਤੇ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ?" ਆਹਾ-ਇਨਸਪੈਕਸ਼ਨ ਹੁੰਦੀ ਹੈ।
ਅਮਲ ਵਿੱਚ, ਟੀਮਾਂ ਸੰਜੋਗ ਰੱਖਣ ਲਈ ਕਨवेंਸ਼ਨਾਂ (ਅਤੇ linting) ਤੇ ڀੀ ਨਿਰਭਰ ਕਰਦੀਆਂ ਹਨ—ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਹੋਰ ਲੋਕ ਇੱਕੋ ਕੋਡਬੇਸ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉਂਦੇ ਹਨ।
<style scoped> CSS ਨੂੰ ਕੰਪੋਨੈਂਟ ਤੱਕ ਸੀਮਿਤ ਕਰਦਾ ਹੈ, ਜੋ ਇੱਕ ਛੋਟੀ ਤਬਦੀਲੀ ਦੇ ਕਿਸੇ ਅਣਜਾਣੇ ਸਕ੍ਰੀਨ ਨੂੰ ਖਰਾਬ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ। co-location (ਮਾਰਕਅੱਪ, ਵਿਵਹਾਰ, styles ਇਕੱਠੇ) ਨਾਲ, SFCs ਤੇਜ਼ ਇਟਰੈਸ਼ਨ ਅਤੇ ਨਿਰਭਰ ਰਿਫੈਕਟਰਿੰਗ ਲਈ ਮਦਦਗਾਰ ਹਨ—ਇਹ ਉਹੇ ਤਰ੍ਹਾਂ ਦੀ ਐਰਗੋਨੋਮਿਕਸ ਹੈ ਜੋ ਫਰੇਮਵਰਕ ਨੂੰ ਰੋਜ਼ਾਨਾ ਕੁਦਰਤੀ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦੀ ਹੈ।
Vue ਵਿੱਚ reactivity ਆਮ ਬੋਲਚਾਲ ਦੇ ਸ਼ਬਦਾਂ ਵਿੱਚ ਸਭ ਤੋਂ ਆਸਾਨ ਹੈ: ਤੁਸੀਂ ਕੁਝ state ਰੱਖਦੇ ਹੋ (ਤੁਹਾਡੇ ਡੇਟਾ), ਅਤੇ ਜਦੋਂ ਉਹ state ਬਦਲਦਾ ਹੈ, ਤਾਂ UI ਉਸ ਦੇ ਅਨੁਕੂਲ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦੀ ਹੈ। ਤੁਸੀਂ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਹੋਣ ਤੋਂ ਬਾਅਦ ਕਾਊਂਟਰ ਨੂੰ ਦੁਬਾਰਾ ਡ੍ਰਾ ਕਰਨ ਲਈ ਪੇਜ ਨੂੰ ਨਹੀਂ ਕਹਿੰਦੇ—ਤੁਸੀਂ ਨੰਬਰ ਅੱਪਡੇਟ ਕਰਦੇ ਹੋ, ਅਤੇ Vue ਉਸ ਤਬਦੀਲ ਨੂੰ ਉਸ ਜਗ੍ਹਾ 'ਤੇ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿੱਥੇ ਉਹ ਵਰਤਿਆ ਗਿਆ ਹੈ।
ਪੇਸ਼ਗੋਈਯੋਗਤਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿਉਂਕਿ ਇਹ ਐਪਸ ਨੂੰ ਬਣਾਏ ਰੱਖਣ ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ। ਜਦੋਂ ਅੱਪਡੇਟ ਲਗਾਤਾਰ ਹੁੰਦੀਆਂ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਪੁੱਛ ਸਕਦੇ ਹੋ "ਇਸਤਰੀ ਜਾਂ ਹੋਰ ਕਿਉਂ ਬਦਲਿਆ?" ਅਤੇ ਜਵਾਬ state ਬਦਲਨ ਤੱਕ ਟ੍ਰੇਸ ਕਰ ਸਕਦੇ ਹੋ, DOM ਮੈਨਿਊਅਲ ਮੈਨਿਪੁਲੇਸ਼ਨ ਦੀ ਭੱਜਾਈ ਨਹੀਂ।
Vue ਦਾ reactivity ਸਿਸਟਮ ਇਹ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਟੈਮਪਲੇਟ ਦੇ ਕਿਹੜੇ ਹਿੱਸੇ ਕਿਹੜੀਆਂ state ਟੁਕਿਆਂ 'ਤੇ ਨਿਰਭਰ ਹਨ। ਇਸ ਨਾਲ ਫਰੇਮਵਰਕ ਸਿਰਫ਼ ਉਹੀ ਅਪਡੇਟ ਕਰਦਾ ਹੈ ਜੋ ਲੋੜੀਦਾ ਹੈ, ਜਦੋਂ ਤੁਸੀਂ ਇੰਟਰਕਫੇਸ ਦਾ ਵਰਣਨ ਕਰਨ 'ਤੇ ਧਿਆਨ ਦੇ ਸਕਦੇ ਹੋ ਨ ਕਿ ਉਸਨੂੰ ਆਰਕੀਸਟ੍ਰੇਟ ਕਰਨ 'ਤੇ।
ਦੋ ਐਰਗੋਨੋਮਿਕ ਟੂਲ ਇਸ ਮਾਡਲ ਨੂੰ ਅਸਲ ਜ਼ਿੰਦਗੀ ਦੇ ਐਪਸ ਵਿੱਚ ਪ੍ਰਯੋਗੀ ਬਣਾਉਂਦੇ ਹਨ:
Computed values derived state ਲਈ ਹਨ। ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਚੀਜ਼ ਨੂੰ “ਹੋਰ ਡੇਟਾ ਦਾ ਫੰਕਸ਼ਨ” ਵਜੋਂ ਪ੍ਰਗਟ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਂ ਉਹ غالباً computed ਪ੍ਰਾਪਰਟੀ ਵਿੱਚ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ (ਫਿਲਟਰ ਕੀਤੀਆਂ ਲਿਸਟਾਂ, ਟੋਟਲ, "ਪੂਰਾ ਨਾਮ", ਫਾਰਮ ਵਾਲਿਡਿਟੀ)। Computed values ਆਪਣੇ ਆਪ sync ਰਹਿੰਦੀਆਂ ਹਨ ਅਤੇ ਟੈਮਪਲੇਟ ਵਿੱਚ ਸਧਾਰਨ ਮੁੱਲ ਵਾਂਗ ਪੜ੍ਹੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।
Watchers side-effects ਲਈ ਹਨ—ਜਦੋਂ ਕਿਸੇ ਬਦਲਾਅ ਨਾਲ ਕੋਈ ਕਾਰਵਾਈ ਟ੍ਰਿਗਰ ਹੋਣੀ ਹੋਵੇ (ਡ੍ਰਾਫਟ ਸੇਵ ਕਰਨਾ, ਜਦੋਂ ਕੁਝ query ਅੱਪਡੇਟ ਹੋਵੇ ਤਾਂ API ਕਾਲ ਕਰਨੀ, localStorage ਨਾਲ sync ਕਰਨਾ, ਰੂਟ ਚੇਨਜ 'ਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆ ਦੇਣਾ)।
ਸਾਰ ਦਾ ਨਿਯਮ: ਜੇ ਨਤੀਜਾ ਕੁਝ ਹੈ ਜੋ ਤੁਸੀਂ ਦਿਖਾਉਂਦੇ ਜਾਂ ਬਾਈਂਡ ਕਰਦੇ ਹੋ, ਤਾਂ computed ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ। ਜੇ ਤੁਹਾਨੂੰ ਤਬਦੀਲੀ 'ਤੇ ਕੁਝ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਤਾਂ watcher ਵਰਤੋ।
Composition API ਇਸ ਵਿਸ਼ੇਸ਼ ਸਕੇਲਿੰਗ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਸੀ: ਜਦੋਂ ਕੰਪੋਨੈਂਟ "ਕੁਝ ਵਿਕਲਪ ਅਤੇ ਕੁਝ ਮੈਥਡਾਂ" ਤੋਂ ਵੱਧ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਕਿਵੇਂ ਪੜ੍ਹਨਯੋਗ ਰਹੇ? ਵੱਡੇ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ Options API ਨਾਲ ਸੰਬੰਧਤ ਲੋਜਿਕ data, methods, computed ਅਤੇ watchers ਵਿਚ ਵਿਖਰ ਸਕਦੀ ਹੈ। Composition API ਤੁਹਾਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ feature ਅਨੁਸਾਰ ਕੋਡ ਗਰੁੱਪ ਕਰਨ ਦਿੰਦਾ ਹੈ (ਉਦਾਹਰਣ: “search”, “pagination”, “save draft”), ਤਾਂ ਜੋ ਮੋਵਿੰਗ ਪਾਰਟਸ ਨੇੜੇ-ਨੇੜੇ ਰਹਿਣ।
ਮਕਸਦ Options API ਨੂੰ ਬਦਲਣਾ ਨਹੀਂ ਸੀ। ਇਹ Vue ਨੂੰ ਵਧੇਰੇ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਸੀ—ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਤੁਹਾਨੂੰ ਬਹੁਤ ਸਾਰੀਆਂ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਲੋਜਿਕ ਦੁਹਰਾਉਣੀ ਹੋਵੇ ਜਾਂ ਜਦੋਂ ਕੰਪੋਨੈਂਟ ਜਟਿਲ ਹੋਣ।
Composition API ਨਾਲ ਤੁਸੀਂ:
Options API ਅਜੇ ਵੀ ਸਧਾਰਨ UI ਲਈ ਸ਼ਾਨਦਾਰ ਹੈ: ਇਹ ਪੜ੍ਹਨਯੋਗ, ਸੰਰਚਿਤ ਅਤੇ ਮਿਸ਼ਰਤ ਅਨੁਭਵ ਵਾਲੀਆਂ ਟੀਮਾਂ ਲਈ ਸੁਗਮ ਹੈ। Composition API ਉਹ ਵੇਲੇ ਚਮਕਦਾ ਹੈ ਜਦੋਂ ਕੋਈ ਕੰਪੋਨੈਂਟ ਕਈ ਚਿੰਤਾਵਾਂ (ਫਾਰਮ + fetching + UI state) ਰੱਖਦਾ ਹੋਵੇ ਜਾਂ ਜਦੋਂ ਤੁਸੀਂ ਸਕ੍ਰੀਨਾਂ ਵਿੱਚ ਵਿਹਵਾਰ ਸਾਂਝਾ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ।
ਕਈ ਟੀਮਾਂ ਦੋਹਾਂ ਨੂੰ ਮਿਕਸ ਕਰਦੀਆਂ ਹਨ: ਜਿੱਥੇ Options API ਪੜ੍ਹਨ ਵਿੱਚ ਚੰਗਾ ਲੱਗੇ, ਉੱਥੇ ਇਸਦਾ ਉਪਯੋਗ ਕਰੋ; ਜਦੋਂ reuse ਅਤੇ organization ਮੱਤਲਬ ਰੱਖਣ ਲੱਗੇ ਤਾਂ Composition API ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਇੱਕ composable ਸਿਰਫ਼ ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਕੁਝ state + ਵਿਹਵਾਰ ਨੂੰ ਪੈਕੇਜ ਕਰਦਾ ਹੈ।
// useToggle.js
import { ref } from 'vue'
export function useToggle(initial = false) {
const on = ref(initial)
const toggle = () => (on.value = !on.value)
return { on, toggle }
}
ਫਾਰਮ: validation ਅਤੇ dirty-state useForm() ਵਿੱਚ ਰਹਿ ਸਕਦੇ ਹਨ।
Fetching: loading, error, ਅਤੇ caching ਪੈਟਰਨ useFetch() ਵਿੱਚ ਰੱਖੋ।
UI ਵਿਹਵਾਰ: dropdown کھੋਲ/ਬੰਦ, ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟ, ਜਾਂ “click outside” ਲਾਜ਼ਮੀ ਤਰ੍ਹਾਂ composables ਵਜੋਂ ਬੈਠਦੇ ਹਨ—ਇੱਕ ਵਾਰੀ ਸਾਂਝੇ ਕਰੋ, ਹਰ ਜਗ੍ਹਾ ਵਰਤੋਂ।
Vue ਦੀਆਂ ਐਰਗੋਨੋਮਿਕਸ "ਜਾਦੂ" ਬਾਰੇ ਨਹੀਂ, ਬਲਕਿ ਉਹ ਕੁਝ ਕਨਵੈਨਸ਼ਨਾਂ ਬਾਰੇ ਹਨ ਜੋ ਲੋਕ ਪਹਿਲਾਂ ਹੀ UI ਬਾਰੇ ਸੋਚਦੇ ਹਨ: ਡੇਟਾ ਅੰਦਰ, UI ਬਾਹਰ, ਯੂਜ਼ਰ ਇਵੈਨਟਸ ਵਾਪਸ। ਫਰੇਮਵਰਕ ਤੁਹਾਨੂੰ ਇਕ ਸਾਫ਼, ਪੜ੍ਹਨਯੋਗ ਬੇਸਲਾਈਨ ਵੱਲ ਧੱਕਦਾ ਹੈ—ਫਿਰ ਜਦੋਂ ਤੁਹਾਨੂੰ ਕੁਝ ਵਿਸ਼ੇਸ਼ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਉਹ ਹਟ ਜਾਂਦਾ ਹੈ।
ਇੱਕ ਆਮ Vue ਕੰਪੋਨੈਂਟ ਛੋਟਾ ਅਤੇ ਸਪਸ਼ਟ ਰਹਿ ਸਕਦਾ ਹੈ: ਟੈਮਪਲੇਟ ਮਾਰਕਅੱਪ ਲਈ, ਸਕ੍ਰਿਪਟ ਰਾਜ ਅਤੇ ਲੋਜਿਕ ਲਈ, ਅਤੇ ਸਟਾਈਲ ਜਦ ਲੋੜ ਹੋਵੇ। ਤੁਹਾਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਤੀਸਰੇ-ਪੱਖ ਦੇ ਹਜ਼ਾਰਾਂ ਹੈਲਪਰੇ ਦੀ ਲੋੜ ਨਹੀਂ।
ਇਸੇ ਸਮੇਂ, Vue ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਫਸਾਉਂਦਾ ਨਹੀਂ। ਤੁਸੀਂ ਸਧਾਰਨ JavaScript ਵਰਤ ਸਕਦੇ ਹੋ, ਘੱਟ-ਘੱਟ ਤਰੀਕੇ ਨਾਲ TypeScript ਲਿਆ ਸਕਦੇ ਹੋ, render functions ਸਵਿੱਚ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਜਿਵੇਂ ਕੰਪੋਨੈਂਟ ਵਢਦੇ ਹਨ Options API ਤੋਂ Composition API 'ਤੇ ਜਾ ਸਕਦੇ ਹੋ। ਡੀਫਾਲਟ ਤੁਹਾਨੂੰ ਅੱਗੇ ਵਧਾਉਂਦੇ ਹਨ; ਨਿਕਾਸ਼ ਰਾਹ ਤੁਹਾਨੂੰ ਬਾਅਦ ਵਿਚੋਂ ਮੁੜ ਲਿਖਣ ਤੋਂ ਬਚਾਉਂਦੇ ਹਨ।
Vue ਕੁਝ ਲਗਾਤਾਰ ਪੈਟਰਨਾਂ ਰਾਹੀ ceremony ਘਟਾਉਂਦਾ ਹੈ:
v-bind/: ਅਤੇ v-model ਨਾਲ state ↔ UI ਵਾਇਰਿੰਗ ਸੰਖੇਪ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਰਹਿੰਦੀ ਹੈ।@click ਆਦਿ HTML ਵਾਂਗ ਪੜ੍ਹਦੀ ਹੈ, ਬਿਨਾਂ ਲੰਬੇ wrapper ਕੋਡ ਦੇ।ਦੇਨ-ਦਿਨ ਦੇ ਕੰਮ ਵਿੱਚ ਇਹ ਪੈਟਰਨ ਮਤਲਬ ਰੱਖਦੇ ਹਨ: ਘੱਟ ਫਾਇਲਾਂ ਨੂੰ ਟਚ ਕਰਨਾ, ਘੱਟ ਕਸਟਮ ਪੈਟਰਨ ਯਾਦ ਰੱਖਣੇ, ਅਤੇ ਘੱਟ ਸਮਾਂ ਸਟਾਈਲ ਚੋਣਾਂ 'ਤੇ ਵਜੀਹ।
ਵੱਡੀਆਂ ਟੀਮਾਂ ਨੂੰ ਹੋਰ ਜਟਿਲਤਾ ਦੀ ਲੋੜ ਨਹੀਂ—ਉਨ੍ਹਾਂ ਨੂੰ ਸਾਂਝੇ ਨਿਯਮ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। Vue ਦੀਆਂ ਕਨਵੇਂਸ਼ਨਾਂ ਕੋਡਬੇਸ ਵਿੱਚ ਇੱਕ ਸਾਂਝੀ ਭਾਸ਼ਾ ਬਣ ਜਾਂਦੀਆਂ ਹਨ: ਇਕਸਾਰ ਕੰਪੋਨੈਂਟ ਰਚਨਾ, ਪੇਸ਼ਗੋਈਯੋਗ ਡੇਟਾ ਫਲੋ, ਅਤੇ ਇੱਕ ਟੈਮਪਲੇਟ ਸਿੰਟੈਕਸ ਜੋ ਕੋਡ ਰਿਵਿਊਜ਼ ਵਿੱਚ ਚੰਗਾ ਲੱਗਦਾ ਹੈ।
ਜਦੋਂ ਸਕੇਲ ਹੋਰ ਫਰਮਾਲਿਟੀ ਮੰਗਦਾ ਹੈ, Vue ਇਸ ਨੂੰ ਬਿਨਾਂ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤੇ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ: typed props ਅਤੇ emits, ਸਖ਼ਤ linting, ਅਤੇ ਮਾਡਯੂਲਰ composables ਜੋ reuse ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦੇ ਹਨ। ਤੁਸੀਂ ਆਸਾਨ-ਆਨ-ਰੈਂਪ ਰੱਖਦੇ ਹੋ ਅਤੇ ਟੀਮ ਵਧਣ 'ਤੇ ਗਾਰਡਰੇਲਜ਼ ਜੋੜਦੇ ਹੋ।
Vue ਦੀ ਸ਼ੁਰੂਆਤੀ ਵਾਧਾ ਵੱਡੇ frontend ਟੂਲਚੇਨਾਂ ਦੇ ਨਾਲ ਹੋਇਆ—webpack configs, ਲੰਬੇ installs, ਅਤੇ dev ਸਰਵਰ ਜੋ ਨਤੀਜਾ ਵੇਖਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਫ਼ੀ ਦੇਰ ਕਰਦਾ। Vue CLI ਨੇ ਉਸ ਜ਼ਮਾਨੇ ਨੂੰ ਆਸਾਨ ਬਣਾਇਆ ਪਰ ਜ਼ਮੀਨ੍ਹੀ ਹਕੀਕਤ ਇਹ ਸੀ ਕਿ ਪ੍ਰੋਜੈਕਟ ਵਧਣ 'ਤੇ cold starts ਧੀਮੇ ਹੋ ਜਾਂਦੇ, rebuilds ਮਹਿੰਗੇ ਹੁੰਦੇ, ਅਤੇ ਛੋਟੇ-ਫੇਰਨូនਸ ਵੀ ਵੱਡੇ ਮਹਿਸੂਸ ਹੁੰਦੇ।
ਟੂਲਿੰਗ ਵਿਹਵਾਰ ਨੂੰ ਆਕਾਰ ਦਿੰਦੀ ਹੈ। ਜਦੋਂ feedback loops ਧੀਮੇ ਹੁੰਦੇ ਹਨ, ਟੀਮਾਂ ਬਦਲਾਵਾਂ ਨੂੰ ਭਾਂਡਾ ਕਰਦੀਆਂ, refactor ਕਰਨ ਤੋਂ ਹਿਚਕਚਾਉਂਦੀਆਂ, ਅਤੇ exploratory ਸੁਧਾਰਾਂ ਨੂੰ ਟਾਲਦੀਆਂ—ਕਿਉਂਕਿ ਹਰ ਕੋਸ਼ਿਸ਼ ਮਹਿੰਗੀ ਪੈਂਦੀ ਹੈ। ਹਫਤਿਆਂ ਵਿੱਚ, ਉਹ ਰੁਕਾਵਟ ਗੁਣਵੱਤਾ 'ਤੇ ਚੁੱਪ-ਚਾਪ ਅਸਰ ਪਾਉਂਦੀ ਹੈ: “ਬਾਅਦ ਵਿੱਚ ਠੀਕ ਕਰਾਂਗੇ”, ਘੱਟ ਛੋਟੇ-ਸੁਧਾਰ, ਅਤੇ ਬਗਜ਼ ਦੀ ਉਮੀਦ ਕਈ ਵਾਰ ਇਸ ਲਈ ਬਚ ਜਾਂਦੇ ਹਨ ਕਿਉਂਕਿ ਦੁਬਾਰਾ ਚਲਾਉਣਾ ਉਤਨਾ ਆਸਾਨ ਨਹੀਂ।
Vite (Evan You ਦੁਆਰਾ ਬਣਾਇਆ) ਇੱਕ ਰੀਸੈਟ ਸੀ ਜੋ Vue ਦੀ ਦਾਰਸ਼ਨਿਕਤਾ ਨੂੰ ਮੇਲ ਕਰਦਾ: ceremony ਘਟਾਓ ਅਤੇ ਵਰਕਫਲੋ ਸਾਫ਼ ਰੱਖੋ।
ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਸਭ ਕੁਝ ਪਹਿਲਾਂ ਬੰਡਲ ਕਰਨ ਦੀ ਥਾਂ, Vite ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੂਲ ES ਮੌਡੀਊਲਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ ਕੋਡ ਤੁਰੰਤ ਸਰਵ ਕੀਤਾ ਜਾ ਸਕੇ, ਅਤੇ dependencies ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪ੍ਰੀ-ਬੰਡਲ ਕਰਦਾ ਹੈ। ਪ੍ਰਭਾਵੀ ਨਤੀਜਾ: dev ਸਰਵਰ ਤੇਜ਼ੀ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਅੱਪਡੇਟ ਲਗਭਗ ਤੁਰੰਤ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ।
ਪ੍ਰੋਡਕਸ਼ਨ ਬਿਲਡ ਲਈ, Vite ਇੱਕ ਪ੍ਰוגעਸ਼ੀ ਬੰਡਲਿੰਗ ਪਹੁੰਚ ਵਰਤਦਾ ਹੈ (Rollup ਦੇ ਜ਼ਰੀਏ) ਤਾਂ ਕਿ “ਤੇਜ਼ dev” ਦਾ ਮਤਲਬ "ਖਤਰਨਾਕ ਡਿਪਲੋਏ" ਨਾ ਹੋਵੇ। ਤੁਸੀਂ ਤੇਜ਼ ਇਤਰੈਸ਼ਨ ਪਾਉਂਦੇ ਹੋ ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਅਨੁਕੂਲਤਮ ਤੇਸ਼ਨ-ਅਪਟਿਮਾਈਜ਼ਡ ਆਉਟਪੁੱਟ ਵੀ ਭੇਜ ਰਹੇ ਹੁੰਦੇ ਹੋ।
ਜਦੋਂ ਬਦਲਾਅ ਤੁਰੰਤ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ, ਡਿਵੈਲਪਰ ਛੋਟੇ ਕਦਮਾਂ ਵਿੱਚ ਖ਼ਿਆਲਾਂ ਨੂੰ ਟੈਸਟ ਕਰਦੇ ਹਨ। ਇਸ ਨਾਲ ਸਾਫ਼ ਕੰਪੋਨੈਂਟ, ਜ਼ਿਆਦਾ ਭਰੋਸੇਯੋਗ ਸੋਧਾਂ ਅਤੇ ਤੇਜ਼ ਰਿਵਿਊ ਚੱਕਰ ਉਤਪੰਨ ਹੁੰਦੇ ਹਨ। ਇਹ ਨਾਨ-ਸਪੈਸ਼ਲਿਸਟਾਂ—ਡਿਜ਼ਾਈਨਰਾਂ ਜੋ ਮਾਰਕਅੱਪ ਸੋਧ ਰਹੇ ਹਨ, QA ਜੋ ਮੁੱਦੇ ਦੁਹਰਾਉਂਦੇ ਹਨ—ਲਈ ਭੀ ਸੁਲਭ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਪ੍ਰੋਜੈਕਟ ਜ਼ਿਆਦਾ ਰਿਸ਼ਤੇਦਾਰ ਅਤੇ ਘੁਮਣ-ਫਿਰਣ ਯੋਗ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।
ਜੇ ਤੁਸੀਂ ਟੀਮ ਵਿੱਚ UI ਧਾਰਣਾਂ ਦਾ ਮੁਲਾਂਕਣ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੇਜ਼ ਪ੍ਰੋਟੋਟਾਈਪਿੰਗ ਮੂਲ ਰੀਪੋ ਤੋਂ ਬਾਹਰ ਵੀ ਫਾਇਦਾ ਦੇ ਸਕਦੀ ਹੈ। ਉਦਾਹਰਣ ਵਜੋਂ, ਟੀਮਾਂ ਕਭੀ-ਕਭੀ Koder.ai ਵਰਗੇ ਪਲੇਟਫਾਰਮ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ (ਇੱਕ vibe-coding ਪਲੇਟਫਾਰਮ) ਤਾਂ ਜੋ ਚੈਟ ਪ੍ਰਾਂਪਟ ਤੋਂ ਨਿੱਕਲਦੇ ਡਿਸਪੋਜ਼ੇਬਲ ਪ੍ਰੋਟੋਟਾਈਪ ਤੇਜ਼ੀ ਨਾਲ ਬਣ ਸਕਣ—ਫਿਰ ਸਰੋਤ ਕੋਡ ਐਕਸਪੋਰਟ ਕਰੋ, ਸਨੈਪਸ਼ਾਟ ਲਓ, ਅਤੇ ਮੁੱਖ ਮਾਈਗ੍ਰੇਸ਼ਨ ਯੋਜਨਾ 'ਤੇ ਜਮ੍ਹਾਂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਟਰੇਟ ਕਰੋ।
Vue ਦੀ ਲੋਕਪ੍ਰਿਯਤਾ ਸਿਰਫ਼ ਕੋਰ ਲਾਇਬ੍ਰੇਰੀ ਕਾਰਨ ਨਹੀਂ ਹੈ—ਇਹ ਇਸ ਗੱਲ ਕਾਰਨ ਵੀ ਹੈ ਕਿ ਇਸਦੇ ਆਲੇ-ਦੁਆਲੇ “ਠੀਕ ਕੱਦਮ” ਵਾਲੀ ਅਧਿਕਾਰਤ ਟੂਲਿੰਗ ਹੈ। ਰਾਊਟਿੰਗ, ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ, ਅਤੇ ਡੀਬੱਗਿੰਗ ਆਮ ਤੌਰ 'ਤੇ ਉਹ ਤਿੰਨ ਚੀਜ਼ਾਂ ਹਨ ਜਿਨ੍ਹਾਂ ਦੀ ਜ਼ਿਆਦातर ਐਪਸ ਨੂੰ ਜ਼ਰੂਰਤ ਪੈਂਦੀ ਹੈ, ਅਤੇ Vue ਦਾ ਇਕੋਸਿਸਟਮ ਉਹਨਾਂ ਨੂੰ ਐਸਾ ਕਰਦਾ ਹੈ ਬਿਨਾਂ ਕੋਈ ਸਭ-ਜਾਂ-ਕੁਝ ਆਰਕੀਟੈਕਚਰ ਲਾਦਣ ਦੇ।
ਅਕਸਰ ਟੀਮਾਂ ਲਈ, Vue Router ਪਹਿਲਾ ਐਡ-ਆਨ ਹੁੰਦਾ ਹੈ ਜੋ “ਕੰਪੋਨੈਂਟਾਂ ਵਾਲਾ ਪੇਜ਼” ਨੂੰ "ਇੱਕ ਐਪ" ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਇਹ ਤੁਹਾਨੂੰ ਸਕਰੂਨ ਡੈਫਾਈਨ ਕਰਨ ਦੀ ਥਾਂ ਦਿੰਦਾ ਹੈ, ਯੂਜ਼ਰ ਕਿਵੇਂ ਉਨ੍ਹਾਂ ਵਿਚਕਾਰ ਤੁਰਦੇ ਹਨ, ਅਤੇ URLs UI ਨਾਲ ਕਿਵੇਂ ਮੇਲ ਖਾਂਦੀਆਂ ਹਨ।
ਬੁਨਿਆਦੀ ਨੈਵੀਗੇਸ਼ਨ ਤੋਂ ਉੱਪਰ, ਇਹ ਸਿਹਤਮੰਦ ਸੰਗਠਨ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦਾ ਹੈ: ਮੁੱਖ-ਸਤਰ ਦੇ ਰੂਟ (ਡੈਸ਼ਬੋਰਡ, ਸੈਟਿੰਗਜ਼, ਚੈੱਕਆਊਟ), nested routes ਉਪ-ਭਾਗਾਂ ਲਈ, ਅਤੇ route params ਜਿਵੇਂ /users/:id ਲਈ। lazy-loaded route components initial load ਤੇਜ਼ ਰੱਖਣ 'ਚ ਮਦਦ ਕਰਦੇ ਹਨ, ਜਦੋਂ ਕਿ navigation guards authentication ਜਾਂ unsaved changes ਨੂੰ ਇਕਸਾਰ ਹੈਂਡਲ ਕਰਨ ਲਈ ਮਦਦਗਾਰ ਹੁੰਦੇ ਹਨ।
ਸਟੇਟ ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਬਹੁਤ ਸਾਰੀਆਂ ਐਪਸ ਆਕਸਮਾਤ ਬੁਝਾਰਤ ਵੱਲ ਵਧਦੀਆਂ ਹਨ। Vue ਦੀ ਤਾਕਤ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਅਕਸਰ ਸਧਾਰਨ ਪੈਟਰਨਾਂ ਨਾਲ ਕਾਫੀ ਦੂਰ ਤੱਕ ਜਾ ਸਕਦੇ ਹੋ:
provide/injectਜਦੋਂ ਤੁਸੀਂ ਕਈ ਸਕਰੂਨਾਂ ਵਿੱਚ ਸਾਂਝਾ state ਦੀ ਲੋੜ ਮਹਿਸੂਸ ਕਰਦੇ ਹੋ, Vue ਦਾ ਆਧੁਨਿਕ ਡੈਫਾਲਟ Pinia ਹੈ। ਇਹ ਸਾਧਾਰਨ JavaScript ਦੇ ਬਹੁਤ ਨੇੜੇ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ: stores ਸਪਸ਼ਟ ਹਨ, actions ਪੜ੍ਹਨ ਵਿੱਚ ਆਸਾਨ ਹਨ, ਅਤੇ TypeScript ਸਮਰਥਨ ਮਜ਼ਬੂਤ ਹੈ।
ਮੁੱਖ ਗੱਲ ਇਹ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਜਟਿਲ ਗਲੋਬਲ ਸਟੇਟ ਲਈ "ਉਨੀਵਰਸਲ ਗਰੇਜੂਏਸ਼ਨ" ਨਹੀਂ ਕਰਨੀ ਪੈਂਦੀ ਕਿਉਂਕਿ ਐਪ ਵਧ ਰਹੀ ਹੈ। ਕਈ ਐਪਸ ਸਿਰਫ਼ ਕੁਝ ਛੋਟੇ stores (auth, preferences, notifications) ਅਤੇ ਵਧੀਆ ਕੰਪੋਨੈਂਟ ਸੀਮਾ ਨਾਲ ਬਹੁਤ ਕੁਝ ਕਰ ਲੈਂਦੇ ਹਨ।
Vue Devtools ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਕਾਰਨ ਹੈ ਕਿ Vue ਰੋਜ਼ਾਨਾ ਕਾਮਕਾਜ ਵਿੱਚ ਦੋਸਤਾਨਾ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਐਪ ਦੇ ਅਦਿੱਖੇ ਹਿੱਸਿਆਂ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ: ਕੰਪੋਨੈਂਟ ਢਾਂਚਾ, props, emitted events, ਅਤੇ reactive state ਅਪਡੇਟ। ਤੁਹਾਨੂੰ ਸਹਾਇਤਾ ਮਿਲਦੀ ਹੈ ਕਿ ਤੁਸੀਂ state ਨੂੰ inspect ਕਰ ਸਕੋ, supported setups ਵਿੱਚ time-travel ਕਰ ਸਕੋ, ਅਤੇ ਵੇਖ ਸਕੋ ਕਿ ਕਿਸੇ ਕੰਪੋਨੈਂਟ ਨੇ ਕਿਉਂ re-render ਕੀਤਾ—ਸਭ ਕੁਝ ਇੱਕ ਜਗ੍ਹਾ ਤੇ।
ਉਹ ਫੀਡਬੈਕ ਲੂਪ—ਕੋਡ ਬਦਲੋ, state ਵੇਖੋ, UI ਸਮਝੋ—ਅਨਿਸ਼ਚਿਤਤਾ ਘਟਾਉਂਦਾ ਹੈ ਅਤੇ ਟੀਮਾਂ ਨੂੰ ਪ੍ਰਕ੍ਰਿਆਵਤ ਤੇਜ਼ੀ ਨਾਲ ਅੱਗੇ ਵਧਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
Vue ਦੀ ਲੋਕਪ੍ਰਿਯਤਾ ਸਿਰਫ਼ APIs ਦਾ ਨਤੀਜਾ ਨਹੀਂ—ਇਹ ਇਸ ਗੱਲ ਤੇ ਵੀ ਨਿਰਭਰ ਹੈ ਕਿ ਪ੍ਰੋਜੈਕਟ ਖੁਦ ਨੂੰ ਕਿਵੇਂ ਸਮਝਾਉਂਦਾ ਹੈ ਅਤੇ ਫ਼ੈਸਲੇ ਜਨਤਕ ਢੰਗ ਨਾਲ ਕਿਵੇਂ ਲਏ ਜਾਂਦੇ ਹਨ।
Vue ਦੀ ਡੌਕ ਯਾਤਰਾ-ਰੂਪ ਰਾਇਧੀ ਲਿਖੀ ਗਈ ਹੈ: ਇੱਕ ਛੋਟਾ ਮਾਨਸਿਕ ਮਾਡਲ (ਟੈਮਪਲੇਟ + reactive state) ਦੇ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ, ਉਦਾਹਰਨਾਂ ਆਜ਼ਮਾਓ, ਫਿਰ ਡੂੰਘਾਈ ਵਿਚ ਜਾਓ। ਪੰਨੇ ਆਮ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗਿਕ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦਿੰਦੇ ਹਨ—"ਇਹ ਕਿਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ?", "ਮੈ ਇਹ ਕਦੋਂ ਵਰਤਾਂ?", "ਇੱਕ ਘੱਟੋ ਘੱਟ ਸੰસ્કਰਣ ਕੀ ਹੈ?"—ਨਾ ਕਿ ਇਹ ਮੰਨ ਕੇ ਚੱਲਦੇ ਹਨ ਕਿ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਫ਼ਿਲਾਸਫੀ ਜਾਣਦੇ ਹੋ।
ਇਹ ਅੰਦਾਜ਼ ਸੁਗਮਤਾ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਜਦੋਂ ਅਧਿਕਾਰਤ ਡੌਕਸ ਸਪਸ਼ਟ ਉਦਾਹਰਨ, ਇਕਸਾਰ ਸ਼ਬਦਾਵਲੀ, ਅਤੇ ਅਪ-ਟੂ-ਡੇਟ ਸੁਝਾਅ ਦਿੰਦੇ ਹਨ, ਟੀਮਾਂ ਬਲੌਗ ਪੋਸਟਾਂ ਵਿੱਚ ਘੁੰਮਣ ਵਾਲਾ ਸਮਾਂ ਘਟਾ ਕੇ ਜ਼ਿਆਦਾ ਸਮਾਂ শਿਪਿੰਗ 'ਤੇ ਖਰਚ ਕਰਦੀਆਂ ਹਨ।
Vue ਸਾਲਾਂ ਤੋਂ ਖੁਲੇ ਚਰਚਾ 'ਤੇ ਨਿਰਭਰ ਰਹੀ ਹੈ, ਖ਼ਾਸ ਕਰਕੇ RFCs (Request for Comments) ਰਾਹੀਂ। RFCs ਵੱਡੇ ਬਦਲਾਅਾਂ ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਪ੍ਰਸਤਾਵਾਂ ਵਿੱਚ ਤਬਦੀਲ ਕਰਦੇ ਹਨ, ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਟਰੇਡ-ਆਫ਼, ਵਿਕਲਪ ਅਤੇ ਮਾਈਗ੍ਰੇਸ਼ਨ ਵਿਚਾਰ ਸ਼ਾਮਿਲ ਹੁੰਦੇ ਹਨ। ਇਹ ਇੱਕ ਸਾਂਝਾ ਰੈਫਰੈਂਸ ਪਤਾ ਬਣਾਉਂਦਾ ਹੈ: ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਕਿਉਂ ਬਦਲਾਅ ਆਇਆ, ਨਾ ਕਿ ਸਿਰਫ਼ ਕੀ ਬਦਲਿਆ।
ਮੈਂਟੇਨਰ ਪ੍ਰਸਤਾਵਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰਦੇ ਹਨ, ਦਿਸ਼ਾ ਦਿੰਦੇ ਹਨ, ਅਤੇ ਗੁਣਵੱਤਾ ਦੇ ਮਿਆਰ ਸੈੱਟ ਕਰਦੇ ਹਨ—ਜਦਕਿ ਵਿਆਪਕ ਕਮਿਊਨਿਟੀ ਐਜ-ਕੇਸ ਅਤੇ ਅਸਲ-ਦੁਨੀਆ ਪਾਬੰਦੀਆਂ ਨੂੰ ਉੱਠਾਉਂਦੀ ਹੈ। ਨਤੀਜਾ ਇੱਕ ਐਸਾ ਪ੍ਰੋਜੈਕਟ ਹੁੰਦਾ ਹੈ ਜੋ ਰਹੱਸਮਈ ਦੀ ਥਾਂ ਪੇਸ਼ਗੋਈਯੋਗ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।
ਟੀਮਾਂ ਲਈ ਇੱਕ ਫ੍ਰੇਮਵਰਕ ਅਪਣਾਉਣਾ ਆਮ ਤੌਰ 'ਤੇ ਨਿਰਭਰ ਕੀਤੇ ਰਹਿੰਦਾ ਹੈ ਕੁਝ ਨਿਰਾਪਦ ਚੀਜ਼ਾਂ 'ਤੇ:
ਇਹ ਨਿਸ਼ਾਨੇ ਲੰਬੇ ਸਮੇਂ ਦੇ ਖ਼ਤਰੇ ਨੂੰ ਘਟਾਉਂਦੇ ਹਨ। Vue ਦਾ ਇਕੋਸਿਸਟਮ ਇੱਕ ਸੰਭਾਲਿਆ ਹੋਇਆ ਉਤਪਾਦ ਜਿਹਾ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ, ਨ ਕਿ ਪਰਖ-ਇਤਿਹਾਸਕ ਪ੍ਰਯੋਗਾਂ ਦਾ ਇਕ ਜਥਾ—ਬਿਨਾਂ ਇਹ ਜ਼ਰੂਰੀ ਬਣਾਉਂਦੇ ਹੋਏ ਕਿ ਤੁਹਾਨੂੰ enterprise-ਸਟਾਈਲ ਪ੍ਰਕਿਰਿਆ ਦੀ ਲੋੜ ਹੋਵੇ।
“ਐਂਟਰਪਰਾਈਜ਼ ਜਟਿਲਤਾ” ਆਮ ਤੌਰ 'ਤੇ ਹੋਰ ਫੀਚਰ ਲਿਖਣ ਦੀ ਗੱਲ ਨਹੀਂ—ਇਹ ਤੁਹਾਡੇ ਕੋਡਬੇਸ ਵਿੱਚ ਹੋਰ ਪ੍ਰਕਿਰਿਆ ਲਿਜਾਣ ਦੀ ਗੱਲ ਹੁੰਦੀ ਹੈ। ਵਾਸਤਵਿਕ ਰੂਪ ਵਿੱਚ, ਇਹ ਭਾਰੀ ਸੰਰਚਨਾ ਲਈ ਕਿਉਂ: ਬਿਲਡ ਅਤੇ lint ਰੂਲਾਂ ਦੀ ਪਰਤ, ਜਿਨ੍ਹਾਂ ਨੂੰ ਕੇਵਲ ਕੁਝ ਲੋਕ ਸਮਝਦੇ ਹਨ; ਸਖ਼ਤ ਪੈਟਰਨ ਜਿਹੜੇ ਹਰ ਇੱਕ ਨੂੰ maanta ਕਰਨੇ ਪੈਂਦੇ ਹਨ; ਅਤੇ ਲੰਬਾ onboarding ਜਿੱਥੇ ਨਵੇਂ ਵਿਕਾਸਕਾਂ ਨੂੰ ਛੋਟੇ ਬਦਲਾਅ ਭੇਜਣ ਲਈ ਹਫ਼ਤਿਆਂ ਲੱਗ ਜਾਂਦੇ ਹਨ।
Vue ਨੇ ਮੁੱਖਧਾਰਾ ਵਰਤੋਂ ਵਿੱਚ ਸਕੇਲ ਕੀਤਾ ਹੈ ਬਿਨਾਂ ਇਹ ਓਵਰਹੈੱਡ ਲਾਜ਼ਮੀ ਬਣਾਉਣ ਦੇ।
Vue ਚੰਗੇ ਅਭਿਆਸਾਂ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦਾ ਹੈ—ਛੋਟੇ ਕੰਪੋਨੈਂਟ ਬਾਉਂਡਰੀਜ਼, ਪੇਸ਼ਗੋਈਯੋਗ reactivity, ਅਤੇ ਇੱਕ ਸਪਸ਼ਟ template-to-state ਫਲੋ—ਬਿਨਾਂ ਦਿਨ ਇੱਕ ਤੋਂ ਹੀ ਇੱਕ ਆਰਕੀਟੈਕਚਰ imposed ਕਰਨ ਦੇ। ਤੁਸੀਂ ਇੱਕ ਸਧਾਰਨ ਸੁਧਾਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ, ਫਿਰ ਜਦੋਂ ਉਤਪਾਦ ਉਸਨੂੰ ਮੰਗੇ ਤਾਂ multi-route ਐਪ ਅਤੇ state management ਵਿੱਚ ਵਾਧਾ ਕਰ ਸਕਦੇ ਹੋ।
ਇਹ ਲਚਕੀਲਤਾ Vue ਪ੍ਰੋਜੈਕਟਾਂ ਦੀ ਸਾਂਝੀ ਰਚਨਾ ਵਿੱਚ ਦਿੱਸਦੀ ਹੈ:
ਨਤੀਜਾ ਇੱਕ ਐਸਾ ਫ੍ਰੇਮਵਰਕ ਹੈ ਜੋ ਵਾਸਤਵ ਵਿੱਚ ਸਕੇਲ ਵਾਲੀਆਂ ਟੀਮਾਂ (ਕਈ ਯੋਗਦਾਨਕ, ਲੰਬੇ ਸਮੇਂ ਵਾਲੇ ਕੋਡਬੇਸ) ਨੂੰ ਸਹਾਰਦਾ ਹੈ, ਫਿਰ ਭੀ ਇੱਕ ਨਵੇਂ ਆਉਣ ਵਾਲੇ ਲਈ ਰਿਪੋ ਖੋਲ੍ਹਣ 'ਤੇ ਸੁਗਮ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ।
Vue ਇਕ ਹੀ “ਸਹੀ” ਆਰਕੀਟੈਕਚਰ impose ਨਹੀਂ ਕਰੇਗਾ—ਇਹ ਇੱਕ ਤਾਕਤ ਹੈ—ਪਰ ਇਹ ਵੀ ਮਤਲਬ ਹੈ ਕਿ ਟੀਮਾਂ ਨੂੰ conventions 'ਤੇ ਸਹਿਮਤ ਹੋਣਾ ਪੈਂਦਾ ਹੈ। ਬਿਨਾਂ ਸਾਂਝੇ ਫੈਸਲਿਆਂ (ਫੋਲਡਰ ਸਟਰੱਕਚਰ, ਕਦੋਂ composables ਪੇਸ਼ ਕਰਨੇ, ਨਾਂਕਰਨ ਪੈਟਰਨ, state ਹੱਦਾਂ) ਦੇ, ਲਚਕੀਲਤਾ ਅਕਸਰ ਅਸੰਯਮਿਤਤਾ ਵਿੱਚ ਬਦਲ ਸਕਦੀ ਹੈ।
ਸਭ ਤੋਂ ਵਧੀਆ Vue ਟੀਮਾਂ ਸ਼ੁਰੂ ਵਿੱਚ ਕੁਝ ਹਲਕੇ ਨਿਯਮ ਲਿਖਦੀਆਂ ਹਨ, ਫਿਰ ਫਰੇਮਵਰਕ ਨੂੰ ਰੁਕਾਵਟ ਤੋਂ ਬਾਹਰ ਰੱਖਦੀਆਂ ਹਨ ਜਿਵੇਂ ਉਤਪਾਦ ਵਧਦਾ ਹੈ।
Vue ਉਹ ਵੇਲੇ ਬੇਹਤਰ ਕੰਮ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਆਧੁਨਿਕ UI ਚਾਹੁੰਦੇ ਹੋ ਬਿਨਾਂ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਵੱਡੀ ਰੀਰਾਈਟ ਵਿੱਚ ਬਦਲਣ ਦੇ। ਟੀਮਾਂ ਅਕਸਰ ਇਸਨੂੰ ਚੁਣਦੀਆਂ ਹਨ ਜਦੋਂ ਉਹ ਪੜ੍ਹਨਯੋਗ ਕੋਡ, ਤੇਜ਼ onboarding, ਅਤੇ "ਸਧਾਰਨ ਪੇਜ਼ ਸੁਧਾਰ" ਤੋਂ ਲੈ ਕੇ ਪੂਰੇ ਐਪ ਤੱਕ ਕ੍ਰਮਿਕ ਰਾਹ ਮੰਗਦੀਆਂ ਹਨ।
ਆਮ, ਪਰਖੇ ਹੋਏ ਕੇਸਾਂ ਵਿੱਚ ਸ਼ਾਮਿਲ ਹਨ:
Vue ਮਿਕਸਡ ਸਟੈਕਸ ਨਾਲ ਵੀ ਚੰਗੀ ਤਰ੍ਹਾਂ ਅਨੁਕੂਲ ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ ਕੁਝ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਸਰਵਰ-ਰੈਂਡਰਡ ਐਪ (Rails, Laravel, Django) ਵਿੱਚ ਐਂਬੈੱਡ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਉਥੋਂ ਵਧ ਸਕਦੇ ਹੋ।
ਜੇ ਪਰਫਾਰਮੈਂਸ, SEO, ਜਾਂ ਪਹਿਲੀ ਲੋਡ ਸਪੀਡ ਮਹੱਤਵਪੂਰਨ ਬਣ ਜਾਂਦੀ ਹੈ, ਤਾਂ server-side rendering (SSR) ਅਗਲਾ ਕਦਮ ਹੋ ਸਕਦਾ ਹੈ। ਕਈ ਟੀਮਾਂ ਲਈ, ਇਹ ਓਦੋਂ ਹੀ Nuxt (এক Vue meta-framework) ਵੱਲ ਰੁਖ ਕਰਦੀ ਹੈ: ਇਹ ਰਾਊਟਿੰਗ, ਡੇਟਾ ਫੈਚਿੰਗ, SSR/static ਜਿਨਰੇਸ਼ਨ ਅਤੇ ਡਿਪਲੋਏਮੈਂਟ ਪੈਟਰਨਾਂ ਲਈ ਕਨਵੇਂਸ਼ਨਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ ਇੱਕ ਸਕੇਲ ਕਰਨ ਦਾ ਰਾਹ ਹੈ—ਦਿਨ ਪਹਿਲੇ ਦਿਨ ਦੀ ਲੋੜ ਨਹੀਂ।
ਨੈਮੂਨਾ-ਚੈਕਲਿਸਟ Vue ਦਾ ਮੁਲਾਂਕਣ ਕਰਨ ਅਤੇ ਇੱਕ ਘੱਟ-ਖਤਰਿਆਂ ਵਾਲਾ ਪਾਇਲਟ ਯੋਜਨਾ ਬਣਾਉਣ ਲਈ:
ਜੇ ਤੁਸੀਂ ਪਾਇਲਟ ਦੀ ਲਾਗਤ ਹੋਰ ਘੱਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਕ ਪੈਰੱਲੈਲ ਪ੍ਰੋਟੋਟਾਈਪ ਬਣਾਉਣ 'ਤੇ ਵਿਚਾਰ ਕਰੋ ਤਾਂ ਜੋ ਵਰਕਫਲੋ ਅਤੇ ਮੰਗਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਸਾਬਤ ਕੀਤਾ ਜਾ ਸਕੇ। Koder.ai ਵਰਗੀਆਂ ਪਲੇਟਫਾਰਮਾਂ ਟੀਮਾਂ ਨੂੰ ਚੈਟ-ਅਧਾਰਤ ਸਪੀਸ (planning mode, snapshots, ਅਤੇ ਕੋਡ ਐਕਸਪੋਰਟ) ਤੋਂ ਕਾਰਜਕਾਰੀ ਐਪ ਦਾ ਡ੍ਰਾਫਟ ਤਿਆਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ—ਜੋ ਮੁੱਖ ਸਟੈਕ 'ਚ ਵੱਡੀ ਰੀਲਾਈਜ਼ ਤੋਂ ਪਹਿਲਾਂ ਸਕਰੀਨਾਂ, ਡੇਟਾ ਫਲੋ ਅਤੇ ਸਵੀਕਾਰਤਾ ਮਾਪਦੰਡ ਨੂੰ ਸਪષ્ટ ਕਰਨ ਲਈ ਲਾਭਦਾਇਕ ਹੈ।
Evan You ਨੇ Vue.js ਉਸ ਵੇਲੇ ਬਣਾਈ ਜਦੋਂ ਉਹ ਵੱਡੇ ਫ੍ਰੇਮਵਰਕਾਂ ਨਾਲ ਕੰਮ ਕਰ ਰਿਹਾ ਸੀ ਅਤੇ ਉਹ ਕੁਝ ਐਸਾ ਚਾਹੁੰਦਾ ਸੀ ਜੋ component-ਅਧਾਰਤ UI ਦੀ ਤਾਕਤ ਰੱਖੇ ਪਰ ਰੋਜ਼ਮਰਾ ਦੇ ਕੰਮ ਵਿੱਚ ਘਟਾਉਂਟ ਨਾ ਲਿਆਵੇ।
ਪ੍ਰੋਜੈਕਟ ਦੀ “ਪર્સਨਲ ਉਤਪੱਤੀ” Vue ਦੀਆਂ ਪ੍ਰਾਥਮਿਕਤਾਵਾਂ ਵਿੱਚ ਦਰਸਦੀ ਹੈ: ਪਰਿਚਿਤਤਾ (HTML/CSS/JS-ਪਹਿਲਾ), ਸਾਫ਼ ਪੈਟਰਨ, ਅਤੇ ਇੱਕ ਵਰਕਫ਼ਲੋ ਜੋ ਸਕੇਲ ਹੋਣ 'ਤੇ ਭੀ ਹਲਕਾ ਰਹਿੰਦਾ ਹੈ।
“ਸੁਗਮਤਾ” ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਉਹੀ ਤਤੱਵ ਵਰਤ ਕੇ ਤੇਜ਼ੀ ਨਾਲ ਉਤਪਾਦਕ ਹੋ ਸਕਦੇ ਹੋ ਜੋ ਪਹਿਲਾਂ ਹੀ HTML, CSS ਅਤੇ JavaScript ਵਿੱਚ ਆਧਾਰਤ ਹੁੰਦੇ ਹਨ।
ਵਿਵਹਾਰਕ ਤੌਰ 'ਤੇ ਇਹ ਪੜ੍ਹਨਯੋਗ ਟੈਮਪਲੇਟਾਂ, ਲਗਾਤਾਰ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ (directives), ਮਦਦਗਾਰ ਐਰਰ ਸੰਦਰਭ ਅਤੇ ਇੱਕ ਐਸਾ ਰਾਹ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਬਿਨਾਂ ਪੂਰੇ ਆਰਕੀਟੈਕਚਰ 'ਤੇ ਕਬਜ਼ਾ ਕੀਤੇ ਸ਼ੁਰੂ ਕਰਨ ਦਿੰਦਾ ਹੈ।
ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ Vue ਨੂੰ ਕਦਮ-ਵਾਰ ਆਪਣੀਆਂ ਪ੍ਰਾਜੈਕਟਾਂ ਵਿੱਚ ਸ਼ਾਮਿਲ ਕਰ ਸਕਦੇ ਹੋ ਬਿਨਾਂ ਸਾਰੇ ਕੋਡ ਨੂੰ ਇੱਕ ਵਾਰੀ ਵਿੱਚ ਦੁਬਾਰਾ ਲਿਖਣ ਦੇ।
ਆਮ ਤਰੀਕਾ:
ਤਿੰਨ ਪ੍ਰਯੋਗਿਕ ਰਾਹ ਹਨ:
ਸਭ ਤੋਂ ਛੋਟੀ ਪਹੁੰਚ ਚੁਣੋ ਜੋ ਮੁੱਲ ਸਾਬਿਤ ਕਰੇ, ਫਿਰ ਟੀਮ ਦੇ ਅਨੁਭਵ ਅਧਾਰ 'ਤੇ ਮਿਆਰੀਕਰਨ ਕਰੋ।
SFCs (Single-File Components) template, logic ਅਤੇ styles ਨੂੰ ਇਕੱਠੇ ਰੱਖਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਕੰਟੈਕਸਟ-ਚੇਂਜ ਘੱਟ ਹੁੰਦਾ ਹੈ।
ਇੱਕ ਆਮ SFC ਤੁਹਾਨੂੰ ਦਿੰਦਾ ਹੈ:
ਇਹ ਇੰਟਰਏਸ਼ਨ ਤੇਜ਼ ਕਰਦੇ ਹਨ ਅਤੇ ਰਿਫੈਕਟਰਿੰਗ ਨੂੰ ਸੁਰੱਖਿਅਤ ਬਣਾਉਂਦੇ ਹਨ।
Scoped styles CSS ਨੂੰ ਸਿਰਫ਼ ਉਸ ਕੰਪੋਨੈਂਟ ਤਕ ਸੀਮਿਤ ਕਰਦੇ ਹਨ, ਜੋ ਅਣਚਾਹੀ ਟੁਟਫੁਟ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ।
ਅਮਲ ਵਿੱਚ:
ਇਹ ਚੰਗੀ CSS ਆਰਕੀਟੈਕਚਰ ਦਾ ਬਦਲ ਨਹੀਂ ਹੈ, ਪਰ ਤੇਜ਼ ਇਵੋਲ੍ਵਿੰਗ ਵਿੱਚ ਅਣਚਾਹੇ ਪ੍ਰਭਾਵ ਘਟਾ ਦਿੰਦਾ ਹੈ।
Vue ਦਾ ਮੌਸਿਕ ਮਾਡਲ ਹੈ: state ਬਦਲਦਾ ਹੈ → UI پاڻ-ਬ-ਪਾਂਇਟ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦੀ ਹੈ।
ਤੁਸੀਂ DOM ਨੂੰ ਹੱਥੋਂ-ਹੱਥੋਂ ਨਚਾਉਣ ਦੀ ਥਾਂ reactive state ਨੂੰ ਅੱਪਡੇਟ ਕਰਦੇ ਹੋ ਅਤੇ Vue ਉਸ ਬਦਲਾਅ ਨੂੰ ਉਨ੍ਹਾਂ ਥਾਵਾਂ 'ਤੇ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿੱਥੇ ਉਹ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਨਾਲ ਕਾਰਵਾਈਆਂ ਟ੍ਰੇਸ ਕਰਨੀ ਆਸਾਨ ਹੁੰਦੀ ਹੈ।
Computed derived values ਲਈ ਹਨ ਅਤੇ watchers side-effects ਲਈ।
ਕਾਇਦਾ ਆਮ:
ਜੇ ਨਤੀਜਾ ਦਿਖਾਇਆ ਜਾਂਦਾਆਂ ਜਾਂ ਬਾਈਂਡ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਪਹਿਲਾਂ computed ਬਚਾਉ।
ਦੋਨੋਂ ਇਕੱਠੇ ਵਰਤੇ ਜਾ ਸਕਦੇ ਹਨ:
ਅਧਿਕਤਮ ਟੀਮਾਂ ਦੋਹਾਂ ਮਿਲਾ ਕੇ ਵਰਤਦੀਆਂ ਹਨ: ਸਾਦੇ ਹਿਸਿਆਂ ਲਈ Options API ਅਤੇ reuse/organization ਲੋੜਾਂ ਲਈ Composition API।
ਸਧਾਰਨ ਰੂਪ ਵਿੱਚ ਪਹਿਲਾਂ ਇਹ ਅਧਾਰਕ ਟੂਲ ਅਪਣਾਓ ਅਤੇ ਜਰੂਰਤ ਅਨੁਸਾਰ ਵਧੋ:
SEO/ਪਹਿਲੀ ਲੋਡ ਪਰਫਾਰਮੈਂਸ ਜੇ ਜ਼ਰੂਰੀ ਹੋਵੈ ਤਾਂ SSR/Nuxt ਨੂੰ ਇੱਕ ਸਕੇਲਿੰਗ ਕਦਮ ਵਜੋਂ ਲੈਓ—ਇਹ ਡੇਫੌਲਟ ਨਹੀਂ।