Vue3：组合式 和 选项式

• Vue2的API设计是Options（配置）风格的。
• Vue3的API设计是Composition（组合）风格的。

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。Composition 可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

Vue2的：

<template>
    <div class="person">
        <h1>Person</h1>
        <p>Name: {{ name }}</p>
        <p>Age: {{ age }}</p>
        <button @click="changName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>
<script lang="ts">
  export default {
    name: 'Person',
    data() {
        return {
            name: 'John Doe',
            age: 25,
            tel: '1234567890'
        }
    },
    methods: {
        showTel() {
            alert(this.tel)
        },
        changName() {
            this.name = 'Jane Doe'
        },
        changeAge() {
            this.age = 30
        }
    }
  }
</script>

<style>
  .person {
    background-color: aqua;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
</style>

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”。

• setup函数返回的对象中的内容，可直接在模板中使用。
• setup中访问this是undefined。
• setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

setup返回值可以是一个渲染函数：

return () => '...'

vue2和vue3共存问题：

• Vue2 的配置（data、methos…）中可以访问到 setup中的属性、方法（通过this.访问）
• 但在setup中不能访问到Vue2的配置（data、methos…）。
• 如果与Vue2冲突，则setup优先。

<template>
    <div class="person">
        <h1>Person</h1>
        <p>Name: {{ a }}</p>
        <p>Age: {{ b }}</p>
        <button @click="changName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
        <br>
        <h2>{{t_name}}</h2>
    </div>
</template>
<script lang="ts">
  export default {
    name: 'Person',
    data() {
        return {
            t_name:this.a,
        }
    },
    setup() {
        // 数据 -- 此时不是响应式的
        let name = '张三'; 
        let age = 18;
        let tel = '1234567890';

        // 方法 -- 这样修改页面没有变化
        function changName() {
            name = '李四';
        }
        function changeAge() {
            age = 20;
        }

        function showTel() {
            alert(tel);
        }
        return {a:name, b:age, changName, changeAge, showTel}
    }
  }
</script>

<style>
  .person {
    background-color: aqua;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
</style>

原文地址：https://blog.csdn.net/qq_63432403/article/details/142863303

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！