VUE3对比VUE2使用，代码解释最直观

VUE3都beta了，关注的同学都知道了吧，开不开心都要继续学，毕竟是自己饭碗的问题

废话不多说，现在就来对比我们常用的使用对比

组合式API的使用

创建模板

对于大多数组件，Vue2和Vue3中的代码即使不完全相同，也是非常相似的。但是，Vue3支持片段，这意味着组件可以有多个根节点。

这在呈现列表中组件以删除不必要的包装器div元素时特别有用。但是，在本例中，表单组件的两个版本都将只保留一个根节点

VUE2的使用

<template>
    <div>
        <h2> {{ title }} </h2>
        <input type='text'v-model='username' placeholder='Username' />
        <input type='password'v-model='password' placeholder='Password' />
        <button @click='login'>
            Submit
        </button>
        <p>
            Values: {{ username + ' ' +password }}
        </p>
    </div>
</template>

VUE3的使用

唯一真正的区别是如何访问数据。在Vue3中，响应式数据都封装在一个响应状态变量中，所以需要访问这个状态变量（state）来获得值

<template>
    <div>
        <h2> {{ state.title }}</h2>
        <input type='text'v-model='state.username' placeholder='Username' />
        <input type='password'v-model='state.password' placeholder='Password' />
        <button @click='login'>
            Submit
        </button>
        <p>
            Values: {{ state.username + ' ' +state.password }}
        </p>
    </div>
</template>

设置数据

这就是主要的区别——Vue2选项API对战Vue3组合API。
选项 API将代码分成不同的属性：数据、计算属性、方法等等。同时，组合API允许根据函数而不是属性类型对代码进行分组。
对于表单组件，只有两个数据属性：一个username和一个password。
Vue2代码看起来是这样的——只需在数据属性中放入两个值

VUE2

export default {
    props: {
        title: String
    },
    data () {
        return {
            username: '',
            password: ''
        }
    }
}

VUE3

在Vue3.0中，必须投入更多精力来使用一个新的setup()方法，所有的组件初始化都应该在这个方法中进行。
另外，为了让开发人员更好地控制响应，可以直接访问Vue的响应API。

创建响应式数据需要三个步骤：

1. 从vue中导入reactive

2. 使用响应式方法声明数据

3. 使用setup方法返回响应式数据以便模板可以访问

代码看起来有点像这样，接着在模板中，使用如state.username和state.password来访问

import { reactive } from 'vue'
export default {
    props: {
        title: String
    },
    setup () {
        const state = reactive({
            username: '',
            password: ''
        })
        return { state }
    }
}

创建方法

VUE2

Vue2选项API有一个单独的方法部分。这部分可以定义所有的方法，并以任何想要的方式进行组织

exportdefault {
    props: {
        title: String
    },
    data () {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        login () {
            // login method
        }
    }
}

VUE3

Vue3组合API中的setup方法也可以处理。它的工作原理与声明数据有些类似——必须先声明方法，然后返回，以便组件的其他部分可以访问它

exportdefault {
    props: {
        title: String
    },
    setup () {
        const state = reactive({
            username: '',
            password: ''
        })
        const login = () => {
            // login method
        }
        return {
            login,
            state
        }
    }
}

生命周期使用

VUE2

Vue2直接从组件选项中访问生命周期挂钩。以下示例代码将等待挂载的事件

exportdefault {
    props: {
        title: String
    },
    data () {
        return {
            username: '',
            password: ''
        }
    },
    mounted () {
        console.log('component mounted')
    },
    methods: {
        login () {
            // login method
        }
    }
}

VUE3

现在有了Vue3 组合API，几乎所有东西都在setup()方法中，包括挂载的生命周期挂钩。
然而，生命周期挂钩在默认情况下并不包括在内，因此必须导入在Vue3中被称为onmount的方法。这看起来与前面导入reactive是一样的。
然后，在setup方法中，通过传递函数来使用onmount方法

import { reactive, onMounted } from 'vue'
export default {
    props: {
        title: String
    },
    setup () {
        // ..
        onMounted(() => {
            console.log('component mounted')
        })
        // ...
    }
}

computed属性

VUE2

添加一个computed属性，将用户名转换为小写字母。
为了在Vue2中实现这一点，向选项对象添加一个computed字段。从这里，可以像这样定义属性

