Vue3与Vue2比较-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3与Vue2比较。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue.js 3相对于Vue.js 2带来了一些重大变化，其中包括一些语法变化。

下面是Vue.js 2和Vue.js 3的一些语法差异比较：

一、语法差异比较

1.组件的注册方式不同

在Vue.js 2中，我们使用Vue.component()或者Vue.extend()方式创建一个组件。但是在Vue.js 3中，我们需要使用 createApp().component()方式来注册一个组件。

当我们使用Vue.js 2时，我们通常使用Vue.component()或Vue.extend()方法注册组件。例如：

// 全局注册组件
Vue.component('my-component', {
  // options
})

// 局部注册组件
var Component = Vue.extend({
  // options
})

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': Component
  }
})

而在Vue.js 3中，注册组件的方式有所改变。我们可以使用Vue.createApp()方法创建一个Vue实例，并使用它的.component()方法注册组件。例如：

const app = Vue.createApp({})
app.component('my-component', {
  // options
})

需要注意的是，Vue.js 3中的组件注册方式与Vue.js 2有一定的兼容性。可以使用Vue.component()方法进行全局组件注册，但需要通过createApp()方法创建的Vue实例来进行局部组件注册。

2.模板指令的变化

Vue.js 3中的模板指令和Vue.js 2相比基本没有变化。但需要注意的是，在Vue.js 3中，动态绑定属性变量名需要使用v-bind:[属性名]语法，而不是v-bind:属性名。
Vue.js 3 在模板指令方面引入了很多新特性，例如v-model指令的modelValue和update:modelValue属性、v-for指令的keyBy属性等。同时，Vue.js 3也对某些指令进行了优化，例如 v-bind指令现在会自动对单词转换为驼峰式命名等。

以下是一个Vue.js 2和Vue.js 3的模板指令示例：
Vue.js 2：

<div id="app">
  <p v-if="show">Hello, {{ name }}</p>
  <input v-model="name">
</div>

Vue.js 3：

<template>
  <div>
    <p v-if="show">Hello, {{ name }}</p>
    <input v-model:value="name" @input="updateName">
  </div>
</template>

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

export default {
  setup() {
    const name = ref('');
    const show = ref(true);
    
    const updateName = (event) => {
      name.value = event.target.value;
    }
    
    return {
      name,
      show,
      updateName
    }
  }
}
</script>

在Vue.js 3中，v-model 指令需要使用:value和@input事件来实现双向数据绑定。另外，vue.js3中使用 ref 来创建响应式数据。除此之外，Vue.js 3还引入了 setup() 函数，取代了 Vue.js 2 中的 data() 和 methods()。

3.ref指令的变化

在Vue.js 2中，我们可以使用ref指令在模板中引用一个DOM元素或组件实例。而在Vue.js 3中，ref指令已经移除，需要使用ref属性来引用一个DOM元素或组件实例。

在Vue2中，我们使用ref指令可以给页面上的元素或组件起一个别名，可以通过this.$refs来获得对这些元素或组件的引用。例如，在Vue2中，我们可以这样定义一个ref：

<template>
  <div>
    <h1 ref="title">Hello World</h1>
  </div>
</template>

我们可以在组件中使用this.$refs.title来引用这个h1元素。
在Vue3中，使用ref指令有了一些变化。ref现在支持名字作为一个函数参数，这样我们可以在调用组件每次实例化时，提供一个不同的名字。另外，我们现在可以使用ref指令引用模板中的任何元素，包括普通的HTML元素、子组件以及子元素上绑定的自定义组件。

以下是Vue3中ref指令的示例：

<template>
  <div>
    <h1 ref="title">Hello World</h1>
    <MyComponent ref="my_component"></MyComponent>
    <div ref="custom_element"></div>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  created() {
    console.log(this.$refs.title); // h1元素
    console.log(this.$refs.my_component); // MyComponent实例
    console.log(this.$refs.custom_element); // div元素
  }
}
</script>

