欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3如何定義變量及ref、reactive、toRefs特性說明

 更新時(shí)間：2022年06月28日 15:14:54   作者：倘若hfl  
這篇文章主要介紹了vue3如何定義變量及ref、reactive、toRefs特性說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3定義變量及ref、reactive、toRefs特性

1.ref() 函數(shù)

ref() 函數(shù)用來根據(jù)給定的值創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對象，傳入的為基本數(shù)據(jù)類型，例如字符串、數(shù)字、boolean 等,返回值是一個(gè)對象，這個(gè)對象上只包含一個(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ù)組、對象等，但不能代理基本類型值,返回一個(gè)響應(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)于變成一個(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;           

② 常量的含義是指向的對象不能修改，但是可以修改對象中的屬性

所以類似const userName = ref('張三')

userName.value = '李四'

實(shí)際上是在給對象userName的屬性重新賦值

2.reactive和ref

都是用作定義基本變量的

ref 定義簡單的，reactive一般定義數(shù)組和對象

ref 有.value屬性，reactive沒有

3.provide與inject

不用再一層一層的傳遞數(shù)據(jù)

provide可以向所有子孫組件提供數(shù)據(jù)以及提供修改數(shù)據(jù)的方法，子孫組件用inject使用數(shù)據(jù)。 

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論