跳到主要內容

Vue 3.0 -2 Ref&reactive教學

摘要

Vue 3.0 -2 Ref&reactive教學

摘要

Vue 3 不用使用data()的方式去定義響應式數據，我們利用ref()和reactive()來定義響應式數據

ref

  • 當我們宣告let name= ref("張三") 可以使用 console.log(name)打印出來，發現張三被宣告為一個RefImpl對象。而address 就是一般的字串，表示該屬性未來不會做任何變更。

  • ref建立的響應式對象必須使用.value來取得/更新數據

  • ref()用來宣告基本類型數據

 <template>
    <div class="person">
        <h2>Ref 宣告範例</h2>
        <br>

        <h3>姓名: {{name}}</h3>
        <h3>地址: {{address}}</h3>
        <button @click="UpdateName">更改為李四</button>
    </div>
</template>

<script lang="ts" setup name="MainPersonRef" >
  import {ref} from 'vue' 
  //加上ref宣告為響應式數據
  let name= ref("張三")
  let address = "高雄市"

  console.log(name)
  console.log(address)

  function UpdateName(){
     // name = "李四"  不能直接更新name的值

     name.value =  "李四"   //這才是正確寫法
  }

</script>

<style scoped>
  .person {
    background-color:lightseagreen ;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    color: black;

  }

</style>

reactive

  • reactive用來宣告對象為響應式數據，當Person宣告為reactive時，打印出來可以發現被為Proxy(Object)的物件。
<template>
    <div class="person">
        <h2>Reactive 宣告範例</h2>
        <br>
        範例一: Person 對象
        <h3>姓名: {{person.name}}</h3>
        <h3>電話: {{person.mobile}}</h3>
        <h3>地址: {{person.address}}</h3>
        <button @click="UpdateName">更改為李四</button>
        <br>
    </div>
</template>

<script lang="ts" setup name="MainPersonRef" >
  import {reactive, ref} from 'vue' 
  //加上Reactive宣告為響應式對象目標
  let person = reactive({name:"張三",mobile:"8861234567",address:"高雄市"})
  let obj_person = {name:"張三",mobile:"8861234567",address:"高雄市"}

  console.log(person)
  console.log(obj_person)

  function UpdateName(){
    
  }

</script>

<style scoped>
  .person {
    background-color:lightseagreen ;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    color: black;

  }

</style>

  • 實作對象、陣列、深層的對象範例

  • 如果需要重新分配person對象，不能直接替換需要使用Object.assigen(old_object,new_object)

    reactive在對象處理支援程度會比較高，

<template>
    <div class="person">
        <h2>Reactive 宣告範例</h2>
        <br>
        <h3>範例一: Person 對象</h3>
        <h3>姓名: {{person.name}}</h3>
        <h3>電話: {{person.mobile}}</h3>
        <h3>地址: {{person.address}}</h3>
        <button @click="UpdateName">更改為李四</button>
        <br>

        <h3>>範例二: Person 陣列對象</h3>
        <ul>
          <li v-for="item in persons">
            {{ item.name}} -{{ item.mobile}} -{{ item.address}}
          </li>
        </ul>
        <button @click="UpdateArray">更改電話</button>

        <h3>>範三: 深層對象</h3>
        <h3>{{deepObj.company.department.member.name}}</h3>
        <button @click="UpdatedeepObj">更改member</button>
        <br>

        <h3>>範例四: Person 建立新的對象</h3>
        <h3>姓名: {{person.name}}</h3>
        <h3>電話: {{person.mobile}}</h3>
        <h3>地址: {{person.address}}</h3>
        <button @click="createName">建立新的對象</button>
    </div>
</template>

<script lang="ts" setup name="MainPersonRef" >
  import {reactive, ref} from 'vue' 
  //加上Reactive宣告為響應式對象目標
  //一般對象
  let person = reactive({name:"張三",mobile:"8861234567",address:"高雄市"})
  let obj_person = {name:"張三",mobile:"8861234567",address:"高雄市"}

  //陣列
  let persons = reactive([
    {name:"張三",mobile:"8861234567",address:"高雄市"},
    {name:"李四",mobile:"8867654323",address:"台北市"},
    {name:"陳武",mobile:"8867854231",address:"桃園市"}
  ])

  //深層對象
  let deepObj = reactive({
    company:{
        department:{
            member:{
                name:"陳武"

            }
        }
    }

  })

  function UpdateName(){
     person.name="李四"
  }

  function UpdateArray(){
    persons[0].mobile='8861111111'

  }

  function UpdatedeepObj(){
     deepObj.company.department.member.name= "這樣深層也可以響應式" ; 

  }
 
  function createName(){
    //錯誤寫法
    // person = {name:"王六",mobile:"8862222222",address:"高雄市"}
    // person = reative({name:"王六",mobile:"8862222222",address:"高雄市"})

    Object.assign(person,{name:"王六",mobile:"8862222222",address:"高雄市"})
  }

