vue2和vue3页面写法的差异

mini云码 发布日期： 2025-11-02 19:19

首先，先看vue3的一个最简单的单页面的代码：

< setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

其中可以看出，属性的定义，不再都是全部定义在data属性了，然后函数的定义，不再全是定义在method方法里，而是可以随便任何地方定义。而html模版可以随意引用定义好的属性和方法。

属性的定义还有一个不同的地方，在于它是使用ref包括属性，这个原因是vue3是通过ref的机制来触发界面变更和渲染，至于深层的原因，可以去看vue官方的介绍。