3.0提供的API setup()
加载和组件的生命周期有关(在组件挂载之前执行setupapi)
1.shallowRef
shallowRef 非递归式监听
动态监听数据(复杂数据)只监听里面的value变化(里面外面的都不)
<template>
<div id="Body">
我是内容区域
<br />
<v-messageBox></v-messageBox>
<br />
<h3>使用keep-alive标签实现动态绑定组件</h3>
<div class="keep-box">
<button @click="changeStatus(true)">第一个</button>
<button @click="changeStatus(false)">第二个</button>
<keep-alive>
<component :is="data.componentId"></component>
</keep-alive>
</div>
</template>
<script>
import { shallowRef } from "vue";
export default {
name: "Body",
setup() {
let data = shallowRef({
componentId: KeepOne,
});
let changeStatus = (args) => {
//shallowRef 方法 监听的是value属性的变化
data.value = { componentId: args ? KeepOne : KeepTwo };
};
//要合并到当前组件 需要返回值(数据,方法,监听)
return { data, changeStatus };
},
};
</script>
2.ref
ref 构造简单数据监听的
<template>
<div id="Body">
<h3 @click="handle">{{msginfo}}</h3>
</div>
</template>
<script>
//ref 构造简单数据监听
import { ref } from "vue";
export default {
name: "Body",
setup() {
let msg={
login:'没有账号?注册',
load:'已有账号?登录',
}
let msginfo=ref(msg.login);
let handle=()=>{
if(msginfo.value==msg.login)
{
msginfo.value=msg.load;
}
else{
msginfo.value=msg.login;
}
}
return {msginfo,handle};
},
};
</script>
3.reactive
递归式监听: 不像shallowRef 只监听value变化,更加方便
<template>
<div id="Body">
<div>
<h3>{{list.a}}</h3>
<h3>{{list.b.c}}</h3>
<button @click="change">修改数据</button>
</div>
</div>
</template>
<script>
import {reactive} from "vue";
export default {
name: "Body",
setup() {
let list=reactive({ //注意写法,复杂变量 {a:b,...}
a:1,
b:{
c:2
}
})
let change=()=>{
list.a=3;
list.b.c=4;
}
return {list,change };
},
};
</script>