聊聊vue2和vue3

2022-02-16 01:00:41 阅读：198 来源： 互联网

标签：context vue2 setup props reactive 聊聊 vue3 msg any

组件的声明周期函数发生了变化

例如:

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;

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

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

使用 reactive 管理状态

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

使用 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),
    };
  },
};

新增了 script setup

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

setup 函数接受 props, context 形参


props 接受的参数

context

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

vue3 很好的支持了 JSX 和 TypeScript
Pinia 用于 Vue 的状态管理库。

优点

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

标签：context,vue2,setup,props,reactive,聊聊,vue3,msg,any
来源： https://www.cnblogs.com/pythonkyle/p/15898757.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

聊聊vue2和vue3