vue3.x学习笔记之声明vue2和vue3

• x vs 2.x 创建实例

• 对比说明

• 声明组件

• Vue 2.x 中声明组件
• Vue 3.x 中声明组件

• vue2 和 vue3 有哪些区别与联系

• 区别：

• 响应式系统：
• Composition API：
• 多根节点支持：
• 生命周期钩子调整：
• 性能优化：
• Teleport：

• 联系：

• 设计理念一致：
• 向后兼容：
• 生态共享：

3.x vs 2.x 创建实例

‘2.x’ 和 ‘3.x’ 整体创建形式有了很大的更改

• 在’3.x’ 不在使用通过 new Vue 形式创建Vue 实例,而是改用 createApp 并且 3.x 不在是通过 el 和 $mount将数据渲染和dom绑定，而是通过新的 mount 形式
• 3.x data 组件选项声明不再接收纯 JavaScript object，而需要 function 声明

对比说明

vue2

在Vue2中，我们通常使用 Vue构造函数来声明一个Vue应用，如下所示：

var vm = new Vue({
    // el:'#app', 或者使用el形式不使用$mount
    data: {
        counter: '10',
    },
}).$mount('#app')

vue3

在Vue3中，我们可以使用 createApp方法来创建一个应用，如下所示：

// 创建vue
import { createApp } from 'vue'
var app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})
app.mount('#app')

此外，Vue3引入了一些新的API和特性。

例如，它引入了Ref和Reactive API用于声明响应式变量。

同时，Vue3通过setup函数统一声明逻辑，而Vue2的逻辑则分散在多个选项中。

另外，Vue3直接支持返回Promise的异步组件。

生命周期方面，虽然整体变化不大，但 大部分生命周期钩子名称上需要添加“on”前缀。

此外，Vue3还优化了diff算法，新增了静态标记（patchflag），以减少非动态数据的比对时的性能消耗。

需要注意的是，尽管Vue3在语法和功能上有所更新，但其底层开发思想与Vue2是一致的。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

声明组件

在Vue.js中声明组件的方式随着版本的升级有所变化，下面分别说明如何在Vue 2和Vue 3中声明一个基本组件：

Vue 2.x 中声明组件

// Vue 2.x 声明全局组件
Vue.component('my-component', {
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>{{ message }}</p>
    </div>
  `,
  data() {
    return {
      title: 'Vue 2 Component',
      message: 'Hello, Vue 2!'
    }
  },
  methods: {
    greet() {
      console.log('Greetings from Vue 2!');
    }
  },
  mounted() {
    this.greet();
  }
});

// 或者在单文件组件（.vue）中声明
// my-component.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue 2 Component',
      message: 'Hello, Vue 2!'
    };
  },
  methods: {
    greet() {
      console.log('Greetings from Vue 2!');
    },
    mounted() {
      this.greet();
    }
  }
};
</script>

Vue 3.x 中声明组件

// Vue 3.x 使用setup函数配合Composition API声明全局组件
import { ref, onMounted } from 'vue';

const MyComponent = {
  setup() {
    const title = ref('Vue 3 Component');
    const message = ref('Hello, Vue 3!');

    function greet() {
      console.log('Greetings from Vue 3!');
    }

    onMounted(() => {
      greet();
    });

    return {
      title,
      message
    };
  },
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>{{ message }}</p>
    </div>
  `
};

// 或者使用<script setup>语法糖在单文件组件（.vue）中声明
// my-component.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

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

const title = ref('Vue 3 Component');
const message = ref('Hello, Vue 3!');

function greet() {
  console.log('Greetings from Vue 3!');
}

onMounted(greet);
</script>

注意在Vue 3中， 引入了Composition API，它允许开发者以更灵活、可复用的方式组织逻辑。

• ref 和 reactive 是用于创建响应式数据的API，
• 生命周期钩子如 onMounted 等现在作为单独的函数导入并直接调用。

另外，Vue 3中没有了 this 关键字，取而代之的是通过 setup 函数返回的对象属性来暴露给模板使用的变量和方法。

vue2 和 vue3 有哪些区别与联系

Vue.js 从 Vue 2 过渡到 Vue 3，带来了一系列的改进和新特性，同时保持了对原有核心理念的延续。

以下是 Vue 2 和 Vue 3 的主要区别与联系：

区别：

响应式系统：

• Vue 2 使用 Object.defineProperty 钩子来实现数据响应式，仅能监测对象属性的变化。
• Vue 3 则改用 ES6 的 Proxy 对象替代，它能够更全面、高效地监听对象的所有属性，包括数组索引和新增属性。

Composition API：

• Vue 2 使用的是 Options API（即组件内的 data、methods、computed、watch 等选项）组织代码。
• Vue 3 引入了 Composition API，允许开发者以函数的形式组织逻辑，提供了更好的代码复用性和可读性，如 setup() 函数、ref、reactive、computed 等。