VUE3基础之组合式开发和setup

我们知道VUE2是选项式开发，里面有data，watch，components，methods等等，VUE2会把方法或者数据或者监听器等放置在对应的选项里，但是VUE3是组合式开发，是把东西都放置在一起的。

什么是组合式开发

在聊组合式开发之前，我们先来说一下为什么VUE3要用组合式开发。VUE2使用选项式开发，把一个功能的实现所用到的数据放在data里，方法放在methods里，监视器放在watch里，计算属性放在computed里，如果功能很多的话，想找到一个功能对应的数据或者方法，或者想知道这个数据用于什么功能，就比较麻烦，需要来回滑动滚轮去找代码，不利于后期维护，所以VUE3开始使用组合式开发。

而组合式开发，就是把一个功能所需要的数据，方法，监视器，计算属性等全部放在一个函数里，这样在维护更新的时候就可以很方便的寻找到对应的数据或者方法或者别的东西。而这个函数就是setup。

什么是setup

setup是一个新的配置项，值是一个函数，就是上面所说的存放功能的函数。

• setup返回的对象中的内容可以直接在模板使用。
• setup不支持this关键字，setup中的this是undefined。
• setup函数会在beforeCreate之前调用，是最快的钩子函数。

所以说我们可以直接使用setup返回的对象中的内容，我们来看一个案例：

<template>
  <!-- vue3支持可以多个根标签 -->
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <button @click="changeAge">添加</button>
</template>
<script lang="ts">
// lang="ts"代表可以使用ts，我会用js语言，为什么写这个是因为如果没有这个，script标签会有蓝条提示
export default {
  setup() {
    // 声明数据  注意下面这样声明的变量不是响应式的，后面会讲怎么声明响应式变量
    let name = "yujiabao";
    let age = "18";

    // 声明方法
    function changeAge() {
      age += 1;
    }
    return { name, age, changeAge }; // 返回的对象中的内容可以直接在模板使用，不返回的没法使用
  },
};
</script>

setup不一定非要返回一个对象，可以直接返回一个渲染函数，然后函数再去返回，这个渲染函数的返回会直接展示在页面上。

<template>
  <div></div>
  <div></div>
</template>
<script lang="ts">
export default {
  setup() {
    return () => "yujiabao";
  },
};
</script>
<style scoped>

setup和传统data和methods的关系

我们知道setup里面可以声明变量和方法，那么它和data，methods之间有什么牵扯呢。

setup可以和传统data和methods并存

<template>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <div>{{ gender }}</div>
  <button @click="consoleA">打印A</button>
  <button @click="consoleB">打印B</button>
</template>
<script lang="ts">
export default {
  data() {
    return {
      gender: "男",
    };
  },
  methods: {
    consoleB() {
      console.log("b");
    },
  },
  setup() {
    let name = "yujiabao";
    let age = "18";

    function consoleA() {
      console.log("a");
    }
    return { name, age, consoleA };
  },
};
</script>

data和methods可以读取到setup的内容

因为setup执行顺序在data和methods之前，所以可以通过this去读取到setup的内容。

<template>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <div>{{ c }}</div>
  <button @click="consoleName">打印name</button>
</template>
<script lang="ts">
export default {
  data() {
    return {
      c: this.gender,
    };
  },
  methods: {
    consoleName() {
      console.log(this.name);
    },
  },
  setup() {
    let name = "yujiabao";
    let age = "18";
    let gender = "男";

    return { name, age, gender };
  },
};
</script>

但是反过来setup不能读取data和methods的内容，因为获取不到this。

如果data和methods与setup产生冲突，以setup为主

如果data的变量和setup的变量产生冲突，methods的方法和setup的方法产生冲突，一切以setup为主。

<template>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <div>{{ gender }}</div>
  <button @click="consoleTest">打印</button>
</template>
<script lang="ts">
export default {
  data() {
    return {
      gender: "男",
    };
  },
  methods: {
    consoleTest() {
      console.log(this.gender);
    },
  },
  setup() {
    let name = "yujiabao";
    let age = "18";
    let gender = "女";

    function consoleTest() {
      console.log(name);
    }
    return { name, age, gender, consoleTest };
  },
};
</script>

setup语法糖

我们写setup的时候很容易会忘记return返回数据或者方法，没有返回的数据和方法是无法使用的，所以VUE3还提供了一种方式去简便我们的写法，不用去返回，这种方式就是setup语法糖。

<script setup>

</script>

这就是setup语法糖，这种写法就相当于直接setup() {}，而且还会自动return，不用我们自己手写return。

举个例子：

<template>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <div>{{ gender }}</div>
  <button @click="consoleTest">打印</button>
</template>
<script setup lang="ts">
let name = "yujiabao";
let age = "18";
let gender = "女";

function consoleTest() {
  console.log(name);
}
</script>

可以看到数据和方法都是可以使用的。