当前位置：首页 > news >正文

Vue3 setup、ref和reactive函数

news 2025/8/2 7:12:32

一、setup函数

1.理解：Vue3.0中一个新的配置项，值为一个函数。

2.setup是所有Composition API(组合API)的“表演舞台”。

3.组件中用到的：数据、方法等等，均要配置在setup中。

4.setup函数的两种返回值：

(1).若返回一个对象，则对象中的属性方法，在模板中均可以直接使用。（重点关注！）

(2).若返回一个渲染函数，则可以自定义渲染内容。（了解）

5.注意：

(1).尽量不要用Vue2.x配置混用

(1.Vue2.x配置（data、methods、computed...）中可以访问到setup中的属性和方法。

(2.但在setup中不能访问到Vue2.x配置（data、methods、computed...）。

(3.如果有重名，setup优先。

(2)setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个promise实例，但需要Suspense和异步组件的配合）。

<template><h1>一个人的信息</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>性别：{{ sex }}</h2><button @click="sayHello">vue3函数</button><br><br><button @click="sayWelcome">vue2函数</button><br><br><button @click="towReadThree">Vue2读取Vue3</button><br><br><button @click="threeReadTow">Vue3读取Vue2</button>
</template><script>
import {h} from 'vue'
export default {name: 'App',data() {return {sex:'男'}},methods: {sayWelcome(){alert('欢迎学习Vue3！')},towReadThree(){console.log(this.name)console.log(this.age)console.log(this.sayHello)}},setup() {let name='张三'let age=18let sex='女'function sayHello(){alert('你好，Vue3！')}function threeReadTow(){console.log(this.sex)console.log(this.sayWelcome)console.log(this.towReadThree)}return {name,age,sex,sayHello,threeReadTow}//渲染函数// return () => h('h1','你好啊')}
}
</script>

二、ref函数

1.作用：定义一个响应式的数据。

2.语法：const xxx = ref(initValue)

(1).创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

(2).JS中操作数据：xxx.value

(3).模板中读取数据：不需要.value，直接<div>{{xxx}}</div>

3.备注：

(1).接收的数据可以是：基本类型、也可以是对象类型。

(2).基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

(3).对象类型的数据：内部“求助”了Vue3.0中的一个新函数——reactive函数。

<template><h1>一个人的信息</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>职业：{{ obj.type }}</h2><h2>工资：{{ obj.salary }}</h2><button @click="sayHello">vue3函数</button><br><br>
</template><script>
import {ref} from 'vue'
export default {name: 'App',setup() {let name=ref('张三')let age=ref(18)let obj=ref({type:'前端工程师',salary:'30k'})function sayHello(){obj.value.type = 'UI设计师',obj.value.salary = '60k' console.log(obj)}return {name,age,obj,sayHello,}}
}
</script>

三、reactive函数

1.作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）。

2.语法：const 代理对象= reactive（源对象）接受一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）。

3.reactive定义的响应式数据是“深层次的”。

4.内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

<template><h1>一个人的信息</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>职业：{{ person.obj.type }}</h2><h2>工资：{{ person.obj.salary }}</h2><button @click="sayHello">vue3函数</button><br><br>
</template><script>
import {ref,reactive} from 'vue'
export default {name: 'App',setup() {let person =reactive({name:'张三',age:18,obj:{type:'前端工程师',salary:'30k'}})function sayHello(){person.name='李四'person.age = 40person.obj.type = 'UI设计师',person.obj.salary = '60k' }return {person,sayHello,}}
}
</script>