vue2与vue3的区别

苏瞳儿2026-01-07 20:22

一、父传参子中 v-model:id 等价于 :id.sync

javascript 复制代码

<moduleBox v-model:id="id"></modeuleBox>
<moduleBox :id.sync="id"></modeuleBox> (vue3不推荐)
<moduleBox :id="id"></modeuleBox> (vue2 vue3 通用)
//只是写法不同,都可以通过 emit('update:text', newValue)来更新父组件的值

二、为什么vue3不用this了

vue2

vue2的this,是一个实例,当代码执行到main.js的new Vue().$mount('#app')的时候,便开始创建this实例挂在到#app上,这个实例里面有:

1.你的选项如data,methods,computed,watch,props,components,生命周期函数等

2.内置方法如 $emit、$ on、 $off、$ ref等

通过export default导出所以你的选项,然后main.js的new Vue()会把你导出的选项挂载到this上,所以使用的时候都用this

vue3（要区分是否加了setup）

<script> 没有setup

不加setup,与vue2一样,通过this访问

javascript 复制代码

<script>
export default {
  data() { return { count: 0 } },
  methods: { add() { this.count++ } },
  mounted() { console.log(this.count) }
}
<sctipt>

<script setup> 有setup

加了setup,没有this,方法按功能引用

javascript 复制代码

<script setup>
import {defineEmits,ref,onMounted} from "vue"
const count = ref(0)
const add = () => count.value++
onMounted(() => console.log(count.value))
</script>