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