±à¼ÍƼö: |
±¾ÎÄÖØµã½éÉÜ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
npm install -g vue-cli |
°²×°³É¹¦ºó£¬ÎÒÃǼ´¿ÉʹÓà vue ÃüÁ²âÊÔ·½·¨£º
µÚ¶þ²½£¬³õʼ»¯ vue ÏîÄ¿£º
ÊäÈëÃüÁîºó£¬»á³öÏÖÃüÁîÐн»»¥´°¿Ú£¬ÕâÀïÎÒÃÇÑ¡Ôñ 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> |
Æô¶¯ÏîÄ¿£º

״̬ºÍʼþ°ó¶¨
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ÌØÐÔ¸øÌæ»»µô¡£
|