Vue3.0基础

vue3.0模板已上传至github/ gitee，如有需要可以下载

vue3.0 + vite + scss(github)
vue3.0 + vite + scss(gitee)

更新内容

setup 代替之前的 data ，生命周期 methods computed watch 合并在一起，全部放在setup函数中
ref 定义基本类型，使得数据具有响应式
reactive 定义引用类型，通用使数据具有响应式
toRefs 将对象结构解析出来
toRef 将对象结构解析出来的值在具有响应式的基础上，如果未找到key，就默认给个值
readonly 是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据，不可进行修改，即无响应
provide 与 inject 跨组件传递
生命周期
computed 计算属性
watch 侦听器
vuex

|

生命周期

setup()             开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount()     组件挂载到节点上之前执行的函数；
onMounted()         组件挂载完成后执行的函数；
onBeforeUpdate()    组件更新之前执行的函数；
onUpdated()         组件更新完成之后执行的函数；
onBeforeUnmount()   组件卸载之前执行的函数；
onUnmounted()       组件卸载完成后执行的函数；
onActivated()       被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated()     比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured()   当捕获一个来自子孙组件的异常时激活钩子函数。

|

reactive 和 toRefs 的使用

import { reactive, toRefs } from "vue";
export default {
  name: "Home",
  setup() {
    const data = reactive({
      name: "trist",
      age: 22,
      sex: "boy",
    });

    console.log(data.age); // 22

    return {
      ...toRefs(data),  // 这样抛出后就可以直接使用data中的值了  {{ name }}
    };
  },
};

|

methods 的写法

<template>
  <div @click="handler">{{ num }}</div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      num: 1,
    });
    const methodName = {
      handler(a) {
        data.num++;
        console.log(data.num);
      },
    };
    return {
      ...toRefs(data),
      ...methodName, // 展开返回，这样就可以写多个方法了
    };
  },
};
</script>

|

生命周期的位置

<template>
  <div @click="handler">{{ num }}</div>
</template>

<script>
import { ref, reactive, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue";
export default {
  setup() {
    const data = reactive({
      num: 1,
    });
    const methodName = {
      handler(a) {
        data.num++;
        console.log(data.num);
      },
    };
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    return {
      ...toRefs(data),
      ...methodName, // 展开返回，这样就可以写多个方法了
    };
  },
};
</script>

|

计算属性

<template>
  <div @click="handler">{{ num }}</div>
  <div>{{ comput }}</div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";  // 引入计算属性
export default {
  setup() {
    const data = reactive({
      num: 1,
    });
    const methodName = {
      handler() {
        data.num++;
        console.log(data.num);
      },
    };
    const comput = computed(() => {   // 定义计算属性
      return data.num * 10;
    });
    return {
      ...toRefs(data),
      ...methodName, // 展开返回，这样就可以写多个方法了
      comput, // 返回定义的计算属性
    };
  },
};
</script>

|

多个计算属性

<template>
  <div @click="handler">{{ num }}</div>
  <div>{{ cp1 }}</div>
  <div>{{ cp2 }}</div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
export default {
  setup() {
    const data = reactive({
      num: 1,
      num2: 2,
    });
    const methodName = {
      handler() {
        data.num++;
        data.num2++;
      },
    };
    const comput = {   // 多个值采取对象写法
      cp1: computed(() => {
        return data.num * 10;
      }),
      cp2: computed(() => {
        return data.num2 * 50;
      }),
    };
    return {
      ...toRefs(data),
      ...methodName, // 展开返回，这样就可以写多个方法了
      ...comput,  // 将所有计算属性全部返回
    };
  },
};
</script>

|

watch 侦听器（单个）

<template>
  <div @click="handler">{{ num }}</div>
  <div>{{ num }}</div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
export default {
  setup() {
    const data = reactive({
      num: 1,
    });
    const methodName = {
      handler() {
        data.num++;
        data.num2++;
      },
    };
    watch(
      () => data.num,
      (newV, oldV) => {
        console.log(newV, oldV);
      }
    );
    return {
      ...toRefs(data),
      ...methodName, // 展开返回，这样就可以写多个方法了
    };
  },
};
</script>

|

watch 侦听器（多个）

<template>
  <div @click="handler">{{ num }}</div>
  <div>{{ num }}</div>
  <div>{{ num2 }}</div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
export default {
  setup() {
    const data = reactive({
      num: 1,
      num2: 2,
    });
    const methodName = {
      handler() {
        data.num++;
        data.num2++;
      },
    };
    watch(
      () => [data.num, data.num2],
      ([newV1, newV2], [oldV1, oldV2]) => {
            console.log(oldV1, oldV2);  ------------// 原来的值
            console.log(newV1, newV2);  ------------// 变化后的值
      }
    );
    return {
      ...toRefs(data),
      ...methodName, // 展开返回，这样就可以写多个方法了
    };
  },
};
</script>