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和lastname
    let userName = reactive({
      firstName: '',
      lastName: ''
    })
    // 计算属性computed里面填写一个对象
    // 对象里面可以写两个函数 get 和 set
    userName.fullName = computed({
      // get函数是用于获取值 必须要有返回值
      get(){
        return userName.firstName + userName.lastName
      }
    })
    return {userName}
  }

【2】set函数

  setup() {
    // 定义一个userName对象，里面定义firstname和lastname
    let 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中以键名获取对应的value
    return {...person}
  }

}
</script>

【七】script setup语法糖