Vue3

Vue3

setup() 和 ref() 的使用

ref() 这是 vue3 声明变量的方式，并且在 setup() 中 return 返回出去才可以在页面中使用。 vue2 声明的变量需要放在 data 中声明使用。

vue2 中修改 data 中的变量需要在 methods 中定义方法，在方法中改变值。vue3 直接在 setup() 中声明方法操作变量。通过 ref() 声明的变量需要通过 .value 进行赋值和读取操作。

举个例子：点击按钮，显示累计点击数。

<template>
  <span>累计点击数：{{ count }}</span>
  <br />
  <button @click="changeCount">点击</button>
</template>

import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const count = ref(0 as number);
    const changeCount = () => {
      count.value++;
    };

    return {
      count,
      changeCount,
    };
  },
});

在 setup() 中通过 ref() 声明变量，通过 .value 读取值。在页面中需要用到 count 和 changeCount ，则需要 return 。

reactive()

这也是一个方法，接受的参数是一个 Object 。可以修改变量值，不再需要通过 .value 去改变值，也不需要再将一个个的都 return ，这只需要返回一个 data 就可以了。

举个例子：点击按钮，显示累计点击数。

<template>
  <span>累计点击数：{{ data.count }}</span>
  <br />
  <button @click="data.changeCount">点击</button>
</template>

import { defineComponent, reactive } from "vue";

export default defineComponent({
  setup() {
    const data = reactive({
      count: 0,
      changeCount: () => {
        data.count++;
      },
    });

    return {
      data,
    };
  },
});

在 setup() 中通过 reactive() 定义变量，通过 data. 操作值。在页面中需要 count 和 changeCount , 所以需要在 setup() 中 return { data } , 通过 data.count 和 data.changeCount 来实现。

toRefs()

使用 reactive() 在 template 中总是需要在变量前添加 data ，如果使用解构，就不具备响应式了。可以在 return 时通过 toRefs() 返回。

举个例子：点击按钮，显示累计点击数。

<template>
  <span>累计点击数：{{ count }}</span>
  <br />
  <button @click="changeCount">点击</button>
</template>

import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  setup() {
    const data = reactive({
      count: 0,
      changeCount: () => {
        data.count++;
      },
    });

    return {
      ...toRefs(data),
    };
  },
});

使用 ...toRefs() 返回数据，在 template 就不用在变量前加上 data 。

vue3 生命周期和钩子函数

setup()

开始创建组件之前，在 beforeCreate 和 created 之前执行。创建的是 data 和 methods 。