Vue3的setup函数以及ref和reactive方法的使用

    在vue3中，有个核心的东西，setup函数，它相当于一个新的生命周期，在beforeCreate 之前执行，在里面没有this

setup默认是非响应式的，即做点击事件修改num的值，模板上的num不会跟着变。

这时候需要用ref方法来让它变成响应式：

<template>
  <div>
    <div>Vue3中的setup函数</div>
    <div>{{ count }}</div>
    <div>
      <button @click="setCount(1)">添加</button>
    </div>
  </div>
</template>

<script>
//1.将ref函数从vue当中导入
import { ref } from "vue";
export default {
  //2.把一个值类型 进行ref封装
  setup() {
    const count = ref(0);
    //4.函数
    const setCount = (val) => {
      // 规定val的类型
      if (typeof val === "number") {
        console.log(count.value);
        count.value += val;
      } else {
        console.error("val必须是一个数字");
      }
    };
    //3.把想在外面进行渲染的数据，通过return导出
    return {
      count,
      setCount,
    };
  },
};
</script>

重点：setup中不能使用this,ref就是接收某些东西的内部值并返回一个可响应的ref对象,使用return把数据导出进行渲染

其实基于上面这种，我们还有种优化方案，就是把setup中的函数提取到外面抽离到外面进行封装，setup里只需进行一次解构，这样就大大减少了setup中的代码和整洁度

代码如下：

<template>
  <div>
    <div>{{ count }}</div>
    <div>
      <button @click="submit(1)">添加</button>
    </div>
  </div>
</template>

<script>
/*
    目标：学会在setup limian进行数据响应式操作
*/
//1.将ref函数从vue当中导入
import { ref } from "vue";
// initVal 初始值
const useCount = (initVal) => {
  //2.把一个值类型 进行ref的包装
  const count = ref(initVal);
  // 4.函数
  const submit = (val) => {
    if (typeof val === "number") {
      count.value += val;
    } else {
      console.error("val必须是一个数字");
    }
  };
  return [count, submit];
};
export default {
  setup() {
    const [count, submit] = useCount(0);
    // 3.把想在外面进行的渲染的数据，通过return导出
    return {
      count,
      submit,
    };
  },
};
</script>

<style>
</style>

toRef的使用：

什么是toRef:

    比如有这样的一种情况，一个对象里面的数据,有一部分是响应式的，有一部分是写死的

    这样就可以使用toRef可以把一个对象里面的属性变成响应式的数据

代码如下：

<template>
  <div>
    <div>ageRef:{{ ageRef }}</div>
  </div>
</template>

<script>
// 1.导入
import { reactive, toRef } from "vue";
export default {
  setup() {
    // 可以有这样的一种情况，一个对象里面的数据,有一部分是响应式的，有一部分是写死的
    //toRef可以把一个对象里面的属性变成响应式的数据
    const state = reactive({
      name: "狗蛋",
      age: 15,
    });
    const ageRef = toRef(state, "age");
    console.log(ageRef);
    setInterval(() => {
      ageRef.value++;
    }, 1000);
    return {
      ageRef,
      state,
    };
  },
};
</script>

<style>
</style>

以上代码中出现了一个新鲜词汇reactive，下面就详细介绍一下用法

 reactive方法 把对象里面的多个属性变成响应式数据

<template>
  <div>
    <div>name:{{ p.name }} age:{{ p.age }}</div>
    <div>
      <button @click="changeAge">累加</button>
    </div>
    <div>{{ count }}</div>
  </div>
</template>

<script>
/*
    目标：ref把值类型变成响应式对象
    再利用reactive方法 把对象里面的多个属性变成响应式数据
*/
// 1
import { reactive, ref } from "vue";
export default {
  setup() {
    //2.调用reactive方法进行数据的响应式处理
    const p = reactive({
      name: "花腔",
      age: 18,
    });
    console.log(p);
    const changeAge = () => {
      p.age++;
    };
    const count = ref(0);
    return {
      p,
      changeAge,
      count,
    };
  },
};
</script>

<style>
</style>

最后再介绍一种toRefs

一个state里面 可能键非常多 如果一个个的导出会比较麻烦,使用toRefs把一个响应式对象里面的每一个数据 都变成ref对象

<template>
  <div>
    <div>{{ a.age }}</div>
    <div>{{ b }}</div>
  </div>
</template>

<script>
//1.导入
import { reactive, toRefs } from "vue";
/*
    把一个state里面 可能键非常多 如果一个个的导出会比较麻烦
    使用toRefs把一个响应式对象里面的每一个数据 都变成ref对象
*/
export default {
  setup() {
    const state = reactive({
      a: {
        age: 13,
      },
      b: 10,
      c: 20,
      d: 30,
    });
    setInterval(() => {
      state.b++;
    }, 1000);
    return {
      // 如果直接使用结构会导致响应式特性失效
      //   ...state,
      ...toRefs(state),
    };
  },
};
</script>

<style>
</style>

如果有什么不了解的地方可留言，如果觉得小编文章做得不好不全，小编一定会进行改进，谢谢！