Vue 3.6 ਦਾ ਆਉਣ ਵਾਲਾ Vapor Mode ਇਸ ਪਤਝੜ ਵਿੱਚ ਰਿਲੀਜ਼ ਹੋਵੇਗਾ, ਅਤੇ ਇਹ ਕੁਝ ਅਜਿਹਾ ਕਰਦਾ ਹੈ ਜੋ ਫਰੇਮਵਰਕ ਨੇ ਪਹਿਲਾਂ ਕਦੇ ਨਹੀਂ ਕੀਤਾ: ਇਹ ਸਿੰਗਲ-ਫਾਈਲ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਸਿੱਧੇ-ਸਿੱਧੇ DOM ਅਪਡੇਟਸ ਵਿੱਚ ਕੰਪਾਈਲ ਕਰਦਾ ਹੈ, ਜੋ ਪੂਰੀ ਤਰ੍ਹਾਂ ਵਰਚੁਅਲ DOM ਨੂੰ ਬਾਈਪਾਸ ਕਰ ਦਿੰਦਾ ਹੈ।
ਕਿਉਂ Vue ਵਰਚੁਅਲ DOM ਤੋਂ ਦੂਰ ਹੋ ਰਿਹਾ ਹੈ
Vue 2 ਤੋਂ ਹੀ, ਵਰਚੁਅਲ DOM ਫਰੇਮਵਰਕ ਦੇ ਰਿਐਕਟੀਵਿਟੀ ਮਾਡਲ ਦਾ ਕੇਂਦਰ ਰਿਹਾ ਹੈ। ਜਦੋਂ ਸਟੇਟ ਬਦਲਦੀ ਹੈ, Vue ਇੱਕ ਹਲਕਾ ਇਨ-ਮੈਮੋਰੀ ਟ੍ਰੀ ਬਣਾਉਂਦਾ ਹੈ, ਪਿਛਲੇ ਵਰਜ਼ਨ ਨਾਲ ਇਸਦੀ ਤੁਲਨਾ (diff) ਕਰਦਾ ਹੈ, ਅਤੇ ਸਿਰਫ਼ ਉਹਨਾਂ ਹਿੱਸਿਆਂ ਨੂੰ ਪੈਚ ਕਰਦਾ ਹੈ ਜੋ ਵੱਖਰੇ ਹਨ। ਇਹ ਅਸਿੱਧਾ ਤਰੀਕਾ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਇਸ ਚਿੰਤਾ ਤੋਂ ਬਿਨਾਂ ਡਿਕਲੇਰੇਟਿਵ ਕੋਡ ਲਿਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ ਕਿ ਕਿਹੜਾ ਐਲੀਮੈਂਟ ਅਸਲ ਵਿੱਚ ਅਪਡੇਟ ਹੋਣ ਦੀ ਲੋੜ ਹੈ। ਇਸ ਦਾ ਨੁਕਸਾਨ ਇਹ ਹੈ ਕਿ ਹਰ ਰੈਂਡਰ ਲਈ ਅਜੇ ਵੀ ਉਸ ਵਰਚੁਅਲ ਟ੍ਰੀ ਨੂੰ ਬਣਾਉਣ ਅਤੇ ਤੁਲਨਾ ਕਰਨ ਦੀ ਕੀਮਤ ਚੁਕਾਉਣੀ ਪੈਂਦੀ ਹੈ।
Vapor Mode ਉਸ ਵਿਚਕਾਰਲੇ ਕਦਮ ਨੂੰ ਖਤਮ ਕਰ ਦਿੰਦਾ ਹੈ। ਬਿਲਡ ਦੌਰਾਨ, Vue ਕੰਪਾਈਲਰ ਟੈਂਪਲੇਟ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਦਾ ਹੈ ਅਤੇ ਅਜਿਹੀ JavaScript ਜਨਰੇਟ ਕਰਦਾ ਹੈ ਜੋ ਨੇਟਿਵ DOM ਮੈਥਡਸ—element.textContent = …, element.setAttribute(...)—ਨੂੰ ਸਿੱਧੇ ਉਸ ਜਗ੍ਹਾ 'ਤੇ ਕਾਲ ਕਰਦੀ ਹੈ ਜਿੱਥੇ ਬਦਲਾਅ ਦੀ ਲੋੜ ਹੈ। ਕੋਈ ਵਰਚੁਅਲ ਨੋਡ ਨਹੀਂ ਬਣਾਏ ਜਾਂਦੇ, ਕੋਈ ਡਿਫਿੰਗ ਲੂਪ ਨਹੀਂ ਚੱਲਦਾ। ਬੰਡਲ ਵਿੱਚ ਸਿਰਫ਼ ਉਹ ਕੋਡ ਹੁੰਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਦੁਆਰਾ ਲਿਖੇ ਗਏ ਅਸਲ ਅਪਡੇਟਸ ਲਈ ਲੋੜੀਂਦਾ ਹੈ, ਨਾਲ ਹੀ ਰਿਐਕਟੀਵਿਟੀ ਲਈ ਲੋੜੀਂਦਾ ਰਨਟਾਈਮ।
ਅਸਲ ਦੁਨੀਆ ਵਿੱਚ ਸਾਈਜ਼ ਅਤੇ ਸਪੀਡ 'ਤੇ ਪ੍ਰਭਾਵ
- ਬੰਡਲ ਸਾਈਜ਼ – ਵਰਚੁਅਲ-DOM ਰਨਟਾਈਮ ਅਤੇ ਇਸਦੇ ਡੇਟਾ ਸਟ੍ਰਕਚਰ ਨੂੰ ਹਟਾ ਕੇ, ਜਨਰੇਟ ਕੀਤਾ ਗਿਆ ਕੋਡ ਛੋਟਾ ਹੋ ਜਾਂਦਾ ਹੈ। ਉਹਨਾਂ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਜਿੱਥੇ ਵੱਡੇ ਗ੍ਰਿਡ ਜਾਂ ਕੈਨਵਸ ਹੁੰਦੇ ਹਨ ਜੋ ਪ੍ਰਤੀ ਸੈਕਿੰਡ ਦਰਜਨਾਂ ਵਾਰ ਅਪਡੇਟ ਹੁੰਦੇ ਹਨ, ਉਹ ਬਚਤ ਕਾਫ਼ੀ ਹੁੰਦੀ ਹੈ, ਖਾਸ ਕਰਕੇ ਘੱਟ ਬੈਂਡਵਿਡਥ ਵਾਲੇ ਕਨੈਕਸ਼ਨਾਂ 'ਤੇ।
- ਪਰਫਾਰਮੈਂਸ – ਸਿੱਧੇ DOM ਕਾਲਸ ਡਿਫਿੰਗ ਓਵਰਹੈੱਡ ਨੂੰ ਛੱਡ ਦਿੰਦੇ ਹਨ, ਜੋ ਉਦੋਂ ਸਾਫ਼ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਜਦੋਂ UI ਉੱਚ ਫ੍ਰੀਕੁਐਂਸੀ 'ਤੇ ਬਦਲਦਾ ਹੈ। ਕੁਝ ਨਿੱਜੀ ਬ੍ਰਾਊਜ਼ਰ ਗੇਮਾਂ—ਇੱਕ nonogram, ਇੱਕ minesweeper ਕਲੋਨ, ਅਤੇ ਇੱਕ 3-D Rubik’s-cube ਵਿਜ਼ੂਅਲਾਈਜ਼ਰ—ਵਿੱਚ, ਮੈਂ ਰੈਂਡਰਿੰਗ ਲੌਜਿਕ ਨੂੰ ਹੱਥ ਨਾਲ ਲਿਖਿਆ ਸੀ, ਅਤੇ DOM ਨੂੰ ਸਿਰਫ਼ ਉੱਥੇ ਹੀ ਅਪਡੇਟ ਕੀਤਾ ਜਿੱਥੇ ਲੋੜ ਸੀ।
- ਡਿਵੈਲਪਰ ਐਰਗੋਨੋਮਿਕਸ – ਕੰਪਾਈਲਰ ਸਾਰਾ ਮੁੱਖ ਕੰਮ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਅਜੇ ਵੀ ਆਮ Vue ਟੈਂਪਲੇਟ ਲਿਖਦੇ ਹੋ; ਤੁਹਾਨੂੰ
document.querySelectorਕਾਲਸ ਨੂੰ ਹੱਥ ਨਾਲ ਲਿਖਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਜਨਰੇਟ ਕੀਤਾ ਗਿਆ ਕੋਡ ਉਸੇ ਹੱਥ ਨਾਲ ਲਿਖੇ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਸ ਨੇ ਮੈਨੂੰ ਉਹਨਾਂ ਗੇਮਾਂ ਵਿੱਚ ਸਭ ਤੋਂ ਵਧੀਆ ਪਰਫਾਰਮੈਂਸ ਦਿੱਤੀ ਸੀ।
ਜਦੋਂ Vapor Mode ਅਸਲ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ
- ਵੱਡੀਆਂ ਬਣਤਰਾਂ 'ਤੇ ਉੱਚ-ਫ੍ਰੀਕੁਐਂਸੀ ਅਪਡੇਟਸ – ਗੇਮਾਂ,
Vapor Mode Vue ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਦੋਵਾਂ ਦੁਨੀਆਵਾਂ ਦੀਆਂ ਸਭ ਤੋਂ ਵਧੀਆ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ: ਉਹ declarative syntax ਜਿਸ ਨੂੰ ਉਹ ਪਸੰਦ ਕਰਦੇ ਹਨ ਅਤੇ ਹੱਥ ਨਾਲ ਤਿਆਰ ਕੀਤੇ ਗਏ DOM ਅੱਪਡੇਟਸ ਦੀ ਅਸਲ ਰਫ਼ਤਾਰ। ਇਹ ਉਹਨਾਂ ਐਪਸ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ ਜੋ ਪ੍ਰਤੀ ਸੈਕਿੰਡ ਕਈ ਵਾਰ UI ਦੇ ਵੱਡੇ ਹਿੱਸਿਆਂ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰਦੀਆਂ ਹਨ ਅਤੇ ਉਹਨਾਂ ਡਿਪਲਾਈਮੈਂਟਸ ਲਈ ਜਿੱਥੇ ਹਰ ਕਿਲੋਬਾਈਟ ਮਾਇਨੇ ਰੱਖਦੀ ਹੈ। ਘੱਟ ਟ੍ਰੈਫਿਕ ਵਾਲੇ ਇੰਟਰਫੇਸਾਂ ਲਈ, ਰਵਾਇਤੀ virtual DOM ਇੱਕ ਬਿਲਕੁਲ ਉਚਿਤ ਅਤੇ ਸਰਲ ਵਿਕਲਪ ਬਣਿਆ ਹੋਇਆ ਹੈ। ਜਿਵੇਂ ਕਿ ਇਹ ਫੀਚਰ release candidate ਤੋਂ stable ਸਟੇਜ ਵੱਲ ਵਧਦਾ ਹੈ, Vue ਕਮਿਊਨਿਟੀ ਨੂੰ ਬੰਡਲ-ਸਾਈਜ਼ ਦੀ ਬਚਤ ਦੀ ਤੁਲਨਾ ecosystem ਦੀ ਤਿਆਰੀ ਅਤੇ ਆਪਣੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੇ ਖਾਸ ਪਰਫਾਰਮੈਂਸ ਪ੍ਰੋਫਾਈਲ ਨਾਲ ਕਰਨੀ ਪਵੇਗੀ।