需要注意的是，Vue3中的ref指令不再返回DOM元素，而是返回元素对应的组件实例或元素引用对象。所以，我们在使用this.$refs时需要特别注意。

4.组件API的变化

Vue.js 3中的组件API进行了调整，例如，Props属性不再使用type和default属性，而是使用传统的JavaScript类型检查。在Vue.js 3中，我们可以使用defineProps()和defineEmits()等方法来定义和使用props和emits。

Vue2和Vue3之间，组件API也经历了很多变化。以下是一些Vue2和Vue3之间组件API的变化差异示例：

4.1.props

在Vue2中，我们通过props来声明组件的输入属性。在Vue3中，这个声明被移到了组件选项之外，使用setup函数的参数props来接收props输入属性。在Vue3中，我们需要使用reactive()或ref()函数来对props进行响应式处理。
Vue2中props的声明示例：

// Vue2

Vue.component('my-component', {
  props: {
    propA: String,
    propB: [Number, String],
    propC: {
      type: String,
      required: true
    },
    propD: {
      type: Number,
      default: 100
    }
  },
  // ...
})

Vue3中props的使用示例：

// Vue3

<template>
  <div>{{ props.propA }}</div>
</template>

<script>
  import { reactive } from 'vue'

  export default {
    name: 'MyComponent',
    setup(props) {
      // props 响应式
      const state = reactive({
        propA: props.propA,
        propB: props.propB
      })

      // ...
      return { state }
    }
  }
</script>

4.2.生命周期钩子函数

在Vue3中，一些生命周期钩子被重命名或者被废除。例如，beforeCreate和created钩子函数在Vue3中被合并成了一个beforeMount生命周期钩子函数，这个钩子函数在组件开始挂载前调用。
Vue2中生命周期钩子函数的示例：

Vue.component('my-component', {
  beforeCreate() {
    // ...
  },
  created() {
    // ...
  },
  beforeMount() {
    // ...
  },
  // ...
})

Vue3中生命周期钩子函数的示例：

<script>
  export default {
    beforeMount() {
      // ...
    },
    // ...
  }
  </script>

4.3.组件间通信

在Vue2中，我们使用emit和on来进行组件间通信。在Vue3中，将emit和on进行了更改，变为了emits和emit()。我们现在可以通过在模板中使用 v-on=“emits” 来向父组件发射事件。
Vue2中组件间通信的示例：

Vue.component('my-component', {
  methods: {
    handleClick() {
      this.$emit('show-message', 'Hello World')
    }
  },
  // ...
})

Vue.component('parent-component', {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  },
  mounted() {
    this.$on('show-message', this.handleMessage)
  },
  // ...
})

Vue3中组件间通信的示例：

<template>
  <button @click="handleClick">Show Message</button>
</template>

<script>
  import { defineEmits } from 'vue'

  export default {
    emits: ['show-message'], // 声明组件事件

    methods: {
      handleClick() {
        this.$emit('show-message', 'Hello World')
      }
    },
    // ...
  }
</script>

以上是Vue2和Vue3之间组件API的一些变化差异示例，仅供参考。实际使用时，请查看官方文档以获取更详细的信息。

5.事件的变化

在Vue.js 3中，事件的写法方式发生了变化，事件名需要使用小驼峰写法，如@myEvent，而不是@my-event。
在Vue2中，我们使用v-on指令来绑定事件监听器。例如，我们可以这样绑定一个点击事件监听器：

<template>
  <div>
    <button v-on:click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked');
    }
  }
};
</script>

在Vue3中，v-on指令已被重命名为@符号。除此之外，Vue3还引入了全新的事件API。Vue3的事件API允许我们在逻辑组件（setup函数）内的引用中定义事件处理程序，而不需要使用Vue2中的methods属性。例如：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

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

export default {
  setup() {
    const handleClick = () => {
      console.log('Clicked');
    };

    onMounted(() => {
      console.log('Mounted');
    });

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