vue3 setup函数

当组件内容越来越庞大后，data、methods里的东西也会越来越多，非常难维护。因此vue3新增了setup方法，可以把 data 中的数据和 methods 等写在相临的位置，方便查看和维护。

export default {
  setup() {
    let count = 0;
    function increment() {
      count++;
    }
    return {
      count,
      increment,
    };
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

在setup中，需要把数据或方法return才能在组件中使用。

setup中有两个参数

• props，用于接收父组件传过来的数据。

  props: {
    value: Number,
  },
  setup(props) {
    console.log(props);
  },
  1
  2
  3
  4
  5
  6

• context: 一个上下文对象(组件外部传递过来的属性，相当于vue2.x中this.$attrs、this.emit、this.$slots等获取到的数据)

注意：

• setup中不能使用this，因为setup是在beforeCreate阶段前执行的，this为undefined
• setup的获取的props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性(vue3 解构响应式失效解析)。
• setup与vue2.x选项式api混用时的一些注意点(vue2和vue3的配置尽量不要混用)
  1. 在vue2的配置中可读取到setup中返回的属性和方法
     vue3.x是兼容vue2.x写法的，在setup中返回的数据跟方法可以在methods中使用

    setup() {
      let count = 0;
      function increment() {
        count++;
      }
      return {
        count,
        increment,
      };
    },
    methods: {
      log() {
        console.log(this.count);
        console.log(this.increment);
      }
    }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

  2. 在setup中不能读取vue2配置中的属性和方法
  3. 如果vue2和vue3的配置有冲突，则vue3的setup优先

  data() {
    return {
      count: 1
    }
  },
  setup() {
    let count = 0;
    function increment() {
      count++;
    }
    return {
      count,
      increment,
    };
  },
  // 此时组件获取的count为0
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

在 setup() 函数中手动暴露(return)大量的状态和方法非常繁琐。可以通过构建工具来简化操作，在script标签中添加setup属性即可。

<script setup>
  let count = 0;
  function increment() {
    count++;
  }
script>
1
2
3
4
5
6

虽然在vue3.x中依然可以使用vue2.x的生命周期钩子，但是有两个被更名：

• beforeDestroy改成beforUnmount
• destroyed改成 unmounted

前面提到vue3.x尽量不要跟vue2.x混着用，vue3.x也提供了一些生命周期钩子在setup方法中调用，对vue2.x钩子的对应关系如下：

• beforeCreate ======> setup()
• created ======> setup()
• beforeMount ======> onBeforeMount
• mounted ======> onMounted
• beforeUpdate ======> onBeforeUpdate
• updated ======> onUpdated
• beforeUnmount ======> onBeforeUnmount
• unmounted ======> onUnmounted