<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • 本文的目的,是為了讓已經有 Vue2 開發經驗的?人?,快速掌握 Vue3 的寫法。

    因此,?本篇假定你已經掌握 Vue 的核心內容?,只為你介紹編寫 Vue3 代碼,需要了解的內容。

    一、Vue3 里 script 的三種寫法

    首先,Vue3 新增了一個叫做組合式 api 的東西,英文名叫 Composition API。因此 Vue3 的?script?現在支持三種寫法,

    1、最基本的 Vue2 寫法
    <template> ?<div>{{?count?}}</div> ?<button?@click="onClick"> ?增加?1 ?</button>
    </template> <script> export?default?{ ?data()?{ ?return?{ ?count:?1, ?}; ?},
    ?methods:?{ ?onClick()?{ ?this.count?+=?1; ?}, ?}, } </script>
    2、setup() 屬性
    <template> <div>{{ count }}</div> <button @click="onClick"> 增加 1 </button>
    </template> <script> import { ref } from 'vue'; export default { // 注意這部分
    setup() { let count = ref(1); const onClick = () => { count.value += 1; };
    return { count, onClick, }; }, } </script>
    3、<script setup>
    <template> <div>{{ count }}</div> <button @click="onClick"> 增加 1 </button>
    </template> <script setup> import { ref } from 'vue'; const count = ref(1);
    const onClick = () => { count.value += 1; }; </script>
    正如你看到的那樣,無論是代碼行數,還是代碼的精簡度,<script setup>?的方式是最簡單的形式。

    如果你對 Vue 很熟悉,那么,我推薦你使用?<script setup>?的方式。

    這種寫法,讓 Vue3 成了我最喜歡的前端框架。

    如果你還是前端新人,那么,我推薦你先學習第一種寫法。

    因為第一種寫法的學習負擔更小,先學第一種方式,掌握最基本的 Vue 用法,然后再根據我這篇文章,快速掌握 Vue3 里最需要關心的內容。

    第一種寫法,跟過去 Vue2 的寫法是一樣的,所以我們不過多介紹。

    第二種寫法,所有的對象和方法都需要?return?才能使用,太啰嗦。除了舊項目,可以用這種方式體驗 Vue3
    的新特性以外,我個人不建議了解這種方式。反正我自己暫時不打算精進這部分。

    所以,接下來,我們主要介紹的,也就是?<script setup>?,這種寫法里需要了解的內容。

    注意:?<script setup>?本質上是第二種寫法的語法糖,掌握了這種寫法,其實第二種寫法也基本上就會了。(又多了一個不學第二種寫法的理由)。

    二、如何使用 <script setup> 編寫組件

    學習 Vue3 并不代表你需要新學習一個技術,Vue3 的底層開發思想,跟 Vue2 是沒有差別的。

    V3 和 V2 的區別就像是,你用不同的語言或者方言說同一句話。

    所以我們需要關心的,就是 Vue2 里的內容,怎么用 Vue3 的方式寫出來。

    1、data——唯一需要注意的地方

    整個?data?這一部分的內容,你只需要記住下面這一點。

    以前在?data?中創建的屬性,現在全都用?ref()?聲明。

    在?template?中直接用,在?script?中記得加?.value?。

    在開頭,我就已經寫了一個簡單的例子,我們直接拿過來做對比。

    1)寫法對比
    // Vue2 的寫法 <template> <div>{{ count }}</div> <button @click="onClick"> 增加 1
    </button> </template> <script> export default { data() { return { count: 1, };
    }, methods: { onClick() { this.count += 1; }, }, } </script> // Vue3 的寫法
    <template> <div>{{ count }}</div> <button @click="onClick"> 增加 1 </button>
    </template> <script setup> import { ref } from 'vue'; // 用這種方式聲明 const count =
    ref(1); const onClick = () => { // 使用的時候記得 .value count.value += 1; }; </script>
    2)注意事項——組合式?api?的心智負擔

    a、ref 和 reactive

    Vue3 里,還提供了一個叫做?reactive?的?api。

    但是我的建議是,你不需要關心它。絕大多數場景下,ref?都夠用了。

    b、什么時候用?ref()?包裹,什么時候不用。

    要不要用ref,就看你的這個變量的值改變了以后,頁面要不要跟著變。

    當然,你可以完全不需要關心這一點,跟過去寫?data?一樣就行。

    只不過這樣做,你在使用的時候,需要一直?.value。

    c、不要解構使用

    在使用時,不要像下面這樣去寫,會丟失響應性。

    也就是會出現更新了值,但是頁面沒有更新的情況

    xml

    復制代碼
    // Vue3 的寫法 <template> <div>{{ count }}</div> <button @click="onClick"> 增加 1
    </button> </template> <script setup> import { ref } from 'vue'; const count =
    ref(1); const onClick = () => { // 不要這樣寫!! const { value } = count; value += 1;
    }; </script>
    注意:?學習 Vue3 就需要考慮像這樣的內容,徒增了學習成本。實際上這些心智負擔,在學習的過程中,是可以完全不需要考慮的。

    這也是為什么我推薦新人先學習 Vue2 的寫法。

    2、methods

    聲明事件方法,我們只需要在?script?標簽里,創建一個方法對象即可。

    剩下的在 Vue2 里是怎么寫的,Vue3 是同樣的寫法。

    xml

    復制代碼
    // Vue2 的寫法 <template> <div @click="onClick"> 這是一個div </div> </template>
    <script> export default { methods: { onClick() { console.log('clicked') }, }, }
    </script> //?Vue3?的寫法 <template> ?<div?@click="onClick"> ?這是一個div ?</div>
    </template> <script?setup> //?注意這部分 const?onClick?=?()?=>?{
    ?console.log('clicked') } </script>
    3、props

    聲明?props?我們可以用?defineProps(),具體寫法,我們看代碼。

    1)寫法對比
    // Vue2 的寫法 <template> <div>{{ foo }}</div> </template> <script> export
    default { props: { foo: String, }, created() { console.log(this.foo); }, }
    </script> // Vue3 的寫法 <template> <div>{{ foo }}</div> </template> <script
    setup> // 注意這里 const props = defineProps({ foo: String }) // 在 script 標簽里使用
    console.log(props.foo) </script>
    2)注意事項——組合式?api?的心智負擔

    使用 props 時,同樣注意不要使用解構的方式。
    <script setup> const props = defineProps({ foo: String }) // 不要這樣寫 const { foo
    } = props; console.log(foo) </script>
    4、emits 事件

    與?props?相同,聲明?emits?我們可以用?defineEmits(),具體寫法,我們看代碼。
    // Vue2 的寫法 <template> <div @click="onClick"> 這是一個div </div> </template>
    <script> export default { emits: ['click'], // 注意這里 methods: { onClick() {
    this.$emit('click'); // 注意這里 }, }, } </script> // Vue3 的寫法 <template> <div
    @click="onClick"> 這是一個div </div> </template> <script setup> // 注意這里 const emit
    = defineEmits(['click']); const onClick = () => { emit('click') // 注意這里 }
    </script>
    5、computed

    直接上寫法對比。
    // Vue2 的寫法 <template> <div> <span>{{ value }}</span> <span>{{ reversedValue
    }}</span> </div> </template> <script> export default { data() { return { value:
    'this is a value', }; }, computed: { reversedValue() { return value
    .split('').reverse().join(''); }, }, } </script> // Vue3 的寫法 <template> <div>
    <span>{{ value }}</span> <span>{{ reversedValue }}</span> </div> </template>
    <script setup> import {ref, computed} from 'vue' const value = ref('this is a
    value') // 注意這里 const reversedValue = computed(() => { // 使用 ref 需要 .value
    return value.value .split('').reverse().join(''); }) </script>
    6、watch

    這一部分,我們需要注意一下了,Vue3 中,watch 有兩種寫法。一種是直接使用?watch,還有一種是使用?watchEffect。

    兩種寫法的區別是:

    *
    watch?需要你明確指定依賴的變量,才能做到監聽效果。

    *
    而?watchEffect?會根據你使用的變量,自動的實現監聽效果。

    1)直接使用?watch
    // Vue2 的寫法 <template> <div>{{ count }}</div> <div>{{ anotherCount }}</div>
    <button @click="onClick"> 增加 1 </button> </template> <script> export default {
    data() { return { count: 1, anotherCount: 0, }; }, methods: { onClick() {
    this.count += 1; }, }, watch: { count(newValue) { this.anotherCount = newValue
    - 1; }, }, } </script> // Vue3 的寫法 <template> <div>{{ count }}</div> <div>{{
    anotherCount }}</div> <button @click="onClick"> 增加 1 </button> </template>
    <script setup> import { ref, watch } from 'vue'; const count = ref(1); const
    onClick = () => { count.value += 1; }; const anotherCount = ref(0); // 注意這里 //
    需要在這里, // 明確指定依賴的是 count 這個變量 watch(count, (newValue) => { anotherCount.value =
    newValue - 1; }) </script>
    2)使用?watchEffect
    // Vue2 的寫法 <template> <div>{{ count }}</div> <div>{{ anotherCount }}</div>
    <button @click="onClick"> 增加 1 </button> </template> <script> export default {
    data() { return { count: 1, anotherCount: 0, }; }, methods: { onClick() {
    this.count += 1; }, }, watch: { count(newValue) { this.anotherCount = newValue
    - 1; }, }, } </script> // Vue3 的寫法 <template> <div>{{ count }}</div> <div>{{
    anotherCount }}</div> <button @click="onClick"> 增加 1 </button> </template>
    <script setup> import { ref, watchEffect } from 'vue'; const count = ref(1);
    const onClick = () => { count.value += 1; }; const anotherCount = ref(0); //
    注意這里 watchEffect(() => { // 會自動根據 count.value 的變化, // 觸發下面的操作
    anotherCount.value = count.value - 1; }) </script>
    7、生命周期

    Vue3 里,除了將兩個?destroy?相關的鉤子,改成了?unmount,剩下的需要注意的,就是在?<script setup>?中,不能使用?
    beforeCreate?和?created?兩個鉤子。

    如果你熟悉相關的生命周期,只需要記得在?setup?里,用?on?開頭,加上大寫首字母就行。
    // 選項式 api 寫法 <template> <div></div> </template> <script> export default {
    beforeCreate() {}, created() {}, beforeMount() {}, mounted() {}, beforeUpdate()
    {}, updated() {}, // Vue2 里叫 beforeDestroy beforeUnmount() {}, // Vue2 里叫
    destroyed unmounted() {}, // 其他鉤子不常用,所以不列了。 } </script> // 組合式 api 寫法
    <template> <div></div> </template> <script setup> import { onBeforeMount,
    onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, } from
    'vue' onBeforeMount(() => {}) onMounted(() => {}) onBeforeUpdate(() => {})
    onUpdated(() => {}) onBeforeUnmount(() => {}) onUnmounted(() => {}) </script>
    三、結語

    好了,對于快速上手 Vue3 來說,以上內容基本已經足夠了。

    這篇文章本身不能做到幫你理解所有 Vue3 的內容,但是能幫你快速掌握 Vue3 的寫法。

    ?

    如果想做到對 Vue3 的整個內容心里有數,還需要你自己多看看 Vue3 的官方文檔。

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频