VUE3之setup()和 ref()函数的学习，安排~

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

setup()和 ref()函数

setup ref reactive与生命周期参考博客 blog.csdn.net/qq_44831027…

setup 函数的用法，可以代替 Vue2 中的 data和 methods 属性，直接把逻辑写在setup 里就可以
ref 函数的使用，它是一个神奇的函数，我们这节只是初次相遇，要在template中使用的变量，必须用ref包装一下。
return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴露的变量和方法。

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h2>欢迎来到太极开发者社区</h2>
  <div>
    请选择一个讨论组加入
  </div>
  <div>
    <button 
      v-for="(item,index) in forums" 
      :key="index"
      @click="selectForumFun(index)"
      >
        {{ index }} -{{ item }}
    </button>
  </div>
  <div>你选择了【 {{ selectForum }} 】讨论组加入！</div>
</template>


<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'App',
  setup() {
    const forums = ref(["前端开发","大数据","微服务"]);
    const selectForum = ref("");
    const selectForumFun = (index: number) => {
      selectForum.value = forums.value[index];
    }
    return {
      forums,
      selectForum,
      selectForumFun
    }
  }
});
</script>

用reactive()函数优化优化程序

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h2>欢迎来到太极开发者社区</h2>
  <div>
   请选择一个讨论组加入
  </div>
  <div>
    <button 
      v-for="(item,index) in data.forums" 
      :key="index"
      @click="data.selectForumFun(index)"
      >
        {{ index }} -{{ item }}
    </button>
  </div>
  <div>你选择了【 {{ data.selectForum }} 】讨论组加入！</div>
</template>


<script lang="ts">
import { ref, reactive } from 'vue';

interface DataProps {
  forums:string[],
  selectForum: string,
  selectForumFun: (index: number) => void;
}


export default{
  name: 'App',
  setup() {
    const data: DataProps = reactive({
      forums: ["前端开发","大数据","微服务"],
      selectForum:"",
      selectForumFun: (index: number) => {
        data.selectForum= data.forums[index];
      }
    })
    // const forums = ref(["前端开发","大数据","微服务"]);
    // const selectForum = ref("");
    // const selectForumFun = (index: number) => {
    //   selectForum.value = forums.value[index];
    // }
    return {
      data
    }
  }
};

</script>

toRefs()继续优化

现在template中，每次输出变量前面都要加一个data,这是可以优化的。有的小伙伴说了，我用...扩展运算符就可以解决这个问题了。在这里我就可以告诉你不行，因为结构后就变成了普通变量，不再具有响应式的能力。所以要解决这个问题，需要使用 Vue3 的一个新函数toRefs()。使用前需要先进行引入。

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h2>欢迎来到太极开发者社区</h2>
  <div>
    请选择一个讨论组加入
  </div>
  <div>
    <button 
      v-for="(item,index) in forums" 
      :key="index"
      @click="selectForumFun(index)"
      >
        {{ index }} -{{ item }}
    </button>
  </div>
  <div>你选择了【 {{ selectForum }} 】讨论组加入！</div>
</template>


<script lang="ts">
import { ref, reactive, toRefs } from 'vue';

interface DataProps {
  forums: string[];
  selectForum: string;
  selectForumFun: (index: number) => void;
}



export default{
  name: 'App',
  setup() {
    const data: DataProps = reactive({
     forums: ["前端开发","大数据","微服务"],
      selectForum:"",
      selectForumFun: (index: number) => {
        data.selectForum= data.forums[index];
      }
    })


  const refData = toRefs(data)
  refData.forums
    // const forums = ref(["前端开发","大数据","微服务"]);
    // const selectForum = ref("");
    // const selectForumFun = (index: number) => {
    //   selectForum.value = forums.value[index];
    // }
    return {
      ...refData
    }
  }
};
</script>

总结

如何选择ref和reactive

网络上对这两个方法的争论还是不少的，但到目前为止，还没有什么实质性的理论到底是用Ref()好，还是reactive()好，也就是两种方法都可以。他们的作用都是生成响应式对象，目前来看只是编写上有所不同。我个人更倾向于使用reactive(),因为它让程序看起来更规范。 前端路漫漫其修远兮，吾将上下而求索，一起加油，学习前端吧

欢迎留言讨论~

VUE3之setup()和 ref()函数 的学习，安排~