vue3.2 到底更新了什么？

根據(jù)原文內(nèi)容的更新的內(nèi)容主要有以下 5 塊：
1.SSR：服務(wù)端渲染優(yōu)化。@vue/server-renderer包加了一個(gè)ES模塊創(chuàng)建，
與Node.js解耦，使在非Node環(huán)境用@vue/serve-render做服務(wù)端渲染成為可能，
比如(Workers、Service Workers)
2.New SFC Features：新的單文件組件特性
3.Web Components：自定義 web 組件。這個(gè)我們平時(shí)很少用到，但是應(yīng)該知道
4.Effect Scope API：effect 作用域，
用來(lái)直接控制響應(yīng)式副作用的釋放時(shí)間(computed 和 watchers)。
這是底層庫(kù)的更新，開(kāi)發(fā)不用關(guān)心，但是應(yīng)該知道
5.Performance Improvements：性能提升。這是內(nèi)部的提升，跟開(kāi)發(fā)無(wú)關(guān)
復(fù)制代碼

setup 的簡(jiǎn)單介紹

起初 Vue3.0 暴露變量必須 return 出來(lái)，template中才能使用；
這樣會(huì)導(dǎo)致在頁(yè)面上變量會(huì)出現(xiàn)很多次。
很不友好，vue3.2只需在script標(biāo)簽中添加setup。
可以幫助我們解決這個(gè)問(wèn)題。

1.組件只需引入不用注冊(cè)，屬性和方法也不用返回，
也不用寫(xiě)setup函數(shù)，也不用寫(xiě)export default ，
甚至是自定義指令也可以在我們的template中自動(dòng)獲得。
復(fù)制代碼

變量、方法不需要 return 出來(lái)

<template>
  <div class="home">
    顯示的值{{flag }}
    <button @click="changeHander">改變值</button>
  </div>
</template>
<!-- 只需要在script上添加setup -->
<script lang="ts" setup>
    import { ref } from 'vue';

    <!-- flag變量不需要在 return出去了 -->
    let flag=ref("開(kāi)端-第一次循環(huán)")

    <!-- 函數(shù)也可以直接引用,不用在return中返回 -->
    let changeHander=():void=>{
        flag.value='開(kāi)端-第二次循環(huán)'
    }

</script>
復(fù)制代碼

組件不需要在注冊(cè)

<!-- 這個(gè)是組件 -->
<template>
    <div>
        <h2> 你好-我是肖鶴云</h2>
    </div>
</template>


使用的頁(yè)面
<template>
  <div class="home">
    <test-com></test-com>
  </div>
</template>
<script lang="ts" setup>
// 組件命名采用的是大駝峰，引入后不需要在注冊(cè)，是不是爽歪歪呀!
//在使用的使用直接是小寫(xiě)和橫杠的方式連接 test-com
import TestCom from "../components/TestCom.vue"
</script>
復(fù)制代碼

分析引入 setup 后組件的變化

在 script setup 中，
引入的組件可以直接使用無(wú)需再通過(guò)components進(jìn)行注冊(cè)，[是不是真的很香啊!]
并且無(wú)法指定當(dāng)前組件的名字，它會(huì)自動(dòng)以文件名為主，也就是不用再寫(xiě)name屬性了。
當(dāng)我們的頁(yè)面上需要使用很多組件時(shí)，它的功能一下就體現(xiàn)出來(lái)了。
復(fù)制代碼

新增 defineProps

剛剛我一直在強(qiáng)調(diào),不需要使用setup函數(shù)，機(jī)智的小伙伴會(huì)說(shuō):
那么子組件怎么接受父組件傳遞過(guò)來(lái)的值呢?
props，emit怎么獲取呢?
別擔(dān)心,新的api出現(xiàn)了,我們的主角 defineProps
復(fù)制代碼

defineProps 的使用

父組件傳遞參數(shù)

<template>
  <div class="home">
    <test-com :info="msg" time="42分鐘"></test-com>
  </div>
</template>
<script lang="ts" setup>
// 組件命名采用的是大駝峰，引入后不需要在注冊(cè)，是不是爽歪歪呀!
import TestCom from "../components/TestCom.vue"
let msg='公交車(chē)-第一次循環(huán)'
</script>
復(fù)制代碼

子組件接受參數(shù)

<template>
    <div>
        <h2> 你好-我是肖鶴云</h2>
        <p>信息:{{ info}}</p>
        <p>{{ time }}</p>
    </div>
</template>
<script lang="ts" setup>
import {defineProps} from 'vue'
defineProps({
    info:{
        type:String,
        default:'----'
    },
    time:{
        type:String,
        default:'0分鐘'
    },
})
</script>
復(fù)制代碼

子組件怎么向父組件拋出事件？defineEmits的到來(lái)！

子組件使用

