生命周期

Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子

Vue 2 生命周期

• 创建阶段：beforeCreate、created
• 挂载阶段：beforeMount、mounted
• 更新阶段：beforeUpdate、updated
• 销毁阶段：beforeDestroy、destroyed

vue
<template>
  <div class="hello">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="add">点击+1</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      sum: 1
    }
  },
  methods: {
    add() {
      this.sum += 1
    }
  },
  // 创建
  beforeCreate() {
    console.log('创建前')
  },
  created() {
    console.log('创建完毕')
  },
  // 挂载
  beforeMount() {
    console.log('挂载前')
  },
  mounted() {
    console.log('挂载完毕')
  },
  // 更新
  beforeUpdate() {
    console.log('更新前')
  },
  updated() {
    console.log('更新完毕')
  },
  // 销毁
  beforeDestroy() {
    console.log('销毁前')
  },
  destroyed() {
    console.log('销毁完毕')
  }
}
</script>

Vue 3 生命周期

• 创建阶段：setup
• 挂载阶段：onBeforeMount、onMounted
• 更新阶段：onBeforeUpdate、onUpdated
• 卸载阶段：onBeforeUnmount、onUnmounted

vue
<template>
  <div class="sum">
    <h2>当前sum为：{{ sum }}</h2>
    <button @click="add">点击+1</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Sum'
}
</script>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

let sum = ref(0);

function add() {
  sum.value += 1;
}

// 创建
console.log('创建')

// 挂载
onBeforeMount(() => {
  console.log('挂载前')
})
onMounted(() => {
  console.log('挂载完毕')
})

// 更新
onBeforeUpdate(() => {
  console.log('更新前')
})
onUpdated(() => {
  console.log('更新完毕')
})

// 卸载
onBeforeUnmount(() => {
  console.log('卸载前')
})
onUnmounted(() => {
  console.log('卸载完毕')
})

</script>

自定义hooks

hooks 实现真正的组合式API

@/component/Component.vue

vue
<template>
  <div class="sum">
    <h2>当前sum为：{{ sum }}，放大10倍后：{{ multiSum }}</h2>
    <button @click="add">点击+1</button>
    <hr>
    <img v-for="(dog, index) in dogList" :src="dog" :alt="dog" :key="index">
    <hr>
    <button @click="addDog">添加一只狗</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Component'
}
</script>

<script setup lang="ts">
import useSum from '@/hooks/useSum';
import useDog from '@/hooks/useDog';

const { sum, multiSum, add } = useSum();
const { dogList, addDog } = useDog();
</script>

<style scoped>
.sum {
  background-color: darksalmon;
  box-shadow: 0 0 10px;
  border-radius: 6px;
  padding: 20px;
}

button {
  margin: 2px;
}

img {
  height: 100px;
  margin-right: 5px;
}
</style>

@/hooks/useSum.ts

ts
import { computed, ref } from 'vue';

export default () => {
  let sum = ref(0);

  let multiSum = computed(() => {
    return sum.value * 10;
  })

  function add() {
    sum.value += 1;
  }

  return { sum, add, multiSum };
}

@/hooks/useDog.ts

ts
import { onMounted, reactive } from 'vue';
import axios from 'axios';

export default function() {
  let dogList = reactive([
    'https://images.dog.ceo/breeds/chow/n02112137_2133.jpg'
  ]);

  async function addDog() {
    try {
      let res = await axios.get('https://dog.ceo/api/breed/chow/images/random');
      dogList.push(res.data.message);
    } catch (error) {
      alert(error)
    }
  }

  onMounted(() => {
    addDog();
  });

  return { dogList, addDog };

}