H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】vue.js杩涘叆浜唙ue3 RC闃舵锛屾纭Э鍔块湼姘旇繋鎺?/a>

馃憫 馃憫 馃憫 馃憫 馃憫 馃憫 馃憫 馃憫

绋垮畾璁捐瀵煎嚭-20200720-120017.png

image.png

杩涘叆浜唕c鐗堟湰闃舵锛?

3.0.0-rc.2 (2020-07-20)
3.0.0-rc.1 (2020-07-17)

— Alpha(伪)锛氶瑙堢増锛屾垨鑰呭彨鍐呴儴娴嬭瘯鐗堬紱涓€鑸笉鍚戝閮ㄥ彂甯冿紝浼氭湁寰堝Bug锛涗竴鑸彧鏈夋祴璇曚汉鍛樹娇鐢ㄣ€?
— Beta(尾)锛氭祴璇曠増锛屾垨鑰呭彨鍏紑娴嬭瘯鐗堬紱杩欎釜闃舵鐨勭増鏈細涓€鐩村姞鍏ユ柊鐨勫姛鑳斤紱鍦?Alpha鐗堜箣鍚庢帹鍑恒€?
— RC(Release Candidate)锛氭渶缁堟祴璇曠増鏈紱鍙兘鎴愪负鏈€缁堜骇鍝佺殑鍊欓€夌増鏈紝濡傛灉鏈嚭鐜伴棶棰樺垯鍙彂甯冩垚涓烘寮忕増鏈€?

澶氭暟寮€婧愯蒋浠朵細鎺ㄥ嚭涓や釜RC鐗堟湰锛屾渶鍚庣殑 RC2 鍒欐垚涓烘寮忕増鏈€?

Here we go ~~

浜旀璧板ぉ涓嬪幓鎬濊€冿紝姝ユ娓愯繘锛?/p>

  • 鎴戜滑鎬庝箞鍏ユ墜锛?/li>
  • 鏈夊摢浜涙柊濉獳PI锛熷拰vue2涓嶄竴鏍风殑鍦版柟锛?/li>
  • 蹇湪鍝噷锛屾垜浠浣曞緱鐭ワ紵
  • 澶ч儴鍒嗗熀浜巚ue2鐨勭涓夋柟缁勪欢搴撻潰涓寸潃鍗囩骇锛?/li>
  • 婧愮爜鍜屽懆杈圭煡璇嗙偣鍝簺鍊煎緱瀛︿範鐨勶紵

v3.vuejs.org

image.png

vue3涓€浜涙牳蹇?娴噷涓氮

鏇村皬鏇村揩
鏀寔鑷畾涔夋覆鏌撳櫒
闈欐€両D缁戝畾鏍囧織
鍝嶅簲寮忎慨鏀逛负鍩轰簬Proxy鐨勪睛娴?br>娣卞害缁撳悎typescript
鍩轰簬treeshaking浼樺寲
Cache Handlers(浜嬩欢渚﹀惉鍣ㄧ殑缂撳瓨)

setup()
ref()
watchEffect()
effect() 鍜?reactive()

涓?2.x 鐗堟湰鐢熷懡鍛ㄦ湡鐩稿搴旂殑缁勫悎寮?API

beforeCreate 鈫?浣跨敤 setup()
created 鈫?浣跨敤 setup()
beforeMount 鈫?onBeforeMount
mounted 鈫?onMounted
beforeUpdate 鈫?onBeforeUpdate
updated 鈫?onUpdated
beforeDestroy 鈫?onBeforeUnmount
destroyed 鈫?onUnmounted
errorCaptured 鈫?onErrorCaptured

濡備綍浣跨敤vue-next-template-explorer鐜╀竴鐜╋紵
https://vue-next-template-exp…

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
 聽return (_openBlock(), _createBlock("div", null, [
 聽 聽_createVNode("span", null, "static"),
 聽 聽_createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)//1 patchflag flag鏄紪璇戞椂鐢熸垚鐨勪竴涓厤缃紝鍙湁甯atchflag鐨凬ode(鑺傜偣)浼氳杩借釜锛屾瘮杈僼ext鐨勬枃瀛楀彉鍔? 聽 聽 聽
  ]))
}
<div>
 聽<span>static</span>
 聽<span>
 聽  {{msg}}
 聽</span> 
</div>

vite绠€浠?
vite 鏄竴涓熀浜?Vue3 鍗曟枃浠剁粍浠剁殑闈炴墦鍖呭紑鍙戞湇鍔″櫒锛屽畠鍋氬埌浜嗘湰鍦板揩閫熷紑鍙戝惎鍔細

1銆佸揩閫熺殑鍐峰惎鍔紝涓嶉渶瑕佺瓑寰呮墦鍖呮搷浣滐紱
2銆佸嵆鏃剁殑鐑ā鍧楁洿鏂帮紝鏇挎崲鎬ц兘鍜屾ā鍧楁暟閲忕殑瑙h€﹁鏇存柊椋炶捣锛?br>3銆佺湡姝g殑鎸夐渶缂栬瘧锛屼笉鍐嶇瓑寰呮暣涓簲鐢ㄧ紪璇戝畬鎴愶紝杩欐槸涓€涓法澶х殑鏀瑰彉銆?/p>

鐗瑰緛灏辨槸浣跨敤浜咵S Module,浠g爜浠ユā鍧楃殑褰㈠紡寮曞叆鍒版枃浠讹紝鍚屾椂瀹炵幇浜嗘寜闇€鍔犺浇銆?
鍏舵渶澶х殑鐗圭偣鏄湪娴忚鍣ㄧ浣跨敤 export import 鐨勬柟寮忓鍏ュ拰瀵煎嚭妯″潡锛屽湪 script 鏍囩閲岃缃?type=”module” 锛岀劧鍚庝娇鐢?ES module銆?/p>

