vue3学习--Vue3与2的区别

3. Vue3基础知识
3.1 什么是Vue3
Vue2 的API设计是Option（配置）风格的。
Vue3 的API设计是Composition（组合）风格的。
Option API的弊端

Options类型的 API ，数据、方法、计算属性等、是分散在：data，methods，computed 中的，若想新增或者修改一个需求，就需要分别修改：data，methods，computed，不便于维护和复用。

Composition API的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

3.2 Vue3的起点setup
setup 概述

setup 是 Vue3 中一个新的配置项，值是一个函数，它是 composition API "表演的舞台"，组件中所用到的：数据，方法，计算属性，监视....等等，均配置在 setup 中。

特点如下：

setup 函数返回的对象中的内容，可直接在模版中使用。
setup 中访问 this 是 undefined
setup 函数会在 beforeCreate 之前调用，它是"领先"所有钩子执行的。
<template>
    <!-- html -->
     <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
     </div>
</template>
 
<script lang="ts">
    // JS 或 TS
    export default {
        name: 'Person', // 组件名称
        setup(){
            // 数据
            let name = '张三' // 注意这样写name不是响应式数据
            let age = 12 // 注意这样写age不是响应式数据
            let tel = '138888888'
 
            // 方法
            function changeName(){
                name = '李四'
            }
            function changeAge(){
                age += 1
            }
            function showTel(){
                alert(tel)
            }
            // 将数据，方法交出去，模版中才可以使用
            return {name,age,tel,changeName,changeAge,showTel}
        }
    }
</script>
 
<style>
    /* css样式 */
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }

————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/iku_n/article/details/140136183