Vue 3 setup

【一】setup函数

setup函数的设计是为了使用vue3的组合式api，setup函数必须要有返回值，在里面定义的变量必须要返回出去才能在html里面使用

【1】定义变量

setup() {// 1.定义变量 跟正常写js是一样的let name = 'hqq'let age = 18 // setup函数必须要有返回值，返回定义的对象后才能使用这个对象return {name, age}}

【2】定义函数

setup() {// 2.定义函数let handleAdd = () => {age++ }let handleChangeName = (n) => {name = n}// setup函数必须要有返回值，返回定义的对象后才能使用这个对象return {handleAdd, handleChangeName}}

【二】实现响应式

上面定义的变量是没办法实现响应式的，如果要实现响应式，给变量用ref或者reactive函数包裹，使其变成对象，这时候他的值就存在了对象的value属性里面

【1】ref函数

  setup() {// 1.定义变量 跟正常写js是一样的let name = ref('hqq')let age = ref(18) //用ref包裹实现响应式// 2.定义函数let handleAdd = () => {age.value++ // age用ref包裹之后就变成了一个对象，它的值在这个对象value里面，所以需要.value++}let handleChangeName = (n) => {name.value = n}// setup函数必须要有返回值，返回定义的对象后才能使用这个对象return {name, age, handleAdd, handleChangeName}}

【2】recative函数

  setup() {// 1.定义对象 要想对象里面的内容实现响应式，就需要用reactive函数包裹起来对象let userInfo = reactive({name: 'hqq',age: 18,hobby: '运动'})// 2.定义函数let handleAdd = () => {userInfo.age++}return {userInfo, handleAdd}}

【三】计算属性

计算属性computed，需要导入使用，computed函数包含一个对象，对象里面可以写两个函数，get和set，get用于获取值，必须要有返回值，返回值就是获取的值，set用于修改值，set函数有一个参数，就是修改后的值。

【1】get函数

setup() {// 定义一个userName对象，里面定义firstname和lastnamelet userName = reactive({firstName: '',lastName: ''})// 计算属性computed里面填写一个对象// 对象里面可以写两个函数 get 和 setuserName.fullName = computed({// get函数是用于获取值 必须要有返回值get(){return userName.firstName + userName.lastName}})return {userName}}

【2】set函数

  setup() {// 定义一个userName对象，里面定义firstname和lastnamelet userName = reactive({firstName: '',lastName: ''})userName.fullName = computed({get(){...},// set函数用于修改值，可以传一个参数，这个参数就是修改后的值set(value){// 这里面可以写修改的逻辑console.log(value)}})return {userName}}

【四】监听属性

【1】监听一个对象

  setup() {let age = ref(18)let handleAdd = () => {age.value++}// 监听一个对象// 监听属性watch函数，第一个参数写监听的对象，// 第二个参数是一个函数，函数的有两个参数,分别是修改后的数据和修改前的数据watch(age, (newValue, oldValue) => {console.log('新年龄' + newValue)console.log('老年龄' + oldValue)})return {age, handleAdd}}

【2】监听对象里的某个值

  setup() {// 定义一个对象let person = reactive({name: 'hqq',age: 18,hobby: '运动'})}// 定义点击事件 点击对象的name变成吴彦祖let handleChangeName = () => {person.name = '吴彦祖'}// 监听对象的某个值// watch函数的第一个参数也变成了一个函数，需要返回一个需要监听的值// 第二个参数是一个函数，函数的有两个参数,分别是修改后的数据和修改前的数据watch(() => person.name, (newValue, oldValue) => {// 在这里可以写一些变化后的逻辑console.log('变吴彦祖啦')})return {age, handleAdd, person, handleChangeName}}

【五】生命周期

【六】toRefs

​ 在Vue 3中，toRefs函数是一个实用工具，用于将响应式对象转换为可被解构的引用对象。在Vue 2中，直接使用ref或reactive创建的响应式对象，如果直接解构或访问其属性，会导致丢失响应性。而toRefs可以解决这个问题。

<template><main><p>姓名---{{name}}</p><p>年龄---{{age}}</p><p>爱好---{{ hobby}}</p></main>
</template><script>
import {toRefs} from "vue";export default {name: 'home',setup() {// 使用了toRefs包裹起来对象之后 person就变成了一个可被解构的响应式对象let person = toRefs({name: 'hqq',age: 18,hobby: '运动'})// 通过...展开，就可以直接在html中以键名获取对应的valuereturn {...person}}}
</script>

【七】script setup语法糖