初探vue3--setup

初探vue3–setup

（作为记录，不正确的地方欢迎指出）

这里使用的是Vite构建的项目

npm init @vitejs/app

后面跟着指示操作就OK了。

vue3中专门为组件提供的新属性.它为我们使用vue3的Composition API 新特新提供了统一的入口.之前定义的data,methods等都统一放入setup中实现。
（Composition API没有深入了解过，我理解为vue中的很多功能拆分成了一个一个的hook，然后将他们组合起来便形成了vue3的composition api）

setup

<template>
  <div>
    <div>{{ number }}</div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const number = ref(0);
    return { number };
  },
};
</script>

暴露变量必须 return 出来，这样还是比较繁琐，也可以把setup放入script标签

<template>
  <div>
    <div>{{ number }}</div>
  </div>
</template>
<script setup>
import { ref } from "vue";

let number = ref(0);
</script>

ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值（简单来说操作ref响应式变量的值需要通过.value来）

const numberAdd = () => {
  number.value++;
};

如果有复杂数据，我们可以使用reactive，reactive不需要通过.value来操作

let number = ref(0);
const data = reactive({ num1: 1, num2: 2, num3: 3 });
const numberAdd = () => {
  number.value++;
  data.num1++
  console.log(data.num1)
};

这里说一个疑问，为什么const定义一个常量，却还可以更改值呢？
const定义的基本类型不能改变，但是定义的对象是可以通过修改对象属性等方法来改变的。

生命周期和computed

setup中没有了beforeCreate、created，在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。

beforeCreate	使用 setup()
created	使用 setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

let interval;
    onMounted(() => {
      interval = setInterval(() => {
        data.num1++;
      }, 1000);
    });
    onUnmounted(() => {
      console.log(1)
      clearInterval(interval);
    });

其实这样会显得setup很乱，假如我们需要一个处理过后的data我们可以这样写，将逻辑提取出来

<script>
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
export default {
  setup() {
    const number = ref(0);
    const data = dataArr();
    return {
      number,
      data,
    };
  },
};
function dataArr() {
  const data = reactive({
    num1: 1,
    num2: computed(() => data.num1 * 2),
    num3: 3,
  });
  let interval;
  onMounted(() => {
    interval = setInterval(() => {
      data.num1++;
    }, 1000);
  });
  onUnmounted(() => {
    console.log(1);
    clearInterval(interval);
  });
  return data;
}
</script>

暂时就写这么多，欢迎大家指正