vue3 vs vue2语法_vue2选项式语法-CSDN博客

本文链接：https://blog.csdn.net/weixin_45667876/article/details/129882355

文章介绍了Vue2和Vue3在创建入口文件和API使用上的差异。Vue2采用选项式API，而Vue3推荐使用组合式API，数据和方法在setup函数中定义。Vue3增加了对响应式数据更细粒度的控制，如ref和reactive用于创建响应式数据，toRefs帮助在模板中直接访问对象属性。

摘要由CSDN通过智能技术生成

1.入口文件写法

import Vue from 'vue'
new Vue({
	render: h=>h(App)
}).$mount('#app')

import { createApp } from 'vue'
createApp({
	data(){},
	methods:{}
	....
}).$mount('#app')

2.API 推荐写法

vue2推荐选项式API（特点是数据和方法是分开的）

export default {
	data(){
		return {...}
	},
	methods:{...},
	computed:{...}
}

vue3推荐组合式API (数据和方法都写在setup函数里面)

export default {
	setup(){
		let a = 1;
		let obj = {...};
		return {
			a, obj
		}
	}
}

vue2的数据都是响应式的，vue3可以指定数据是响应式的或者非响应式的，指定数据为响应式的，需要用到ref, reactive, toRefs

ref(10) 将基本类型数据变成响应式数据

通过ref产生的数据在模版里面直接使用，在js里面通过.value修改数据

reactive(obj)将引用类型数据变成响应式

…toRefs(state) 导出给模版使用的时候用toRefs包裹，在模版里面使用的时候可以直接访问对象里面的属性

<template>
 123
 <div>{{ a+b }}</div>
</template>

<script>
import { ref, toRefs, reactive } from 'vue';

export default {
    setup(){
        let a = ref(1);
        let obj = reactive({
            a:1,
            b:2
        });
        
        console.log(obj)
        return {
            a,
            ...toRefs(obj)
        }
    }
}
</script>