鐪嬬湅github杩欎釜椤圭洰锛?br>銆婂墠绔細瀹㈠巺绗竴鏈熶唬鐮併€嬪拰灏ゅぇ鑱妚ue3鐨?鎻愬崌锛?https://github.com/shengxinji…

涓夌浣撻獙vue3鐨勬柟寮?/p>

vue-cli

  • Vue create vue3-demo-cli
  • Vue add vue-next
  • 浠g爜鏂囦欢 vue3-demo-cli

webpack

  • 浠g爜鏂囦欢 vue-demo-webpack
  • 浠g爜浠撳簱

鏂板伐鍏穠ite

  • create-vite-app
  • 浠g爜鏂囦欢 vue3-demo-vite

鑰屼笖浣跨敤浜唚rk鏉ユ祴鍘嬶細

// vue2 12涓繘绋嬶紝300涓苟鍙戯紝鍘?9绉?鉃? ~ wrk -t12 -c300 -d19s http://localhost:3000/
Requests/sec:    130.58
Transfer/sec:     17.19MB
// vue3 12涓繘绋嬶紝300涓苟鍙戯紝鍘?9绉?鉃? ~ wrk -t12 -c300 -d19s http://localhost:3000/
Requests/sec:    288.21
Transfer/sec:     40.69MB

鍏ユ墜vue3,娴噷涓氮

涓ゆ寰楀ぉ涓嬶細

git clone https://github.com/vuejs/vue-next-webpack-preview.git
cd vue-next-webpack-preview
npm install

https://github.com/vuejs/vue-…

1銆佹鏌ue-cli鑴氭墜鏋剁増鏈紙vue -V锛夛紝浣庣増鏈殑瑕佹洿鏂帮紙npm install @vue/cli -g锛?br>2銆佸垱寤洪」鐩紙vue create vue3test 锛?br>3銆佽繘鍏ラ」鐩枃浠跺す锛屾洿鏂皏ue鐗堟湰锛坴ue add vue-next锛?br>4銆佽繍琛岄」鐩紙npm run serve锛?/p>

Tips: 涓嶆槸涓€甯嗛椤虹殑锛岃繃绋嬩腑浼拌鐨勪慨淇敼鏀癸紝椤圭洰鎵嶈兘璺戣捣鏉ワ紝O(鈭鈭?O鍝堝搱~_

鍏ユ墜vue3 demo,娴噷涓氮

https://vue3.github.io/vue3-N…

鍑犱釜vue3 demo锛岀粰浣犲己鍔垮叆闂╲ue3鏃朵唬銆?/p>

  • win10 datepanel
  • todolist
  • art 椹噷濂?/li>
  • 2019-ncov-vue3-version

绛夌瓑…

image.png

鍏跺疄瀹樼綉涔熶竴浜涘熀纭€妗堜緥锛?/p>

image.png

https://github.com/vuejs/vue-…

vue3婧愮爜闆嗗悎,娴噷涓氮

銆愯繖鏄叆鍙c€戜綘瑕佹壘鐨?vue 婧愮爜 鍏ㄥ畤瀹欑殑閮藉湪杩欙紒
https://github.com/vue3/vue3-…

vue3瀹夎涓嬫潵鐨勬槸鎵撳寘鍘嬬缉锛?br>image.png

鏍稿績浠g爜鍦ㄨ繖閲岋細
image.png

https://github.com/vuejs/vue-…

銆愯繖鏄叆鍙c€戜綘瑕佹壘鐨?vue 婧愮爜 鍏ㄥ畤瀹欑殑閮藉湪杩欙紒
https://github.com/vue3/vue3-…

鏌ョ湅鏇村,蹇呴』娴噷涓氮

Vue3+ & Vue-CLI3+ 寮€鍙戠敓鎬佸湀璧勮

璇ユ帹鑽愭枃绔犲垪琛ㄧ殑鏈€鏂拌祫璁細绗竴鏃堕棿鍙戝竷鍒癎ithub涓婏紝娆㈣繋Star锛?br> Find the latest breaking 鈭歷ue3 & vue-cli 3 News

馃殌娆㈣繋Star锛屽悗缁細涓嶆柇鏇存柊銆?
馃嚚馃嚦 鏈€鍚庢洿鏂版棩鏈燂細2锔忊儯0锔忊儯2锔忊儯0锔忊儯/0锔忊儯7锔忊儯/1锔忊儯7锔忊儯

銆?020銆?鈮♀墶鈮♀墶鈮♀墶鈮♀墶鈮♀墶鈮♀墶鈮♀墶鈮?———————– 銆?021銆?/p>

闄や簡鍗曠嫭Vue3璧勮锛屾杩庢煡鐪嬫洿澶歷ue.js璧勮锛氥€?a href=”https://github.com/itemsets/vue2″ rel=”nofollow”>銆愷煍ue.js璧勮馃摎銆戠洰鍓峸eb鍓嶇寮€鍙戦潪甯哥伀鐖嗙殑妗嗘灦锛涘畾鏃舵洿鏂帮紝娆㈣繋 Star 涓€涓嬨€?/a>銆?/p>

image.png

本文地址:H5W3 » 【前端技术】vue.js杩涘叆浜唙ue3 RC闃舵锛屾纭Э鍔块湼姘旇繋鎺?/a>

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址