exportdefault {
    // ..
    computed: {
        lowerCaseUsername () {
            return this.username.toLowerCase()
        }
    }
}

VUE3

Vue3的设计允许开发人员导入他们使用的东西，并且项目中没有不必要的包。本质上，他们不希望开发人员包含从未使用过的东西，这而这在Vue2中已经成为一个日益严重的问题。
因此，要在Vue3中使用computed属性，首先必须将computed导入到组件中。
然后，与之前创建响应式数据的方式类似，将一段响应式数据变成一个计算值

import { reactive, onMounted, computed } from 'vue'
export default {
    props: {
        title: String
    },
    setup () {
        const state = reactive({
            username: '',
            password: '',
            lowerCaseUsername: computed(()=> state.username.toLowerCase())
        })
    // ...
    }
}

访问Props

VUE2

访问道具带来了Vue2和Vue3之间的一个重要区别——this意味着完全不同的东西。
在Vue2中，this几乎总是指向组件，而不是特定的属性。虽然这使事情表面上很容易，但它使类型支持成为一种痛苦。
然而，可以很容易地访问props——只需添加一个小例子，比如在挂载挂钩期间打印出title prop:

mounted() {
    console.log('title: ' + this.title)
}

VUE3

但是在Vue3中不再使用它来访问props、触发事件和获取属性。相反，setup()方法有两个参数：

1. props - 对组件props的不可变访问
2. context - Vue3公开的上下文选择属性(emit、slot、attrs)

setup(props) {
    // ...
    onMounted(() => {
        console.log('title: ' +props.title)
    })
    // ...
}

触发事件

VUE2

在Vue2中触发事件非常简单，但是Vue3对如何访问属性/方法提供了更多控制。
本例希望在按下“Submit”按钮时触发父组件的一个登录事件。
Vue2代码只需要调用this.$emit并传入有效负载对象

login (){
    this.$emit('login', {
        username: this.username,
        password: this.password
    })
}

VUE3

然而在Vue3中，this现在含义不同了，得做出一点改变。
幸运的是，文本对象公开了emit，提供了与this.$emit相同的东西
所要做的就是添加context作为setup方法的第二个参数。将对c文本对象进行析构，使代码更简洁。
然后，只需调用emit来触发事件。与前面一样，emit方法有两个参数：

1. 事件名称
2. 与事件一起传递的有效负载对象

setup(props, { emit }) {
    // ...
    const login = () => {
        emit('login', {
            username: state.username,
            password: state.password
        })
    }
    // ...
}

访问属性

VUE2

<template>
    <div>
        <h2> {{ title }} </h2>
        <input type='text'v-model='username' placeholder='Username' />
        <input type='password'v-model='password' placeholder='Password' />
        <button @click='login'>
            Submit
        </button>
        <p>
            Values: {{ username + ' ' +password }}
        </p>
    </div>
</template>
<script>
    export default {
        props: {
            title: String
        },
        data () {
            return {
                username: '',
                password: ''
            }
        },
        mounted () {
            console.log('title: ' + this.title)
        },
        computed: {
            lowerCaseUsername () {
                return this.username.toLowerCase()
            }
        },
        methods: {
            login () {
                this.$emit('login', {
                    username: this.username,
                    password: this.password
                })
            }
        }
    }
    </script>

VUE3

<template>
    <div>
        <h2> {{ state.title }}</h2>
        <input type='text'v-model='state.username' placeholder='Username' />
        <input type='password'v-model='state.password' placeholder='Password' />
        <button @click='login'>
            Submit
        </button>
        <p>
            Values: {{ state.username + ' ' +state.password }}
        </p>
    </div>
</template>
<script>
    import { reactive, onMounted, computed } from 'vue'
    export default {
        props: {
        title: String
        },
        setup (props, { emit }) {
            const state = reactive({
                username: '',
                password: '',
                lowerCaseUsername: computed(()=> state.username.toLowerCase())
            })
            onMounted(() => {
                console.log('title: ' +props.title)
            })
            const login = () => {
                emit('login', {
                    username: state.username,
                    password: state.password
                
                })
            }
            return {
                login,
                state
            }
        }
        
    }
</script>

---

感兴趣的拿去玩玩，还挺有意思的，VUE2在中小型项目的优势还是比较明显，VUE3的目标是大型和超大型项目使用，越来越高级的赶脚，反正阿里全程支持，可以说是国产化的，用得也放心。