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

Posted on by

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

1.ref() 函數

ref() 函數用來根據給定的值創建一個響應式的數據對象，傳入的為基本數據類型，例如字符串、數字、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被改瞭'
    }
    //導出
    return { 
     msg,
     changeMsg
    }
  }

2.reactive() 函數

reactive函數傳入的為引用類型，例如數組、對象等，但不能代理基本類型值,返回一個響應式的數據對象, 想要使用創建的響應式數據也很簡單，創建出來之後，在setup中return出去，直接在template中調用即可。

<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被改瞭'
            }
            //導出
            return {
                state,
                changeMsg
            }
        }

3.toRefs() 函數

toRefs() 函數可以將 reactive() 創建出來的響應式對象，轉換為普通的對象，相當於變成一個個的ref(),類似使用拓展用算符…的方法返回數據data

使用toRefs和reactive()區別在於可以直接使用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被改瞭'
            }
            //導出
            return {
               ...toRefs(state),
                changeMsg
            }
        }

vue3定義變量

1.const 聲明變量

特性：聲明為一個常量，不能被修改，不可以再次賦值，它的指向是不可以改變的，隻能指向某處固定區域，不能再指向其它地方

要求：

① 聲明後必須初始化賦值，如：const name='aaa'，不可以 const name;           

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

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

userName.value = '李四'

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

2.reactive和ref

都是用作定義基本變量的

ref 定義簡單的，reactive一般定義數組和對象

ref 有.value屬性，reactive沒有

3.provide與inject

不用再一層一層的傳遞數據

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：