vue3如何定義變量及ref、reactive、toRefs特性說明
vue3定義變量及ref、reactive、toRefs特性
1.ref() 函數(shù)
ref() 函數(shù)用來根據(jù)給定的值創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象，傳入的為基本數(shù)據(jù)類型，例如字符串、數(shù)字、boolean 等,返回值是一個(gè)對(duì)象，這個(gè)對(duì)象上只包含一個(gè) value 屬性
ref定義的變量，改變值要.value,而且在template中不用寫.value
<div>{{msg}}</div>
<button @click="changeMsg()">修改msg</button>
import {reactive,ref,toRefs} from 'vue'
setup() {
?? ?//定義
? ? const msg = ref('你好')?
? ? //修改
? ? const changeMsg =()=>{
? ? ? msg.value ='msg被改了'
? ? }
? ? //導(dǎo)出
? ? return {?
? ? ?msg,
? ? ?changeMsg
? ? }
? }2.reactive() 函數(shù)
reactive函數(shù)傳入的為引用類型，例如數(shù)組、對(duì)象等，但不能代理基本類型值,返回一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象, 想要使用創(chuàng)建的響應(yīng)式數(shù)據(jù)也很簡(jiǎn)單，創(chuàng)建出來之后，在setup中return出去，直接在template中調(diào)用即可。
<div>{{state.msg}}</div>
<button @click="changeMsg()">修改msg</button>
import { reactive, ref, toRefs } from 'vue'
? ? ? ? setup() {
? ? ? ? ? ? //定義
? ? ? ? ? ? const state = reactive({
? ? ? ? ? ? ? ? msg: '你好',
? ? ? ? ? ? ? ? msg2:'hello'
? ? ? ? ? ? })
? ? ? ? ? ? //修改
? ? ? ? ? ? const changeMsg = () => {
? ? ? ? ? ? ? ? state.msg = 'msg被改了'
? ? ? ? ? ? }
? ? ? ? ? ? //導(dǎo)出
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? state,
? ? ? ? ? ? ? ? changeMsg
? ? ? ? ? ? }
? ? ? ? }3.toRefs() 函數(shù)
toRefs() 函數(shù)可以將 reactive() 創(chuàng)建出來的響應(yīng)式對(duì)象，轉(zhuǎn)換為普通的對(duì)象，相當(dāng)于變成一個(gè)個(gè)的ref(),類似使用拓展用算符…的方法返回?cái)?shù)據(jù)data
使用toRefs和reactive()區(qū)別在于可以直接使用msg屬性,不用state.
<div>{{msg}}</div>
<button @click="changeMsg()">修改msg</button>
import { reactive, ref, toRefs } from 'vue'
? ? ? ? setup() {
? ? ? ? ? ? //定義
? ? ? ? ? ? const state = reactive({
? ? ? ? ? ? ? ? msg: '你好',
? ? ? ? ? ? ? ? msg2:'hello'
? ? ? ? ? ? })
? ? ? ? ? ? //修改
? ? ? ? ? ? const changeMsg = () => {
? ? ? ? ? ? ? ? state.msg = 'msg被改了'
? ? ? ? ? ? }
? ? ? ? ? ? //導(dǎo)出
? ? ? ? ? ? return {
? ? ? ? ? ? ? ?...toRefs(state),
? ? ? ? ? ? ? ? changeMsg
? ? ? ? ? ? }
? ? ? ? }
vue3定義變量
1.const 聲明變量
特性：聲明為一個(gè)常量，不能被修改，不可以再次賦值，它的指向是不可以改變的，只能指向某處固定區(qū)域，不能再指向其它地方
要求：
① 聲明后必須初始化賦值，如：const name='aaa'，不可以 const name;
② 常量的含義是指向的對(duì)象不能修改，但是可以修改對(duì)象中的屬性
所以類似const userName = ref('張三')
userName.value = '李四'
實(shí)際上是在給對(duì)象userName的屬性重新賦值
2.reactive和ref
都是用作定義基本變量的
ref 定義簡(jiǎn)單的，reactive一般定義數(shù)組和對(duì)象
ref 有.value屬性，reactive沒有
3.provide與inject
不用再一層一層的傳遞數(shù)據(jù)
provide可以向所有子孫組件提供數(shù)據(jù)以及提供修改數(shù)據(jù)的方法，子孫組件用inject使用數(shù)據(jù)。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于VUE實(shí)現(xiàn)簡(jiǎn)單的學(xué)生信息管理系統(tǒng)
這篇文章主要介紹了VUE實(shí)現(xiàn)一個(gè)簡(jiǎn)單的學(xué)生信息管理系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了vue對(duì)枚舉值轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+el-table實(shí)現(xiàn)合并單元格
這篇文章主要為大家詳細(xì)介紹了vue+el-table實(shí)現(xiàn)合并單元格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue如何解決子組件data從props中無法動(dòng)態(tài)更新數(shù)據(jù)問題
這篇文章主要介紹了Vue如何解決子組件data從props中無法動(dòng)態(tài)更新數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
分頁組件是一種用戶界面元素,用于在長(zhǎng)列表或數(shù)據(jù)集中分割內(nèi)容,分頁組件是每個(gè)開發(fā)人員必須掌握的一個(gè)組件,廣泛應(yīng)用在各個(gè)場(chǎng)所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫出的分頁組件,需要的朋友可以參考下2023-08-08
基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件
這篇文章主要介紹了基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
ElementUI?el-table?樹形數(shù)據(jù)的懶加載的實(shí)現(xiàn)
當(dāng)面對(duì)大量數(shù)據(jù)時(shí),一次性加載所有數(shù)據(jù)可能會(huì)導(dǎo)致性能問題,我們可以實(shí)現(xiàn)樹形數(shù)據(jù)的懶加載,本文主要介紹了ElementUI?el-table?樹形數(shù)據(jù)的懶加載,感興趣的可以了解一下2024-06-06
這篇文章主要介紹了vuex入門教程，圖文+實(shí)例解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-03-03
vue實(shí)現(xiàn)3D切換滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)偽3D切換滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要介紹了vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12