Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Model Center   Code  
»áÔ±   
   
 
     
   
 ¶©ÔÄ
  ¾èÖú
vue 3.0 ³õÌåÑé £¨ÏîÄ¿´î½¨£©
 
×÷Õߣº -¹-
  2266  次浏览      31
 2021-2-4
 
±à¼­ÍƼö:
±¾ÎÄÖØµã½éÉÜVue 3.0 ÏîÄ¿³õʼ»¯ÒÔ¼°»ù±¾ÌØÐÔÌåÑ飬ϣÍû¶ÔÄúµÄѧϰÓÐËù°ïÖú¡£
±¾ÎÄÀ´×ÔÓÚ²©¿ÍÔ°,ÓÉ»ðÁú¹ûÈí¼þAlice±à¼­ÍƼö¡£

ǰÑÔ

½ñÌì·ÖÏíÁËvue-next v3.0.0-beta.1 °æ±¾

²»ÒªÌ«´Ì¼¤Å¶

6´óÁÁµã

Performance£ºÐÔÄܸü±ÈVue 2.0Ç¿¡£

Tree shaking support£º¿ÉÒÔ½«ÎÞÓÃÄ£¿é¡°¼ô¼­¡±£¬½ö´ò°üÐèÒªµÄ¡£

Composition API£º×éºÏAPI

Fragment, Teleport, Suspense£º¡°Ë鯬¡±£¬Teleport¼´Protal´«ËÍÃÅ£¬¡°ÐüÄ

Better TypeScript support£º¸üÓÅÐãµÄTsÖ§³Ö

Custom Renderer API£º±©Â¶ÁË×Ô¶¨ÒåäÖȾAPI

ÏÖÔÚ¾ÍÂíÉϽøÈë´î½¨°É

°üÀ¨ÁË

1.»ùÓÚ vue-cli ¿ìËٴ Vue 3.0 ÏîÄ¿

2.Vue 3.0 »ù±¾ÌØÐÔÌåÑé

3.¼¯³É vue-router ºÍ vuex 4.0

Vue 3.0 ÏîÄ¿³õʼ»¯

µÚÒ»²½£¬°²×° vue-cli£º

npm install -g @vue/cli

×¢ÒâÒÔÏÂÃüÁîÊÇ´íÎóµÄ£¡

npm install -g vue
npm install -g vue-cli

°²×°³É¹¦ºó£¬ÎÒÃǼ´¿ÉʹÓà vue ÃüÁ²âÊÔ·½·¨£º

$ vue -V
@vue/cli 4.3.1

µÚ¶þ²½£¬³õʼ»¯ vue ÏîÄ¿£º

vue create vue-next-test

ÊäÈëÃüÁîºó£¬»á³öÏÖÃüÁîÐн»»¥´°¿Ú£¬ÕâÀïÎÒÃÇÑ¡Ôñ Manually select features£º

Vue CLI v4.3.1
Please pick a preset:
default (babel, eslint)
Manually select features

ËæºóÎÒÃǹ´Ñ¡£ºRouter¡¢Vuex¡¢CSS Pre-processors ºÍ Linter / Formatter£¬

ÕâЩ¶¼ÊÇ¿ª·¢ÉÌÒµ¼¶ÏîÄ¿±ØÐëµÄ£º

Vue CLI v4.3.1
Please pick a preset: Manually select features
Check the features needed for your project:
Babel
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
CSS Pre-processors
Linter / Formatter
Unit Testing
E2E Testing

×¢Ò⣺Vue 3.0 ÏîĿĿǰÐèÒª´Ó Vue 2.0 ÏîÄ¿Éý¼¶¶øÀ´£¬ËùÒÔΪÁËÖ±½ÓÉý¼¶µ½ Vue 3.0 È«¼ÒͰ£¬

ÎÒÃÇÐèÒªÔÚ Vue ÏîÄ¿´´½¨¹ý³ÌÖй´Ñ¡ Router ºÍ Vuex£¬ËùÒÔ±ÜÃâÊÖ¶¯Ð´³õʼ»¯´úÂë

Éý¼¶ Vue 3.0 ÏîÄ¿

Ŀǰ´´½¨ Vue 3.0 ÏîÄ¿ÐèҪͨ¹ý²å¼þÉý¼¶µÄ·½Ê½À´ÊµÏÖ£¬

vue-cli »¹Ã»ÓÐÖ±½ÓÖ§³Ö£¬ÎÒÃǽøÈëÏîĿĿ¼£¬²¢ÊäÈëÒÔÏÂÖ¸Á

cd vue-next-test
vue add vue-next

Ö´ÐÐÉÏÊöÖ¸Áîºó£¬»á×Ô¶¯°²×° vue-cli-plugin-vue-next ²å¼þ£¨²é¿´ÏîÄ¿´úÂ룩£¬¸Ã²å¼þ»áÍê³ÉÒÔϲÙ×÷£º

