Vue组件 响应式监听方案

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>