当前位置：首页 > news >正文

vue3学习--Vue3与2的区别

news 来源：原创 2025/5/29 5:07:15

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>

<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;
}