1.°²×° Vue 3.0 ÒÀÀµ

2.¸üРVue 3.0 webpack loader ÅäÖã¬Ê¹ÆäÄܹ»Ö§³Ö .vue Îļþ¹¹½¨£¨Õâµã·Ç³£ÖØÒª£©

3.´´½¨ Vue 3.0 µÄÄ£°å´úÂë

×Ô¶¯½«´úÂëÖÐµÄ Vue Router ºÍ Vuex Éý¼¶µ½ 4.0 °æ±¾£¬Èç¹ûδ°²×°Ôò²»»áÉý¼¶

×Ô¶¯Éú³É Vue Router ºÍ Vuex Ä£°å´úÂë

Íê³ÉÉÏÊö²Ù×÷ºó£¬ÏîÄ¿ÕýʽÉý¼¶µ½ Vue 3.0£¬

×¢Òâ¸Ã²å¼þ»¹²»ÄÜÖ§³Ö typescript£¬Óà typescript µÄͬѧ»¹µÃÔٵȵȡ££¨¾ÍÊÇĿǰ»¹²»Ì«Ö§³ÖTS£©

Vue 3.0 »ù±¾ÌØÐÔÌåÑé

ÏÂÃæÎÒÃÇ´ÓÏîÄ¿¿ª·¢µÄ½Ç¶ÈÖð²½ÌåÑé Vue 3.0 µÄ¿ª·¢Á÷³Ì

´´½¨Â·ÓÉ

ÏîÄ¿¿ª·¢ÖУ¬ÎÒÃÇͨ³£ÐèÒª´´½¨ÐÂÒ³Ãæ£¬È»ºóÌí¼Ó·ÓÉÅäÖã¬

ÎÒÃÇÔÚ /src/views Ŀ¼Ï´´½¨ Test.vue£º

<template>
<div class="test">
<h1>vue3.0 ³õÌåÑé</h1>
<p>ÉÙÄêÄãµÄÍ··¢¿É»¹ºÃ£¬¹þ¹þ¹þ¹þ¹þ</p>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.test {
color: red;
}
</style>

Ö®ºóÔÚ /src/router/index.js Öд´½¨Â·ÓÉÅäÖãº

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})export default router

³õʼ»¯ Vue Router µÄ¹ý³ÌÓë 3.0 °æ±¾±ä»¯²»´ó£¬Ö»ÊÇ֮ǰ²ÉÓù¹Ô캯ÊýµÄ·½Ê½£¬

ÕâÀï¸ÄΪʹÓà createRouter À´´´½¨ Vue Router ʵÀý£¬

ÅäÖõķ½·¨»ù±¾Ò»Ö£¬ÅäÖÃÍê³ÉºóÎÒÃÇ»¹ÐèÒªÔÚ App.vue ÖÐÔö¼ÓÁ´½Óµ½ Test.vue µÄ·ÓÉ£º

<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link>
</div>
<router-view/>
</div>
</template>

 

Æô¶¯ÏîÄ¿£º

npm run serve

 

״̬ºÍʼþ°ó¶¨

Vue 3.0 Öж¨Òå״̬µÄ·½·¨¸ÄΪÀàËÆ React Hooks µÄ·½·¨£¬ÏÂÃæÎÒÃÇÔÚ Test.vue Öж¨ÒåÒ»¸ö״̬ count£º

<template>
<div class="test">
<h1>test count: {{count}}</h1>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const count = ref(0)
return {
count
}
}
}
</script>

Vue 3.0 Öгõʼ»¯×´Ì¬Í¨¹ý setup ·½·¨£¬

¶¨Òå״̬ÐèÒªµ÷Óà ref ·½·¨¡£½ÓÏÂÀ´ÎÒÃǶ¨ÒåÒ»¸öʼþ£¬ÓÃÀ´¸üРcount ״̬£º

<template>
<div class="test">
<h1>test count: {{count}}</h1>
<button @click="add">add</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
return {
count,
add
}
}
}
</script>

ÕâÀïµÄ add ·½·¨²»ÔÙÐèÒª¶¨ÒåÔÚ methods ÖУ¬

µ«×¢Òâ¸üРcount ÖµµÄʱºò²»ÄÜÖ±½ÓʹÓà count++£¬¶øÓ¦Ê¹Óà count.value++£¬

¸üдúÂëºó£¬µã»÷°´Å¥£¬count µÄÖµ¾Í»á¸üÐÂÁË£º

¼ÆËãÊôÐԺͼàÌýÆ÷

Vue 3.0 ÖмÆËãÊôÐԺͼàÌýÆ÷µÄʵÏÖÒÀÀµ computed ºÍ watch ·½·¨£º

<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<button @click="add">add</button>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
return {
count,
doubleCount,
add
}
}
}
</script>

