<template>
<div>
<div>{{msg}}</div>
<button @click="changemsg">改变msg</button>
<!-- 模板会自动解析value -->
<h2>{{counter}}</h2>
<button @click="changemsg">改变msg</button>
<h2>{{obj.name}}</h2>
<button @click="cheangeObjName">改变名字</button>
<h2>{{obj.children.name}}</h2>
<!-- 解构赋值书写方式 -->
<div>{{name}}</div>
<div>{{children.name}}</div>
</div>
</template>
<script lang='ts'>
// reactive可以引用对象类型
import { defineComponent,reactive, toRefs, onBeforeMount, onMounted } from 'vue';
// import { useRoute, useRouter } from 'vue-router';
export default defineComponent({
setup(props, context) {
//msg的逻辑代码
//没有响应式
let msg = "hello";
function changemsg(){
msg='nihao'
console.log(msg);//数据不是响应式
}
//通过ref定义响应式变量
//counter的逻辑代码
let counter =ref(0)
function changemsg(){
counter.value++
}
//通过reactive定义响应式引用类型的数据
//obj的逻辑代码
let obj =reactive({
name:"李四",
age:13,
children:{
name:"啊啊"
}
})
function cheangeObjName(){
obj.name="索隆"
}
//toRefs(object) 可以使解构赋值的数据重新获取响应式
//let {name,chedren}=toRefs(obj) //也可以写成这样不过return出去得写上name和chedren
return{msg,changemsg,counter,changemsg,obj,cheangeObjName,...toRefs(obj)};
})
return {
}
},
}
</script>
<style scoped lang='scss'>
</style>
在setup里定义变量ref,toRefs,reactive三个响应式的应用
最新推荐文章于 2024-08-22 22:00:10 发布