- 一般处理基本数据类型, 复杂数据类型有reactive函数
<template>
<h1>ref</h1>
<hr>
<div>{{name}}</div>
<div>{{age}}</div>
<button @click="changeNameAge">改变名字和年龄</button>
</template>
<script>
import {ref} from "vue"
export default {
name: 'Vue3Study01Setup',
setup(){
let name = ref('lin');
let age = ref(18)
function changeNameAge(){
console.log(name,age);
name.value = 'ling',
age.value = 20
}
return {
name,age,changeNameAge
}
}
};
</script>
<style lang="scss" scoped>
</style>
- reactive 处理复杂数据类型
<template>
<h1>reactive</h1>
<hr>
<div>{{name}}</div>
<div>{{age}}</div>
<div>{{job.type}}</div>
<div>{{job.language}}</div>
<div>{{job.a.b.c}}</div>
<div>{{job2.type}}</div>
<div>{{job2.software}}</div>
<button @click="changeNameAge">改变名字和年龄</button>
</template>
<script>
import {ref, reactive} from "vue"
export default {
name: 'Vue3Study01Setup',
setup(){
let name = ref('lin');
let age = ref(18)
let job = ref({
type:'前端开发',
language: 'JavaScript',
a:{
b:{
c:666
}
}
})
let job2 = reactive({
type:'ui',
software:'ps',
})
function changeNameAge(){
name.value = 'ling',
age.value = 20,
job.value.type = '后端开发',
job.value.language = 'java'
job.value.a.b.c = 999
job2.type = 'test'
job2.software = '手机电脑'
}
return {
name,age,changeNameAge,job,job2
}
}
};
</script>
<style lang="scss" scoped>
</style>