¼ÆËãÊôÐÔ computed ÊÇÒ»¸ö·½·¨£¬ÀïÃæÐèÒª°üº¬Ò»¸ö»Øµ÷º¯Êý£¬µ±ÎÒÃÇ·ÃÎʼÆËãÊôÐÔ·µ»Ø½á¹ûʱ£¬»á×Ô¶¯»ñÈ¡»Øµ÷º¯ÊýµÄÖµ£º

const doubleCount = computed(() => count.value * 2)

¼àÌýÆ÷ watch ͬÑùÊÇÒ»¸ö·½·¨£¬Ëü°üº¬ 2 ¸ö²ÎÊý£¬2 ¸ö²ÎÊý¶¼ÊÇ function£º

watch(() => count.value,
val => {
console.log(`count is ${val}`)
})

µÚÒ»¸ö²ÎÊýÊǼàÌýµÄÖµ£¬count.value ±íʾµ± count.value ·¢Éú±ä»¯¾Í»á´¥·¢¼àÌýÆ÷µÄ»Øµ÷º¯Êý£¬¼´µÚ¶þ¸ö²ÎÊý£¬µÚ¶þ¸ö²ÎÊý¿ÉÒÔÖ´ÐмàÌýʱºòµÄ»Øµ÷

Èç¹ûÊÇ2 ¸öÒÔÉϵļàÌýÊôÐÔ ¾ÍÕâÑù

watch(
[refA, () => refB.value],
([a, b], [prevA, prevB]) => {
console.log(`a is: ${a}`)
console.log(`b is: ${b}`)
}
)

»ñȡ·ÓÉ

Vue 3.0 ÖÐͨ¹ý getCurrentInstance ·½·¨»ñÈ¡µ±Ç°×é¼þµÄʵÀý£¬È»ºóͨ¹ý ctx ÊôÐÔ»ñµÃµ±Ç°ÉÏÏÂÎÄ£¬

ctx.$router ÊÇ Vue Router ʵÀý£¬ÀïÃæ°üº¬ÁË currentRoute ¿ÉÒÔ»ñÈ¡µ½µ±Ç°µÄ·ÓÉÐÅÏ¢

<script>
import { getCurrentInstance } from 'vue'
export default {
setup () {
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
}
}
</script>

Vuex ¼¯³É

Vuex µÄ¼¯³É·½·¨ÈçÏ£º

¶¨Òå Vuex ״̬

µÚÒ»²½£¬ÐÞ¸Ä src/store/index.js Îļþ£º

import Vuex from 'vuex'
export default Vuex.createStore({
state: {
test: {
a: 1
}
},
mutations: {
setTestA(state, value) {
state.test.a = value
}
},
actions: {
},
modules: {
}
})

Vuex µÄÓï·¨ºÍ API »ù±¾Ã»Óиıä,ÎÒÃÇÔÚ state Öд´½¨ÁËÒ»¸ö test.a ״̬£¬ÔÚ mutations ÖÐÌí¼ÓÁËÐÞ¸Ä state.test.a ״̬µÄ·½·¨£º setTestA

ÒýÓà Vuex ״̬

µÚ¶þ²½£¬ÔÚ Test.vue ÖУ¬Í¨¹ý¼ÆËãÊôÐÔʹÓà Vuex ״̬£º

<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<div>state from vuex {{a}}</div>
<button @click="add">add</button>
</div>
</template>
<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
const a = computed(() => ctx.$store.state.test.a)
return {
count,
doubleCount,
add,
a
}
}
}
</script>

ÕâÀïÎÒÃÇͨ¹ý¼ÆËãÊôÐÔÀ´ÒýÓà Vuex ÖеÄ״̬£º

const a = computed(() => ctx.$store.state.test.a)

ctx ÊÇÉϽÚÖÐÎÒÃÇÌáµ½µÄµ±Ç°×é¼þʵÀý

¸üРVuex ״̬

¸üРVuex ״̬ÈÔȻʹÓà commit ·½·¨£¬ÕâµãºÍ Vuex 3.0 °æ±¾Ò»Ö£º

<template>
<div class="test">
<h1>test count: {{count}}</h1>
<div>count * 2 = {{doubleCount}}</div>
<div>state from vuex {{a}}</div>
<button @click="add">add</button>
<button @click="update">update a</button>
</div>
</template>
<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'
export default {
setup () {
const count = ref(0)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
const doubleCount = computed(() => count.value * 2)
const { ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value)
const a = computed(() => ctx.$store.state.test.a)
const update = () => {
ctx.$store.commit('setTestA', count)
}
return {
count,
doubleCount,
add,
a,
update
}
}
}
</script>

