Javascript

聊聊vue2和vue3

本文主要是介绍聊聊vue2和vue3，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
  1. 组件的声明周期函数发生了变化
  • 例如:

    beforeCreate 修改为 setup
    created 修改为 setup
    beforeMount | onBeforeMount;
    mounted | onMounted;
    beforeUpdate | onBeforeUpdate;
    updated | onUpdated;
    activeted | onActiveted;
    deactiveted | onDeactiveted;
    beforeDestory | onBeforeUnmount;
    destoryed | onUnmounted;
    errorCaptured | one rrorCaptured;
    renderTracked | onRenderTracked;
    renderTriggered | onRenderTriggered;

  1. setup 中返回的值为双向数据绑定的属性

    export default {
  setup(props: any, context: any) {
    return {
      changeMsg() {
        console.log("修改了msg");
      },
    };
  },
};

  2. 使用 reactive 管理状态

    import { reactive } from "vue";
export default {
  setup(props: any, context: any) {
    const state = reactive({
      msg: "hha kyle!",
    });
    return {
      changeMsg() {
        console.log("修改了msg");
      },
    };
  },
};

  3. 使用 toRefs 将 reactive 定义的返回出去

    // 返回出去才会绑定proxy
import { reactive } from "vue";
export default {
  setup(props: any, context: any) {
    const state = reactive({
      msg: "hha kyle!",
    });
    return {
      changeMsg() {
        console.log("修改了msg");
      },
      ...toRefs(state),
    };
  },
};

  4. 新增了 script setup

    <script setup>
  // 这里写的相当于在setup函数里写;
</script>

  5. setup 函数接受 props, context 形参

props 接受的参数

context

attrs: Proxy
emit: (event, ...args) => instance.emit(event, ...args)
expose: exposed => {…}
slots: Proxy

  1. vue3 很好的支持了 JSX 和 TypeScript

  2. Pinia 用于 Vue 的状态管理库。

  • 优点

    易于学习
    极轻， 仅有 1 KB
    模块化设计，便于拆分状态

这篇关于聊聊vue2和vue3的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航