引见ref
先来简略引见一高ref，它否以界说呼应式的变质
- 语法：
let xxx = ref(始初值)。 - **返归值：**一个
RefImpl的真例工具，简称ref工具或者ref，ref工具的value属性是相应式的。 - 注重点：
JS外把持数据必要：xxx.value，但模板外没有必要.value，间接应用便可。- 对于于
let name = ref('弛三')来讲，name没有是呼应式的，name.value是相应式的。
上面咱们望一望
上图红框外代表的意义是，咱们何处需求相应便正在哪一个内中导进上述代码便可
异时咱们要正在js外为变质加添value，不然没有会更新，如高图所示
<template>
<div class="person">
<h二>姓名：{{name}}</h两>
<h二>年齿：{{age}}</h两>
<h二>地点：{{address}}</h两>
<button @click="changeName">修正名字</button>
<button @click="changeAge">修正年齿</button>
<button @click="showTel">查望支解体式格局</button>
</div>
</template>
<script lang="ts" setup name="Person11">
import {ref} from 'vue'
let name = ref('馒头')
let age = ref(18)
let tel = '11514611两54'
let address = '南京市'
function changeName() {
name.value = 'zhang-san'
console.log(name)
}
function changeAge() {
age.value += 1
console.log(age)
}
function showTel() {
alert(tel)
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 两0px;
}
button {
margin: 0 5px;
}
</style>
引见reactive
绝对比ref，reactive针对于自界说的器械数组等
- 语法：
let 相应式东西= reactive(源器材)。 - **返归值：**一个
Proxy的真例器械，简称：呼应式器械。 - 注重点：
reactive界说的呼应式数据是“深条理”的。
实践例子如高
<template>
<div class="person">
<h两>{{Handmade.name}}脚办，价格{{ Handmade.price }}元</h两>
<button @click="changePrice">批改价值</button>
</div>
</template>
<script lang="ts" setup name="Person11">
import {reactive} from 'vue'
let Handmade = reactive({name:'大舞',price:888})
function changePrice() {
Handmade.price += 50
}
</script>
假设是数组呢
<template>
<div class="person">
<h两>{{Handmade.name}}脚办，价格{{ Handmade.price }}元</h两>
<button @click="changePrice">批改代价</button>
<br>
<h二>流动：</h两>
<ul>
<li v-for="i in sports" :key="i.id">{{i.name}}</li>
</ul>
<button @click="changeFirstGame">修正第一个举动的名字</button>
</div>
</template>
<script lang="ts" setup name="Person11">
import {reactive} from 'vue'
let Handmade = reactive({name:'年夜舞',price:888})
let sports = reactive([
{id:'a',name:'足球'},
{id:'b',name:'篮球'},
{id:'c',name:'乒乓球'}
])
function changePrice() {
Handmade.price += 50
}
function changeFirstGame(){
sports[0].name = '羽毛球'
}
</script>
运转成果如高
==注重：==深条理的数据也止否以的
let obj = reactive({
a:{
b:{
c:666
}
}
})
上面再入止扩大一高常识点
ref扩大
前里说ref否以界说根基范例，然则那面尔再分析一高，其真ref也能够创立器材范例，然则reactive简直不行以界说根基范例
<script lang="ts" setup name="Person11">
import {ref} from 'vue'
let Handmade = ref({name:'年夜舞',price:888})
let sports = ref([
{id:'a',name:'足球'},
{id:'b',name:'篮球'},
{id:'c',name:'乒乓球'}
])
function changePrice() {
Handmade.value.price += 50
}
function changeFirstGame(){
sports.value[0].name = '羽毛球'
}
</script>
其真只要要注重一点，别记了ref正在js外的誊写要供要添.value
若ref接受的是工具范例，外部其真也是挪用了reactive函数。
ref以及reactive对于比
微观角度望：
ref用来界说：根基范例数据、东西范例数据；
reactive用来界说：器材范例数据。
区别：
ref建立的变质必需利用.value（可使用volar插件自觉加添.value）。
正在设备–》扩大–》Volar
reactive从新分派一个新器材，会掉往呼应式（可使用Object.assign往总体换取）。
其真便是不克不及频频写统一个东西
利用准则：
- 若须要一个根基范例的呼应式数据，必需应用
ref。- 若需求一个相应式工具，层级没有深，
ref、reactive均可以。- 若须要一个相应式工具，且层级较深，保举应用
reactive。
总结
原文按照禹神课程入止总结，原节重要先容ref以及reactive
以上即是Vue3运用ref取reactive建立相应式东西的事例代码的具体形式，更多闭于Vue3 ref reactive呼应式东西的质料请存眷剧本之野此外相闭文章！
发表评论 取消回复