vue3.2?reactive函數(shù)問題小結(jié)
reactive函數(shù)
上篇文章給大家介紹了Vue中的reactive函數(shù)操作代碼,需要的朋友點擊查看。
reactive用來包裝一個對象,使其每個對象屬性都具有響應(yīng)性(也就是深層次響應(yīng)式)。
- 語法:const 代理對象= reactive(源對象) 。
- 接收一個對象(或數(shù)組),返回一個代理對象(簡稱proxy對象)。
- 內(nèi)部基于 ES6 的 Proxy 實現(xiàn),通過代理對象操作源對象內(nèi)部數(shù)據(jù)進(jìn)行操作。
注意點1:
問題:reactive函數(shù)使用基本類型數(shù)據(jù)會報警告
注意點2:
總結(jié):基礎(chǔ)類型數(shù)據(jù)推薦適用ref函數(shù),引用類型數(shù)據(jù)推薦適用reactive函數(shù)
使用reactive函數(shù)實現(xiàn)引用數(shù)據(jù)響應(yīng)式數(shù)據(jù)
<script setup> //數(shù)據(jù) let job = reactive({ type: '前端工程師', salary: '20K' }) //方法 function changeInfo() { job.type = 'UI設(shè)計師' job.salary = '30K' } </script>
如果想使用ref函數(shù)實現(xiàn)引用數(shù)據(jù)響應(yīng)式,使用job.value
<script setup> //數(shù)據(jù) let job = ref({ type: '前端工程師', salary: '20K' }) //方法 function changeInfo() { job.value.type = 'UI設(shè)計師' job.value.salary = '30K' } </script>
注意點3:
當(dāng)然也可以把基礎(chǔ)類型數(shù)據(jù)和引用類型數(shù)據(jù)封裝成一個代理對象,通過reactive函數(shù)關(guān)聯(lián),使用起來也很方便,缺點是還是寫了很多person.xxx重復(fù)字符串
<template> <h1>一個人的信息</h1> <h2>姓名:{{ person.name }}</h2> <h2>年齡:{{ person.age }}</h2> <h3>工作種類:{{ person.job.type }}</h3> <h3>工作薪水:{{ person.job.salary }}</h3> <h3>愛好:{{ person.hobby }}</h3> <h3>測試的數(shù)據(jù)c:{{ person.job.a.b.c }}</h3> <button @click="changeInfo">修改人的信息</button> </template> <script setup> import { reactive } from "vue"; //數(shù)據(jù) let person = reactive({ name: "張三", age: 18, job: { type: "前端工程師", salary: "20K", a: { b: { c: 666, }, }, }, hobby: ["打球", "跑步", "健身"], }); //方法 function changeInfo() { person.name = "李四"; person.age = 50; person.job.type = "UI設(shè)計師"; person.job.salary = "30K"; person.job.a.b.c = 999; person.hobby[0] = "學(xué)習(xí)"; } </script>
到此這篇關(guān)于vue3.2 reactive函數(shù)的文章就介紹到這了,更多相關(guān)vue3.2 reactive函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue Element前端應(yīng)用開發(fā)之樹列表組件
本篇隨筆主要介紹樹列表組件和下拉列表樹組件在項目中的使用,以及一個SplitPanel的組件。2021-05-05Vue中scrollIntoView()方法詳解與實際運用舉例
這篇文章主要給大家介紹了關(guān)于Vue中scrollIntoView()方法詳解與實際運用舉例的相關(guān)資料,該scrollIntoView()方法將調(diào)用它的元素滾動到瀏覽器窗口的可見區(qū)域,需要的朋友可以參考下2023-12-12VUE+ElementUI下載文件的幾種方式(小結(jié))
本文主要介紹了VUE+ElementUI下載文件的幾種方式(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01vue2響應(yīng)式原理之Object.defineProperty()方法的使用
這篇文章主要介紹了vue2響應(yīng)式原理之Object.defineProperty()方法的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10