Vue3中reactive是什么及怎么使用

這篇文章主要講解了“Vue3中reactive是什么及怎么使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue3中reactive是什么及怎么使用”吧！

Vue3 reactive的理解

1.什么是reactive?

• reactive是Vue3中提供實現(xiàn)響應(yīng)式數(shù)據(jù)的方法.

• 在Vue2中響應(yīng)式數(shù)據(jù)是通過defineProperty來實現(xiàn)的.

• 而在Vue3響應(yīng)式數(shù)據(jù)是通過ES6的Proxy來實現(xiàn)的

2.reactive注意點

• reactive參數(shù)必須是對象(json/arr)

• 如果給reactive傳遞了其他對象,默認(rèn)情況下修改對象,界面不會自動更新,如果想更新,可以通過重新賦值的方式.

錯誤示范

• 當(dāng)傳遞的是非對象時,頁面不會發(fā)生響應(yīng)

正確實例

arr正確實例

• 傳入數(shù)組會轉(zhuǎn)成proxy對象

Vue3筆記 reactive函數(shù)

• 作用：定義一個對象類型的響應(yīng)式數(shù)據(jù)（基本類型不要用它，要用ref函數(shù)）

• 語法：const 代理對象= reactive(源對象)接收一個對象（或數(shù)組），返回一個代理對象（Proxy的實例對象，簡稱proxy對象）

reactive定義的響應(yīng)式數(shù)據(jù)是“深層次的”。

內(nèi)部基于 ES6 的 Proxy 實現(xiàn)，通過代理對象操作源對象內(nèi)部數(shù)據(jù)進(jìn)行操作。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h2>一個人的信息</h2>
  <h2>年齡：{{ p.age }}</h2>
  <h2>姓名：{{ p.name }}</h2>
  <h2>工作種類: {{ p.job.type }}</h2>
  <h2>工作薪水: {{ p.job.salary }}</h2>
  <h2>愛好: {{ hobby }}</h2>
  <h2>測試的數(shù)據(jù): {{ p.a.b.c }}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref, reactive } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    let hobby = reactive(["抽煙", "喝酒", "打麻將"]);
    // 數(shù)據(jù)
    let p = reactive({
      name: "張三",
      age: 19,
      job: {
        type: "前端工程師",
        salary: "20k",
      },
      a: {
        b: {
          c: 666666,
        },
      },
      hobby: ["抽煙", "喝酒", "打麻將"],
    });

    // 方法
    function changeInfo() {
      console.log(p.job);
      p.name = "李四";
      p.age = 119;
      p.job.salary = "69k";
      p.job.type = "算法工程師";
      p.hobby[0] = "學(xué)習(xí)";
      hobby[0] = "學(xué)習(xí)算法";
    }
    return {
      p,
      hobby,
      changeInfo,
    };
  },
};
</script>

感謝各位的閱讀，以上就是“Vue3中reactive是什么及怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue3中reactive是什么及怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！