Vue3和Vue2的差异总结对比（含代码案例）

缺点灵气儿

已于 2023-07-30 21:32:25 修改

阅读量2.4k

点赞数 3

分类专栏： Vue3 文章标签： vue.js 前端 javascript

于 2023-07-30 21:13:16 首次发布

本文链接：https://blog.csdn.net/m0_74921567/article/details/132011383

版权

Vue3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Composition API（组合式 API）

Composition API（组合式 API）

Vue3引入了Composition API，它是Vue3中最引人注目的变化之一，是一种新的组件编写方式，它允许开发者使用函数式API来组织和重用组件逻辑，而不仅仅是依赖于选项对象 API。这使得组件更易于理解和维护。
在Vue2中，我们使用Options API来定义组件，而在Vue3中，我们可以使用setup函数，并结合各种函数和响应式引用进行逻辑编写。

在Vue3中，使用Composition API可以更好地组织和重用组件逻辑。通过setup()函数，在其中编写逻辑代码。下面是一个示例：

Vue3:

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 自定义函数
    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};
</script>

Vue2:

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

setup() 函数

在Vue3中，组件的选项中添加了一个名为setup()的新函数。setup()函数用于替代Vue2中的created()、mounted()等钩子函数。setup()函数在组件实例被创建之前执行，并且作为一个独立的生命周期阶段。

setup()函数，可以替代Vue2中的生命周期钩子函数。下面是一个示例：

Vue3:

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 在组件挂载后执行
    onMounted(() => {
      console.log('Component mounted');
    });

    // 自定义函数
    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};
</script>

Vue2:

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  mounted() {
    console.log('Component mounted');
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

ref 和 reactive

在Vue3中，ref和reactive是用于创建响应式数据的新函数。ref用于创建一个基本类型的响应式数据，而reactive则用于创建一个响应式对象。在Vue2中，可以直接在data选项中定义响应式数据。

ref和reactive函数用于创建响应式数据，示例：

Vue3:

<template>
  <div>{{ count.value }}</div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const person = reactive({
      name: 'Alice',
      age: 25
    });

    // 修改数据
    function increment() {
      count.value++;
      person.age++;
    }

    return {
      count,
      person,
      increment
    };
  }
};
</script>

Vue2:

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      person: {
        name: 'Alice',
        age: 25
      }
    };
  },
  methods: {
    increment() {
      this.count++;
      this.person.age++;
    }
  }
};
</script>

Teleport 组件

Vue3引入了Teleport组件，它可以在DOM树中的任何位置渲染组件内容。这对于创建弹出窗口、对话框等动态组件非常有用。

下面是一个示例：

Vue3:

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <teleport to="body">
      <modal v-if="showModal" @close="showModal = false">
        <!-- modal content -->
      </modal>
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  components: {
    Modal: {...}
  },
  setup() {
    const showModal = ref(false);

    return {
      showModal
    };
  }
};
</script>

Vue2:

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <modal v-if="showModal" @close="showModal = false">
      <!-- modal content -->
    </modal>
  </div>
</template>

<script>
export default {
  components: {
    Modal: {...}
  },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

Fragment 组件

Vue3中可以使用<template>标签外的根级别元素来包裹多个组件，而不需要显式地添加一个无意义的父级元素。

Vue3:

<template>
  <div>
    <h1>Header</h1>
    <p>Some content...</p>
    <button>Button</button>
  </div>
</template>

Vue2:

<template>
  <div>
    <div>
      <h1>Header</h1>
      <p>Some content...</p>
    </div>
    <button>Button</button>
  </div>
</template>

全局 API 改变

在Vue3中，全局API的使用方式有所改变。一些全局API的调用方式发生了变化

import { createApp } from 'vue';

const app = createApp({...});

app.directive('my-directive', {...});
app.config.globalProperties.$filters = {...};

app.mount('#app');

import Vue from 'vue';

Vue.directive('my-directive', {...});
Vue.filter('my-filter', {...});

new Vue({
  el: '#app',
  ...
});

V-model 的改进

在Vue3中，可以通过v-model指令绑定自定义组件的值，对于双向绑定提供了更大的灵活性。

<template>
  <custom-input v-model="message" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('');

    return {
      message
    };
  }
};
</script>

<template>
  <custom-input :value="message" @input="message = $event" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>