ÕâÀïÎÒÃǵã»÷ update a °´Å¥ºó£¬»á´¥·¢ update ·½·¨£¬´Ëʱ»áͨ¹ý ctx.$store.commit µ÷Óà setTestA ·½·¨£¬½« count µÄÖµ¸²¸Ç state.test.a µÄÖµ

×ܵÄЧ¹ûÄØÊÇÕâÑùµÄ£º

×ܽáϹþ£º

vue3.0¶¼Ð´ÔÚsetupÀÒÔǰµÄËùÓÐÊý¾Ý״̬¶¼Ð´ÔÚdataÀ

ËùÓз½·¨¶¼Ð´ÔÚmethodsÀ¶øÏÖÔÚ¿ÉÒÔ¸ù¾Ý¹¦ÄÜÄ£¿é°Ñ״̬ºÍ·½·¨µÈ»®·ÖÔÚÒ»Æð£¬¸üÀûÓÚÄ£¿é»¯£¬

²»¹ýÕâÑù¶Ô´úÂëϰ¹ßºÍÖÊÁ¿ÒªÇó¸ü¸ßÁË£¬³õѧÕßÓÃ3.0¿ÉÄÜ»áдµÄ¸ü»ìÂÒ

Ã²ËÆ vueÖð½¥react»¯£¬´æÔÚ¼´ºÏÀí¶Ô°É ¹þ¹þ

ºÃÅÂvuex»á±»provideºÍinjectÌØÐÔ¸øÌæ»»µô¡£

 

 
   
2266 ´Îä¯ÀÀ       31
Ïà¹ØÎÄÕÂ

Éî¶È½âÎö£ºÇåÀíÀôúÂë
ÈçºÎ±àд³öÓµ±§±ä»¯µÄ´úÂë
ÖØ¹¹-ʹ´úÂë¸ü¼ò½àÓÅÃÀ
ÍŶÓÏîÄ¿¿ª·¢"±àÂë¹æ·¶"ϵÁÐÎÄÕÂ
Ïà¹ØÎĵµ

ÖØ¹¹-¸ÄÉÆ¼ÈÓдúÂëµÄÉè¼Æ
Èí¼þÖØ¹¹v2
´úÂëÕû½àÖ®µÀ
¸ßÖÊÁ¿±à³Ì¹æ·¶
Ïà¹Ø¿Î³Ì

»ùÓÚHTML5¿Í»§¶Ë¡¢Web¶ËµÄÓ¦Óÿª·¢
HTML 5+CSS ¿ª·¢
ǶÈëʽC¸ßÖÊÁ¿±à³Ì
C++¸ß¼¶±à³Ì
×îл¼Æ»®
DeepSeek´óÄ£ÐÍÓ¦Óÿª·¢ 6-12[ÏÃÃÅ]
È˹¤ÖÇÄÜ.»úÆ÷ѧϰTensorFlow 6-22[Ö±²¥]
»ùÓÚ UML ºÍEA½øÐзÖÎöÉè¼Æ 6-30[±±¾©]
ǶÈëʽÈí¼þ¼Ü¹¹-¸ß¼¶Êµ¼ù 7-9[±±¾©]
Óû§ÌåÑé¡¢Ò×ÓÃÐÔ²âÊÔÓëÆÀ¹À 7-25[Î÷°²]
ͼÊý¾Ý¿âÓë֪ʶͼÆ× 8-23[±±¾©]
 
×îÐÂÎÄÕÂ
ÈçºÎÉè¼Æ¸ßÀ©Õ¹µÄÔÚÏßÍøÒ³ÖÆ×÷ƽ̨
electronÈëÃÅÐĵÃ
ʹÓà Electron ¹¹½¨×ÀÃæÓ¦ÓÃ
VUE.JS×é¼þ»¯¿ª·¢Êµ¼ù
ÉîÈëÀí½âJSCore
×îпγÌ
HTML 5 + CSS3 Ô­ÀíÓ뿪·¢Ó¦ÓÃ
Webǰ¶Ë¸ß¼¶¹¤³Ìʦ±Ø±¸¼¼ÄÜʵս
Vue´óÐÍÏîÄ¿¿ª·¢ÊµÕ½
ReactÔ­ÀíÓëʵ¼ù
Vue.js½ø½×Óë°¸Àýʵ¼ù
³É¹¦°¸Àý
Öн»¼¯ÍÅ ¹¹½¨Web×Ô¶¯»¯²âÊÔ¿ò¼Ü
ijָÃûµçÐŹ«Ë¾ Vue.js½ø½×Óë°¸Àý
¹úµçÍ¨ÍøÂç¼¼Êõ HTML5+CSS3 +webǰ¶Ë¿ò
ÒÆ¶¯Í¨ÐÅ ÒÆ¶¯»¥ÁªÍøÓ¦Óÿª·¢Ô­Àí
ijµçÁ¦ÐÐ android¿ª·¢Æ½Ì¨×î¼Ñ