vue2与vue3的区别

template

<template>
<div class="wrap">
<div>{{ num }}</div>
<Button @click="getData">改变数据</Button>
</div>
</template>
<style lang="less" scoped>
.wrap {
width: 100%;
height: 100%;
border: 1px solid red;
}
</style>

vue2

<!-- vue2 -->
<script>
export default {
data() {
return {
num: 333,
};
},
//
mounted() {
alert('111');
this.getData();
},
methods: {
getData() {
this.num = '2222';
},
},
};
</script>


vue3.0

<!-- vue3.0 -->
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
let num = ref(1223);
function getSecondData(params) {
alert('222');
}
function getData(params) {
num.value = 'weruwiru';
getSecondData();
}
return {
num,
getData,
};
},
});
</script>


vue3.2

<!-- vue3.2 -->
<script setup>
import { ref } from 'vue';
let num = ref(1223);
function getSecondData(params) {
alert('222');
}
function getData(params) {
num.value = 'weruwiru';
getSecondData();
}
</script>