Vue2 和 Vue3写法的不同

Vue 2 和 Vue 3 在写法上有一些不同，主要体现在以下几个方面：

1. 创建 Vue 应用的方式：

Vue 2：

new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue 2!'
    }
})

Vue 3：

import { createApp } from 'vue'

const app = createApp({
    data() {
        return {
            message: 'Hello, Vue 3!'
        }
    }
})

app.mount('#app')

Vue 3 引入了 createApp 函数来创建 Vue 应用，代替了 Vue 2 中的全局 Vue 对象。

2. 生命周期钩子的变化：

Vue 2：

new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue 2!'
    },
    mounted() {
        console.log('Component mounted')
    }
})

Vue 3：

import { createApp, onMounted } from 'vue'

const app = createApp({
    data() {
        return {
            message: 'Hello, Vue 3!'
        }
    }
})

app.mount('#app')

onMounted(() => {
    console.log('Component mounted')
})

Vue 3 中的生命周期钩子不再直接写在选项中，而是通过导入 onMounted 等生命周期钩子函数来使用。

3. 模板中的 v-model 的变化：

Vue 2：

<input v-model="message">

Vue 3：

import { defineComponent } from 'vue'

export default defineComponent({
    // 组件选项
})

在 Vue 3 中，推荐使用 defineComponent 函数来定义组件，而不是直接在全局 Vue 对象上注册组件。

5. 计算属性和监视属性的写法：

Vue 2：

new Vue({
    data: {
        message: 'Hello, Vue 2!'
    },
    computed: {
        reversedMessage() {
            return this.message.split('').reverse().join('')
        }
    },
    watch: {
        message(newValue, oldValue) {
            console.log('Message changed from', oldValue, 'to', newValue)
        }
    }
})

Vue 3

import { computed, watch, reactive } from 'vue'

const state = reactive({
    message: 'Hello, Vue 3!'
})

const reversedMessage = computed(() => state.message.split('').reverse().join(''))

watch(() => state.message, (newValue, oldValue) => {
    console.log('Message changed from', oldValue, 'to', newValue)
})

在 Vue 3 中，推荐使用 computed 函数和 watch 函数来创建计算属性和监视属性。

以上是 Vue 2 和 Vue 3 在写法上的一些不同之处，Vue 3 引入了 Composition API 和一些新的特性，使得代码更加灵活和易于维护。