初始setup

article/2025/10/10 10:21:38

setup

setup作为vue3里面的一个配置项，可以在里面写方法，变量，声明周期，计算属性等等

export default {name: 'setup',// setup作为vue3里面的一个配置项，可以在里面写方法，变量，声明周期，计算属性等等setup() {// 里面的写法同原生jslet name = 'fufu'let age = 20function getName() {console.log(name)	}//该方法必须有一个返回值，一般来说返回一个对象,里面的值可以直接在页面进行展示。return {name, age, getName}}
}

但是setup函数并不是只能返回一个对象，还可以返回一个渲染函数

// 在使用setup方法的时候，若想使用返回渲染函数的方法，则必须从vue里面引入h函数
import {h} from 'vue'
export default {name: 'setup',setup() {return () => {return h('h1', 'fufu')}}
}

在vue3里是可以setup配置项和vue2的data等配置项混用的（但是强烈不推荐）

export default {name: 'setup',//在vue3里面data必须为一个函数data() {height: 170}setup() {// 里面的写法同原生jslet name = 'fufu'let age = 20function getName() {console.log(name)	}//该方法必须有一个返回值，一般来说返回一个对象,里面的值可以直接在页面进行展示。return {name, age, getName}}
}

在混用的情况下，setup里面不可以使用vue2配置项里面的数据，但是vue2配置项里面的可以使用setup里面的数据，并且同名的情况下，setup优先级更高。（因为setup执行机制很早，那个时候连this都没有）

** 不能对setup函数使用async，因为一旦使用async后，返回的就不是一个单纯对象，而是一个包装过的promise对象了，需要使用then才能拿到需要的对象。**

上面的代码虽然可以在页面进行展示，但是其实数据并非响应式的。想要将数据进行响应式处理，必须引用ref方法，ref方法会将数据转换为一个refImpl类的实例，赋予get，set方法进行响应处理。

setup() {// 在里面定义变量同原生jslet name = 'fufu'  //非响应let age = ref(20)//响应onMounted(() => {console.log(name, age);// name: fufu// age:RefImpl{_shallow: false, dep: Set(1), __v_isRef: true, _rawValue: 20, _value: 20}})return {name, age}}