跳到主要內容

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

標籤：

留言

張貼留言

這個網誌中的熱門文章

JavaBean 和POJO

前言 今天介紹JavaBean和POJO的不同，這兩個名詞在JAVA文章常常被拿來使用以及討論。在JDK1.1時候釋出才有的一個標準架構，很多時候常常被搞混，所以我們特別開闢一章來加以討論。POJO規範在企業級應用已經廣大的被使用的規範。 解釋 POJO : 全名為Plain-old-Java-object，只需要繼承Object就可以，沒有特定規定，只要建立的類別有setter/getter方法都可以稱為POJO JavaBean: JavaBean通常用來封裝多個物件成為單獨物件使用，規範比較嚴格，規則如下 規則 說明 1 需要實作序列(Serializable/Externalizable) 2 不能有參數的建構子( no-arg constructor) 3 需要有公用setter/getter 4 屬性必須要私人(private) 5 屬於特定POJO規則 比較 所有的JavaBean都為POJO，但是所有的POJO不一定為JavaBean 都可以當作重複元件 都必須序列化 特性都為可用性、易用性和持久化使用 - 應用 由圖我們可以知道POJO在應用程式中，主要用來存取資料庫資料達到持久化的目的，並提供給商業邏輯流程處理使用。這種POJO的架構提供程式人員開發時的可以很有規則將資料封裝並加以使用。 範例1. JavaBean(以員工為實例) JavaBean建立員工物件，可以發現Employee物件建構子沒有任何參數，屬性為私有化並setter/getter的命名方式。 //實作序列化 public class Employee implements java.io.Serializable{ private int id; private String name; //無參數建構子 public Employee(){} //以下實作setter/getter public void setId(int id){this.id=id;} public int getId(){return id;} public void setName(String ...
張貼留言
閱讀完整內容

Python AI-手寫辨識

Python AI-手寫辨識 類神經網路-手寫辨識 手寫辨識 (1) 問題定義 將輸入手寫數字圖片，經由類神經網路訓練後，可以辨識手寫圖片得到一個正確的答案，例如讓電腦辨識上面圖片手寫數字0-9，都可以認得．在了解問題後，需要先知道輸入的資料格式，例如圖片為NxN的矩陣向量． 輸入：輸入的資料格式有很多種，例如數字圖片為矩陣向量 模型：ＮＮ 輸出：輸出的方式，神經網路輸出不一定跟輸入同值，手寫數字輸入為1，輸出有可能是1.1或是1.5等等，所以輸出必須經過轉換成真實世界的數字． (2)定義函式 輸出會有兩個問題： Ａ.輸出利用one-hot encoding來表示，就是Ｎ個狀態會對應Ｎ的結果，例如：輸出結果為1，表示[0,1,0,0,0,0,0,0,0,0] B.輸出結果不能超過1，我們通常會利用 Softmax函数 來進行輸出的處理． (3) 準備訓練/測試資料 在這邊需要從輸入去定義那些要當作訓練與測試資料，我們手寫資料使用MNIST 資料庫來訓練使用，MNIST共有70,000筆手寫資料，60,000筆為訓練資料，10,000為測試資料． (4)建構類神經網路模型 開始建構我們的神經網路模型，首先決定好28x28的像素(這邊不用擔心如何將圖片轉成矩陣)，模型使用ＳＧＤ的方式進行學習，輸出是一個10為的陣列來表示． 輸入：手寫數字圖片(28x28=784) 模型：ＳＧＤ 輸出：數字(one hard encoding) (5)學習 首先介紹SGD(Stochastic Gradient Descent) 的學習方式，因為蕾神經網路需要訓練很多次才會提高準確度，SGD最大的好處就是當每次重新學習的會將訓練資料打散，來防止機器學習將答案死背下來． (6)實作開發 下面程式碼有完整的說明，這邊就不多說明了，當開始執行程式時就會進行資料訓練． 由訓練結果最後acc=0.9447，表示準確率可以到達94%，我們再由實際測試可以看出該圖為7的圖示，由神經網路判斷為7，跟我們人類判斷相同，我們可以知道由訓練的結果可看得到不錯的準確度． 執行神經網路遇到不少問題，請參考下面連結，是筆者所整理的問題集，請多多指教 https://programdoubledragon.bl...
2 則留言
閱讀完整內容

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 則留言
閱讀完整內容