VUE3与VUE2的区别，以及迁移方案

新特性

API

- 组合式 API setup

import { ref, toRefs, readonly, watch, computed } from "vue";

export default {
  name: "demo",
  // 添加组合式API，在组件创建前执行所以，没有this
  setup(props) {
    // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用
    const { user } = toRefs(props);

    // 将属性变为响应式的  ref(attr)
    const list = ref([]); // { value: [] }
    const GetData = async () => {
      list.value = await FetchList(props.user);
    };

    // 生命周期函数
    // on `mounted` call `GetData`
    onMounted(GetData);

    // 监听 user 的变化，重新请求 GetData
    watch(user, GetData);

    // 计算属性
    const keyword = ref("");
    const resList = computed(() => {
      return list.value.filter((item) => item.name.includes(keyword.value));
    });

    // 返回对象可以组件内this.调用
    return {
      list,
      GetData,
      keyword,
      resList,
    };
  },
};

如上所示，相同模块的功能被整合到了一起，下面把这部分功能提取到单独的文件 combined.js

// -- combined.js --
import { ref, toRefs, watch, computed } from "vue";

export default function Combined(user) {
  const list = ref([]); // { value: [] }
  const GetData = async () => {
    list.value = await FetchList(props.user);
  };

  const keyword = ref("");
  const resList = computed(() => {
    return list.value.filter((item) => item.name.includes(keyword.value));
  });

  onMounted(GetData);
  watch(user, GetData);

  return { GetData, keyword, resList };
}

// -- demo.vue --
import Combined from "./combined.js";
import { toRefs } from "vue";

export default {
  props: {
    user: { type: String },
  },
  setup(props) {
    const { user } = toRefs(props);
    const { GetData, keyword, resList } = Combined(user);
    return { GetData, keyword, resList };
  },
  methods: {
    Reset() {
      this.keyword = ""; // 自动触发搜索
    },
  },
};

- Teleport

teleport 下内容将会挂载到 body 下

- 组件内根元素可以有多个，即片段

- 组件事件定义和类型验证。emits 里定义的原生事件（比如 click）将替代原生事件的监听器

export default {
  props: {
    list: {
      type: Array,
    },
  },
  emits: {
    // 没有验证
    click: null,

    // 验证submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true;
      } else {
        console.warn("Invalid submit event payload!");
        return false;
      }
    },
  },
  methods: {
    submitForm() {
      this.$emit("submit", { email, password });
    },
  },
};

- 多个 v-model 绑定

app.component("user-name", {
  props: {
    firstName: String,
    lastName: String,
  },
  template: `
    

    
  `,
});

使用v-model:xxx传值，使用$emit('update:xxx'）同步变更

- 自定义 v-model 修饰符

app.component("my-component", {
  props: {
    firstName: String,
    firstNameModifiers: {
      // 所有修饰符都在它里：{ lowcase: true }
      default: () => ({}),
    },
  },
  template: `
    
  `,
  created() {
    console.log(this.firstNameModifiers.lowcase); // true，可以根据此值做一些逻辑处理
  },
});

• 原来的value -> modelValue；input -> update:modelValue；

• 组件内使用xxxModifiers或modelModifiers记录 v-model 的修饰符。

• Modifiers 为一个对象，比如 { lowcase: true }

• 2.x 中的.sync被弃用

css