</script>

<style scoped>
  .person {
    background-color:lightseagreen ;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    color: black;

  }

</style>

使用ref來支援對象

使用ref宣告對象時，需要object.value來取的該對象的值，在去更新裡面的屬性值，可以利用console.log(person) 發現person被宣告為RefImpl對象，當你展開到value顯示為Proxy(Object)，可以知道ref的value也是透過reactive來實現。

<template>
    <div class="person">
        <h2>ref 宣告對象範例</h2>
        <br>
        <h3>範例一: Person 對象</h3>
        <h3>姓名: {{person.name}}</h3>
        <h3>電話: {{person.mobile}}</h3>
        <h3>地址: {{person.address}}</h3>
        <button @click="UpdateName">更改為李四</button>
        <br>

        <h3>>範例二: Person 陣列對象</h3>
        <ul>
          <li v-for="item in persons">
            {{ item.name}} -{{ item.mobile}} -{{ item.address}}
          </li>
        </ul>
        <button @click="UpdateArray">更改電話</button>

        <h3>>範三: 深層對象</h3>
        <h3>{{deepObj.company.department.member.name}}</h3>
        <button @click="UpdatedeepObj">更改member</button>
        <br>

        
        <h3>>範例四: Person 建立新的對象</h3>
        <h3>姓名: {{person.name}}</h3>
        <h3>電話: {{person.mobile}}</h3>
        <h3>地址: {{person.address}}</h3>
        <button @click="createName">更改為李四</button>

      
    </div>
</template>

<script lang="ts" setup name="MainPersonRef" >
  import { ref} from 'vue' 
  //加上Reactive宣告為響應式對象目標
  //一般對象
  let person = ref({name:"張三",mobile:"8861234567",address:"高雄市"})

  //陣列
  let persons = ref([
    {name:"張三",mobile:"8861234567",address:"高雄市"},
    {name:"李四",mobile:"8867654323",address:"台北市"},
    {name:"陳武",mobile:"8867854231",address:"桃園市"}
  ])

  //深層對象
  let deepObj = ref({
    company:{
        department:{
            member:{
                name:"陳武"

            }
        }
    }
  })

  function UpdateName(){
     person.value.name="李四"
  }

  function UpdateArray(){
    persons.value[0].mobile='8861111111'

  }

  function UpdatedeepObj(){
     deepObj.value.company.department.member.name= "這樣深層也可以響應式" ; 
  }

  function createName(){
      person.value = {name:"王六",mobile:"8862222222",address:"高雄市"} 

  }



</script>

<style scoped>
  .person {
    background-color:lightseagreen ;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    color: black;

  }

</style>

toRefs/toRef 使用

toRefs :可以多值的解構並具有響應式屬性 toRef :單值的解構並具有響應式屬性

<template>
  <div class="person">
    <h2>toRefs和toRef範例</h2>
      <br>
      <h3>範例: Person 對象</h3>
      <h3>姓名: {{person.name}}</h3>
      <h3>電話: {{person.mobile}}</h3>
      <h3>地址: {{person.address}}</h3>
      <button @click="UpdateName">更改為李四</button>
      <br>
  </div>
</template>

<script lang="ts" setup name="MainPerson" >
import {reactive,toRef,toRefs} from 'vue' 

let person = reactive({name:"張三",mobile:"8861234567",address:"高雄市"})


// 這是錯誤的方式，因為裡面的{name, mobile}不會變成響應式對象
// let {name, mobile} = person

//變成響應式，{name, mobile} 變成RefImpl
let {name, mobile} = toRefs(person)

//toRef為單值解構，變成響應式數據
let mobilex = toRef(person,'mobile')
console.log(mobilex.value) 


function UpdateName(){
  name.value = person.name+"~"
  mobile.value = person.mobile+"#3123"

}

</script>

