vue2的optionApi

1.创建项目

vue create vue2_optionapi

image.png

目录：

image.png

App.vue

<template>
  <div>
    <div>app: count: {{ count }} - count * 2: {{ doubleCount }}</div>
    <home :title="title" @change="change" />
    <button @click="btnClick">app按钮</button>
  </div>
</template>

<script>
import Base from "@/extends/base.vue";
import defaultMixin from "@/mixins/defaultMixin";
import Home from "@/views/Home.vue";
export default {
  name: "App",
  mixins: [defaultMixin],
  extends: Base, //Base为组件名
  provide() {
    return {
      message: () => this.info, 
      //如果想实现父组件中的info发生改变，使用message的后代组件都响应式更新，message必须是一个由返回值的函数
    };
  },
  components: {
    Home,
  },
  data() {
    return {
      info: "今天天气不错",
      count: 100,
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  methods: {
    change(info) {
      console.log("监听到了home的change事件", info);
      this.info = info;
    },
  },
  watch: {
    info(newVal, oldVal) {
      console.log("监听到了info值的改变", newVal, oldVal);
    },
  },
  filters: {
    priceFormat(val) {
      return "￥" + val;
    },
  },
  // 下面是生命周期
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestory() {},
  destoryd() {},
};
</script>

<style></style>

src/views/Home.vue

<template>
  <div>
    <h1>home标题：{{ title }}</h1>
    <div>home信息：{{ message }}</div>
    <button @click="btnClick">home按钮</button>
  </div>
</template>

<script>
export default {
  inject: ["message"],
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  methods: {
    btnClick() {
      this.$emit("change", "雷电预警");
    },
  },
  watch: {
    message(newVal, oldVal) {
      console.log("home中监听到了message值的改变", newVal, oldVal);
    },
  },
};
</script>

<style lang="scss" scoped></style>

src/extends/base.vue

<template>
  <div>不要再extends模板中写内容，写了也不会渲染</div>
</template>

<script>
export default {
  methods: {
    btnClick() {
      console.log("extends中 btnClick事件被触发");
    },
  },
};
</script>

<style lang="scss" scoped></style>

src/mixins/defaultMixin.js

export default {
  data() {
    return {
      title: "hello world",
    };
  },
  created() {
    console.log("defaultMixin  created");
  },
  methods: {
    increase() {
      console.log("defaultMixin increase事件被触发");
    },
  },
};

image.png

上面的转换为vue3CompositionApi写法

目录如下：

image.png

App.vue

<template>
  <div>
    <div>app: count: {{ count }} - count * 2: {{ doubleCount }}</div>
    <home :title="title" @change="change" />
    <button @click="btnClick">app按钮</button>
  </div>
</template>

<script>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeMount,
  onUpdated,
  onBeforeUpdate,
  onUnmounted,
  onBeforeUnmount,
  onActivated,
  onDeactivated,
} from "vue";
import { useMixins } from "./hooks/useMixins";
import { useExtends } from "./hooks/useExtends";
import Home from "./Home.vue";
export default {
  name: "App",
  provide() {
    return {
      message: this.info,
    };
  },
  components: {
    Home,
  },
  setup() {
    //mixins和extends，vue3虽然也支持，但是对于使用vue3开发其实没有什么用处了，可以用hooks替代
    const { title } = useMixins();
    const { btnClick } = useExtends();
    //响应式变量
    const info = ref("今天天气不错"); //ref函数返回一个ref对象，参数存放在ref对象的value的值里
    const count = ref(100);
    // 计算属性
    const doubleCount = computed(() => {
      return count.value * 2;
    });
    //methods
    const change = (val) => {
      console.log("监听到了home的change事件", val);
      info.value = val;
    };
    //vue3废弃掉了priceFormat
    const priceFormat = (val) => {
      return "￥" + val;
    };

    //watch
    watch(info, (newVal, oldVal) => {
      console.log("监听到了info值的改变", newVal, oldVal);
    });

    // 下面是生命周期
    onBeforeMount(() => {
      console.log("组件挂载前");
    });
    onMounted(() => {
      console.log("组件挂载成功");
    });

    onUpdated(() => {});
    onBeforeUpdate(() => {});
    onUnmounted(() => {});
    onBeforeUnmount(() => {});
    onActivated(() => {});
    onDeactivated(() => {});
    return {
      info: "今天天气不错",
      count: 100,
      doubleCount,
      change,
      priceFormat,
      title,
      btnClick,
    };
  },
};
</script>

<style></style>

Home.vue

<template>
  <div>
    <h1>home标题：{{ title }}</h1>
    <div>home信息：{{ message }}</div>
    <button @click="btnClick">home按钮</button>
  </div>
</template>

<script>
import { watch } from "vue";
export default {
  inject: ["message"],
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  setup(props, { emit }) {
    const btnClick = () => {
      emit("change", "雷电预警");
    };
    watch(message, (newVal, oldVal) => {
      console.log("home中监听到了message值的改变", newVal, oldVal);
    });
    return {
      btnClick,
    };
  },
};
</script>

<style lang="scss" scoped></style>

hooks/useExtends.js

export function useExtends() {
  const btnClick = () => {
    console.log('extends中 btnClick事件被触发')
  }

  return {
    btnClick
  }
}

hooks/useMixins.js

import {
  ref,
  onMounted
} from "vue"
export function useMixins() {
  console.log('defaultMixin  created')
  const title = ref('hello world')
  const increase = () => {
    console.log('defaultMixin increase事件被触发')
  }
  onMounted(() => {
    console.log("defaultMixin中onMounted生命周期被触发")
  })
  return {
    title,
    increase
  }
}

此文档主要内容来源于王红元老师的vue3+ts视频教程