ts+vue3.0聲明響應(yīng)式對(duì)象的實(shí)現(xiàn)方式
ts+vue3.0聲明響應(yīng)式對(duì)象
在 Vue 3 中，響應(yīng)式對(duì)象的聲明方式與 Vue 2 略有不同。通過(guò)使用 reactive 函數(shù)定義一個(gè)響應(yīng)式對(duì)象，并使用 ref 函數(shù)定義一個(gè)包裝器包裹普通 JavaScript 對(duì)象，可以使其變?yōu)轫憫?yīng)式對(duì)象。
此外，在 Vue 3 中，不再需要使用 vue-class-component 和 vue-property-decorator，只需使用新的 Composition API 即可。
下面是一些示例代碼：
通過(guò) reactive 函數(shù)定義響應(yīng)式對(duì)象
import { reactive } from 'vue';
interface Person {
name: string;
age: number;
gender: string;
}
const person: Person = reactive({
name: "Tom",
age: 18,
gender: "male"
});通過(guò) ref 函數(shù)定義響應(yīng)式包裝器
import { ref } from 'vue';
interface Person {
name: string;
age: number;
gender: string;
}
const person = ref<Person>({
name: "Tom",
age: 18,
gender: "male"
});在以上兩個(gè)例子中，將對(duì)象聲明為響應(yīng)式對(duì)象后，當(dāng)其屬性發(fā)生變化時(shí)，組件將自動(dòng)重新渲染并更新視圖。
請(qǐng)注意：
Composition API 與 options API 不兼容，因此您需要先學(xué)習(xí) Composition API，才能在 Vue 3 中聲明響應(yīng)式對(duì)象。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue mint-ui源碼解析之loadmore組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
vue2.0實(shí)現(xiàn)移動(dòng)端的輸入框?qū)崟r(shí)檢索更新列表功能
最近小編在做vue2.0的項(xiàng)目，遇到移動(dòng)端實(shí)時(shí)檢索搜索更新列表的效果，下面腳本之家小編給大家?guī)?lái)了vue2.0 移動(dòng)端的輸入框?qū)崟r(shí)檢索更新列表功能的實(shí)例代碼，感興趣的朋友參考下吧2018-05-05
詳解Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求
本篇文章主要介紹了Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
Vue-router如何實(shí)現(xiàn)路由懶加載
在現(xiàn)代前端開(kāi)發(fā)中,Vue.js憑借其輕量級(jí)和易用性,成為了很多開(kāi)發(fā)者的首選框架,本文將結(jié)合實(shí)際案例,詳細(xì)講解Vue-Router路由懶加載的用法,需要的可以參考下2024-11-11
vant中的Cascader級(jí)聯(lián)選擇異步加載地區(qū)數(shù)據(jù)方式
這篇文章主要介紹了vant中的Cascader級(jí)聯(lián)選擇異步加載地區(qū)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue使用高德地圖點(diǎn)擊下鉆上浮效果的實(shí)現(xiàn)思路
這篇文章主要介紹了vue使用高德地圖點(diǎn)擊下鉆 上浮效果的實(shí)現(xiàn)思路,本文以浙江省為例通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-10-10
vue前端實(shí)現(xiàn)login頁(yè)登陸驗(yàn)證碼代碼示例
現(xiàn)在我們管理后臺(tái)有個(gè)需求,就是登錄頁(yè)面需要獲取驗(yàn)證碼,用戶可以輸入驗(yàn)證碼后進(jìn)行登錄,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)login頁(yè)登陸驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-05-05
關(guān)于el-table-column的formatter的使用及說(shuō)明
這篇文章主要介紹了關(guān)于el-table-column的formatter的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
前端vue實(shí)現(xiàn)的h5頁(yè)面接入微信支付流程(jsapi方式)
vue實(shí)現(xiàn)微信支付有三種方式,第一種方式是PC端支付,第二種方式是H5支付,第三種方式是微信公眾號(hào)支付,這篇文章主要給大家介紹了關(guān)于前端vue實(shí)現(xiàn)的h5頁(yè)面接入微信支付流程,文中介紹的方法是利用jsapi方式,通過(guò)代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue 自定義指令directives及其常用鉤子函數(shù)說(shuō)明
這篇文章主要介紹了vue 自定義指令directives及其常用鉤子函數(shù)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01