<style scoped>
.person {
  background-color:lightseagreen ;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
  color: black;

}

</style>

使用ref或reactive時機

  1. 基本資料型態 => ref
  2. 對象但層級不高 => ref, reactive
  3. 對象且層級很高 => reactive

VS code自動加上value

  • 不想要每次都需要加上value，我們可以利用vue插件設定讓vs code自動加上value

標籤：

留言

張貼留言

這個網誌中的熱門文章

GSON基礎教學

GSON 前言 JSON是很常見的資料交換格式，在JAVA領域常用處理JSON的函式庫:GSON、FastXML和JSON-B，本章節會以GSON為主，學習目標如下 JSON格式說明 GSON 套件函式 GSON: 物件轉換JSON字串 GSON: JSON字串轉換物件 JSON 格式說明 JSON全名為JavaScript Object Notation，它是一種輕量級的資料交換格式，會大為流行的理由，主要是他比傳統用xml更輕巧且容易處理， JSON表達方式物件會用大括弧{}，陣列則是用中括號[]。 用JSON字串來表達Employee的物件內容，由JSON字串可以知道物件name、age、sex和salary屬性。 JSON表示員工資料方式: {“name”:”Jack Bryant”, “age”:18, “sex”:”M”,”salary”:3500.00} JSON陣列表示方式: 跟我們使用JAVA的陣列方式類似，內容值可以是數字’、文字、布林、陣列、物件、null等等。 範例: 字串: [“紅”、”橙”、”黃”、”綠”、”青”、”藍”、”紫”} 布林: [true, true, false, false, true, true] GSON 套件函式 Gson為google所發布的函式庫，主要將物件與json字串之間的轉換時方便使用。當我們將JAVA物件轉換成JSON字串稱為 序列化 ，JSON字串轉換至JAVA物件稱為 反序列化 。 GSON: 物件轉換JSON字串 有了JSON基本概念後，我們進入本章重點，首先我們需要建立員工類別(Employee)，定義如下 物件 屬性 員工類別 Employee name 名字 age 年紀 sex 性別 salary 薪水 /** * name:員工類別 */ public class Employee implements Serializable { //constructor public Employee(String name, double salary){ this.name = name; this.sala...
張貼留言
閱讀完整內容

PHP與Python搭配

今天介紹如何利用php網頁呼叫目錄下的python程式工作或是資料交換，本人整理的方法有兩種 使用system()、exec()、shell_exec()呼叫程式 (1) string system ( string return_var ] ) 參考網址 官網解釋system()用來執行外部命令，返回為印出的結果，passthru()跟system()類似但是它不會返回結果。 範例1. 利用system執行ls指定並顯示在網頁上，無法使用變數保留ls的結果 檔案名稱: psystem.php $jsondata= system("ls -al", $result); 結果: (2) exec() : string exec ( string output [, int &$return_var ]] ) 參考網址 範例2. 利用exec執行python程式並可以回傳json格式給前端網頁做處理並顯示。我們ptopy.php就是可以看到callpy()為執行py的函式，它執行完pyEx01.py會將結果給$jsondata變數，做後面json解析。 檔案名稱: ptopy.php function callpy() { $jsondata= exec("/usr/bin/python pyEx01.py"); return $jsondata ; } $jsondata= callpy(); echo $jsondata ; echo " " ; $obj = json_decode($jsondata) ; echo "name:".$obj-> { 'name'} .',' ; echo "id:".$obj-> { 'id'} ; 檔案名稱: pyEx01.py import sys ...
張貼留言
閱讀完整內容

Python AI-問題集

Python AI-問題集 問題集 Jupyter Notebook執行ipywidgets會出現kernel死掉的錯誤發生(The kernel appears to have died) 解決方法 (1) 根據log檔來判斷問題： 例如：log訊息出現OMP: Error #15: Initializing libiomp5.dylib, but found libiomp5.dylib already initialized. (2) 根據問題關鍵字找出問題所在： 利用google查詢所遭遇到的問題，例如我把上面的問題上google查詢可以找到這篇的解法 https://blog.csdn.net/bingjianIT/article/details/86182096 (3)實作解法： 我實作下面解法後，就可以順利執行手寫辨識的程式． //在Python宣告時加入 import os os.environ["KMP_DUPLICATE_LIB_OK"]="TRUE" 參考 https://blog.csdn.net/bingjianIT/article/details/86182096
1 則留言
閱讀完整內容