Vue3与vue2区别

props 区别

vue2

props: {
    //下拉列表
    list: {
      type: Array,
      default: () => [],
    },
  },

vue3

  const props = defineProps({
    //下拉列表
    list: {
      type: Array,
      default: () => [],
    },
  });

data 区别

vue2

  data() {
    return {
      show: false, //展示下拉列表
    };
  },

vue3

const state = reactive({
  show: false, //展示下拉列表
});

子组件调用父组件事件 区别

vue2

  watch: {
    show: {
      handler(n) {
        this.$emit("on-visible", n);
      },
    },
  },

vue3

const emits = defineEmits(["on-change", "on-visible"]);
emits("on-visible", n);

子组件更新父组件数据 区别

vue2

//父组件
  <BaseDropSelect
    :list.sync="dropList"
  />
//子组件
  const newList = [...this.list];
  newList[index].isCheck = !e.isCheck;
  this.$emit("update:list", newList);

vue3

//父组件
  <BaseDropSelect
    v-model:list="dropList"
  />
//子组件
const emits = defineEmits(["update:list"]);
emits("update:list", newList);

computed 区别

vue2

  computed: {
    checkdList() {
      return this.list.filter((i) => i.isCheck);
    },
  },

vue3

const checkdList = computed(() => {
  return props.list.filter((i) => i.isCheck);
});

使用computed中的值 区别

vue2

 !this.checkdList.length

vue3

!checkdList.value.length

watch 区别

vue2

  watch: {
    show: {
      handler(n) {
        this.$emit("on-visible", n);
      },
      deep: true, // 深度监听
      immediate: true, // 初次监听即执行
    },
  },

vue3

  watch(
    () => state.show,
    (n) => {
      emits("on-visible", n);
    },
    { immediate: true, deep: true },
  );

引入图片区别

vue2

require("@/assets/images/integratedDisasterControl/base/dispatch/mapIcon/all_check.png");

vue3

/**
 * 获取静态文件
 * @param {*} url 文件具体路径
 * @param {*} type 文件路径assets下对应的文件夹名称
 * @returns
 */
export const getAssetsFile = (url, type) => {
  return new URL(`../assets/${type}/${url}`, import.meta.url).href;
};
getAssetsFile("dispatch/mapIcon/all_check.png", "images")

方法区别

vue2

  methods: {
    handleShow() {
      this.show = !this.show;
    },
  },

vue3

const handleShow = () => {
  state.show = !state.show;
};

方法调用区别

vue2

this.handleShow();

vue3

handleShow()

状态管理

vue2

this.handleShow();

vue3

handleShow()

vue2 页面结构

<template>
  <!-- 模板内容 -->
</template>

<script>
// 导入相关依赖
import SomeComponent from '@/components/SomeComponent';

export default {
  name: 'MyComponent',
  
  components: {
    SomeComponent,
  },
  
  props: {
  },
  
  data() {
    return {
    };
  },
  
  computed: {
  },
  
  watch: {
    propA(newValue, oldValue) {
      // 监听 propA 的变化
    },
  },
  
  methods: {
    handleClick() {
      // 处理点击事件
    },
  },
  
  filters: {
    formatText(value) {
      // 格式化文本
    },
  },
  
  directives: {
    customDirective(el, binding) {
      // 自定义指令逻辑
    },
  },
  
  beforeCreate() {
    // 生命周期钩子函数
  },
  
  created() {
    // 生命周期钩子函数
  },
  
  beforeMount() {
    // 生命周期钩子函数
  },
  
  mounted() {
    // 生命周期钩子函数
  },
  
  beforeUpdate() {
    // 生命周期钩子函数
  },
  
  updated() {
    // 生命周期钩子函数
  },
  
  beforeDestroy() {
    // 生命周期钩子函数
  },
  
  destroyed() {
    // 生命周期钩子函数
  },
};
</script>