Vue3与vue2区别

vue2 html绑定值不能用 ?.

SyntaxError: Unexpected token (5:191)

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);
    },
    showDialog: {
      get() {
        return this.modalKeys.includes("MapListDialog");
      },
      set(e) {
        if (!e) this.delModalName("MapListDialog");
      },
    },
  },

vue3

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


  const showDialog = computed({
    get: () => modalKeys.value.includes("MapListDialog"),
    set: (e) => {
      if (!e) delModalName("MapListDialog");
    },
  });

使用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

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

//less引入
background: url("~@/assets/images/integratedDisasterControl/base/dispatch/mapIcon/all_check.png")
    no-repeat;

vue3

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

//less引入
background: url("@/assets/images/integratedDisasterControl/base/dispatch/mapIcon/all_check.png") no-repeat;

方法区别

vue2

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

vue3

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

方法调用区别

vue2

this.handleShow();

vue3

handleShow()

状态管理 mutations

vuex

//方法一使用
  this.$store.commit("setData", {
    type: "boxSelectionActive",
    value: e,
  });
  
//方法二 
  import { mapMutations } from "vuex";

  methods: {
    ...mapMutations([
      "setData",
    ]),
    handleCustomArea(e) {
      this.setData({
        type: "boxSelectionActive",
        value: e,
      });
    },
  },
 

pinia

//引入
  import { useGisStore } from "@/store/modules/gis";
  const {  setData } = useGisStore();

//使用
   setData("boxSelectionActive", e);

状态管理 state

vuex

//方法一使用
  computed: {
    boxSelectionActive() {
      return this.$store.state.gis.boxSelectionActive;
    },
  },
  
//方法二
  import { mapState} from "vuex";
  computed: {
    ...mapState({
      surroundingsActive: (state) => state.gis.surroundingsActive,
      boxSelectionActive: (state) => state.gis.boxSelectionActive,
    }),
  },

pinia

//引入
  import { useGisStore } from "@/store/modules/gis";
  import { storeToRefs } from "pinia";
  const { boxSelectionActive } = storeToRefs(useGisStore());

//使用
  v-if="!boxSelectionActive"

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>