別擔(dān)心，我們使用defineEmits。它可以像父組件拋出事件。
<template>
    <div>
        <h2> 你好-我是肖鶴云</h2>
        <button @click="hander1Click">新增</button>
        <button @click="hander2Click">刪除</button>
    </div>
</template>

<script lang="ts" setup>
 import {defineEmits} from 'vue'
//  使用defineEmits創(chuàng)建名稱(chēng)，接受一個(gè)數(shù)組
let $myemit=defineEmits(['myAdd','myDel'])
let hander1Click=():void=>{
    $myemit('myAdd','新增的數(shù)據(jù)')
}

let hander2Click=():void=>{
    $myemit('myDel','刪除的數(shù)據(jù)')
}
</script>
復(fù)制代碼

父組件

<template>
  <div class="home">
    <test-com @myAdd="myAddHander" @myDel='myDelHander'></test-com>
  </div>
</template>
<script lang="ts" setup>
// 組件命名采用的是大駝峰，引入后不需要在注冊(cè)，是不是爽歪歪呀!
//在使用的使用直接是小寫(xiě)和橫杠的方式連接 test-com
import TestCom from "../components/TestCom.vue"
let myAddHander=(mess):void=>{
  console.log('新增==>',mess);
}

let myDelHander=(mess):void=>{
  console.log('刪除==>', mess);
}
</script>
復(fù)制代碼

如何獲取子組件中的屬性值

子組件

<template>
    <div>
        <h2> 你好-我是肖鶴云</h2>
        <p>性別:{{ sex}}</p>
        <p>其他信息:{{ info}}</p>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
    like:'喜歡李詩(shī)晴',
    age:27
})
// 將組件中的屬性暴露出去，這樣父組件可以獲取
defineExpose({
    sex,
    info
})
</script>
復(fù)制代碼

父組件

<template>
  <div class="home">
    <test-com @myAdd="myAddHander" @myDel='myDelHander' ref="testcomRef"></test-com>
    <button @click="getSonHander">獲取子組件中的數(shù)據(jù)</button>
  </div>
</template>
<script lang="ts" setup>
import TestCom from "../components/TestCom.vue"
import {ref} from 'vue'
const testcomRef = ref()
const getSonHander=()=>{
  console.log('獲取子組件中的性別', testcomRef.value.sex );
  console.log('獲取子組件中的其他信息', testcomRef.value.info );
}
</script>
復(fù)制代碼

新增指令 v-memo

v-memod會(huì)記住一個(gè)模板的子樹(shù),元素和組件上都可以使用。
該指令接收一個(gè)固定長(zhǎng)度的數(shù)組作為依賴(lài)值進(jìn)行[記憶比對(duì)]。
如果數(shù)組中的每個(gè)值都和上次渲染的時(shí)候相同，則整個(gè)子樹(shù)的更新會(huì)被跳過(guò)。
即使是虛擬 DOM 的 VNode 創(chuàng)建也將被跳過(guò)，因?yàn)樽訕?shù)的記憶副本可以被重用。
因此渲染的速度會(huì)非常的快。
需要注意得是:正確地聲明記憶數(shù)組是很重要。
開(kāi)發(fā)者有責(zé)任指定正確的依賴(lài)數(shù)組，以避免必要的更新被跳過(guò)。
<li v-for="item in listArr"  :key="item.id"  v-memo="['valueA'，'valueB']">
    {{ item.name   }}
</li>
v-memod的指令使用較少，它的作用是:緩存模板中的一部分?jǐn)?shù)據(jù)。
只創(chuàng)建一次，以后就不會(huì)再更新了。也就是說(shuō)用內(nèi)存換取時(shí)間。
復(fù)制代碼

style v-bind 該同學(xué)已經(jīng)從實(shí)驗(yàn)室畢業(yè)了

經(jīng)過(guò)尤大大和團(tuán)隊(duì)的努力，<style> v-bind 已經(jīng)從實(shí)驗(yàn)室畢業(yè)了。
我們可以使用這個(gè)屬性了。爽歪歪！
我們可以在style中去使用變量。是不是感覺(jué)很牛逼呀！
現(xiàn)在我們用起來(lái)，第一次使用<style> v-bind
復(fù)制代碼

style v-bind將span變成紅色

<template>
  <span> 有開(kāi)始循環(huán)了-開(kāi)端 </span>  
</template>
<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    color: 'red'
  })
</script>
<style scoped>
  span {
    /* 使用v-bind綁定state中的變量 */
    color: v-bind('state.color');
  }  
</style>
復(fù)制代碼

尾聲

如果你覺(jué)得我寫(xiě)的不錯(cuò)的話，點(diǎn)一下推薦。
我已經(jīng)幾個(gè)月沒(méi)有人給我推薦了。
聽(tīng)說(shuō)打賞的小哥哥都追到女朋友了，
咦！你不信，不信你給我打賞看一下！
保準(zhǔn)你追到到喜歡的Ta
復(fù)制代碼