都知道在Vue3不使用reactive一般不能让引用对象进行更新,但是如果在更新前使用ref或者reactive进行更新其他数据,没有定义reactive的数据依旧可以进行更新
<template>
<h1>一个人的信息</h1>
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>工作:{{ job.type }}</h2>
<h2>薪水:{{ job.salary }}</h2>
<h2>爱好:{{ hobby }}</h2>
<h2>测试数据c:{{ job.a.b.c }}</h2>
<h2>测试数据job2:{{ job2.ccc }}</h2>
<button @click="changeInfo">点击修改</button>
</template>
<script>
import { ref,reactive } from 'vue'
export default {
setup() {
let name = ref('张三')
let age = ref(18)
let job = reactive({
type:"前端工程师",
salary:"30k",
a:{
b:{
c:666
}
}
})
// let hobby = reactive(["跳","rap","打篮球"])
let hobby = ["跳","rap","打篮球"]
let job2 = {
ccc:1
}
function changeInfo() {
// name.value="李四"
// age.value= 48
// console.log(job)
job.type = "UI设计师"
// job.salary = "60k"
// job.a.b.c = 999
job2.ccc = 2
hobby[0] = "唱"
}
//返回一个对象(常用)
return {
name,age,job,job2,hobby,changeInfo
}
}
}
</script>
<style></style>
点击按钮会修改下面爱好和测试数据job2,但是两个并未使用reactive进行响应式定义