【博学谷学习记录】超强总结,用心分享丨前端开发:vue3函数

一、setup函数

setup函数是组合式API的入口函数
setup 函数是 Vue3 特有的选项，作为组合式API的起点
从组件生命周期看，它在 beforeCreate 之前执行
函数中 this 不是组件实例，是 undefined
如果数据或者函数在模板中使用，需要在 setup 返回

<template>
  <div>
    <h1 @click="say()">{{ msg }}</h1>
  </div>
</template>

<script>
export default{
  setup(){
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () =>{
      console.log(msg)
    }
    // 返回给模板使用
    return {msg , say}
    },
    beforeCreate(){
      console.log('beforeCreate执行了')
      console.log(this)
    }
}
</script>

二、reactive函数

通常使用它定义 对象类型 响应式数据
使用步骤：
1.从 vue 中导出 reactive 函数
2.在 setup 函数中，使用 reactive 函数，传入一个普通对象，返回一个响应式数据对象
3.最后 setup 函数返回一个对象，包含该响应式对象即可，模板中可使用

<template>
  <div>
    <p>姓名: {{ state.name }}</p>
    <p>年龄: {{ state.age }} <button @click="state.age++">年龄+1</button></p>
  </div>
</template>

<script>
// 1. 导入函数
import { reactive } from 'vue'
export default{
  setup(){
    // 2. 创建响应式数据对象
    const state = reactive({ name: 'tom', age: 18 })
    // 3. 返回数据
    return { state }
  }
}
</script>

总结：
reactive 函数通常定义：复杂类型的响应式数据
可以转换简单数据吗？不能

三、ref函数

通常使用它定义响应式数据，不限类型
使用步骤：
1.从 vue 中导出 ref 函数
2.在 setup 函数中，使用 ref 函数，传入普通数据（简单or复杂），返回一个响应式数据
3.最后 setup 函数返回一个对象，包含该响应式数据即可
注意：使用 ref 创建的数据，js 中需要 .value ，template 中可省略

<template>
  <div>
    <p>
      计数器: {{ count }}
      <button @click="count++">累加1</button>
      <button @click="increment">累加10</button>
    </p>
  </div>
</template>

<script>
// 1. 导入函数
import { ref } from 'vue'
export default{
  setup(){
    // 2. 创建响应式数据对象
    const count = ref(0)
    const increment = ()=>{
      // js中使用需要.value
      count.value += 10
    }
    // 3. 返回数据
    return { count,increment }
  }
}
</script>

四、setup语法糖

简化 setup 固定套路代码 ，让代码更简洁
发现：
使用 setup 有几件事必须做：默认导出配置选项，setup函数声明，返回模板需要数据与函数。

解法：
使用 setup 语法糖

五、computed函数

掌握：使用 computed 函数定义计算属性
大致步骤：
1.从 vue 中导出 computed 函数
2.在 setup 函数中，使用 computed 函数，传入一个函数，函数返回计算好的数据
3.最后 setup 函数返回一个对象，包含该计算属性数据即可，然后模板内使用

<template>
  <div>
    <p>分数: {{ scoreList }}</p>
    <p>优秀: {{ betterList }}</p>
  </div>
</template>

<script setup>
// 1. 导入函数
import { ref,computed } from 'vue'
const scoreList = ref([80,100,90,70,60]);
// 计算属性
const betterList = computed(()=> scoreList.value.filter((item)=>item>=90))
// 改变数据，计算属性改变
setTimeout(()=>{
  scoreList.value.push(92,66)
},3000)
</script>

总结：
使用 computed 定义计算属性，场景：当需要依赖一个数据得到新的数据使用计算属性

六、watch函数

使用watch函数监听数据的变化

1. 使用 watch 监听一个响应式数据

<template>
  <div>
    <p>计数器：{{ count }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
// 1. 监听一个响应式数据
// watch(数据，改变后回调函数)
watch(count,()=>{
  console.log('count改变了');
})
// 2s改变数据
setTimeout(()=>{
  count.value++
},2000)
</script>

2. 使用 watch 监听多个响应式数据

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <p>
      姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
    </p>
  </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'
const count = ref(0)
const user = reactive({
  name: 'tom',
  info:{
    gender: '男',
    age: 18
  }
})
// 2. 监听多个响应式数据
// watch([数据1,数据2,...]]，改变后回调函数)
watch([count,user],()=>{
  console.log('数据改变了');
})
// 2s改变数据
setTimeout(()=>{
  count.value++
},2000)
// 4s改变数据
setTimeout(()=>{
  user.info.age++
},4000)
</script>

3.使用 watch 监听响应式对象数据中的一个属性(简单)

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <p>
      姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
    </p>
  </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'
const count = ref(0)
const user = reactive({
  name: 'tom',
  info:{
    gender: '男',
    age: 18
  }
})
// 3. 监听响应式对象数据的一个数据，简单类型
// watch(()=>数据，改变后回调函数)
watch(()=>user.name,()=>{
  console.log('数据改变了');
})
// 2s改变数据
setTimeout(()=>{
  user.name = 'jack'
},2000)
// 4s改变数据
setTimeout(()=>{
  user.info.age = 60
},4000)
</script>

4.使用 watch 监听响应式对象数据中的一个属性(复杂)，配置深度监听

<template>
  <div>
    <p>
      姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
    </p>
  </div>
</template>

<script setup>
import { watch, reactive } from 'vue'
const user = reactive({
  name: 'tom',
  info:{
    gender: '男',
    age: 18
  }
})
// 4. 监听响应式对象数据的一个数据，复杂类型
// watch(()=>数据，改变后回调函数,{deep:true})
watch(()=>user.info,
      ()=>{
        console.log('数据改变了');
      },
      {
        // 开启深度监听
        deep:true
      }
      )
// 2s改变数据
setTimeout(()=>{
  user.info.age = 60
},2000)
</script>

使用 watch 监听，配置默认执行

总结：
watch(需要监听的数据,数据改变执行函数,配置对象) 来进行数据的侦听
数据：单个数据，多个数据，函数返回对象属性，属性复杂需要开启深度监听
配置对象：deep 深度监听 immediate 默认执行

七、生命周期函数

掌握：vue3的常用生命周期函数
使用步骤：
1.先从vue中导入以on打头的生命周期钩子函数
2.在setup函数中调用生命周期函数并传入回调函数
3.生命周期钩子函数可以调用多次
具体内容：
Vue3和vue2的生命周期对比

参考代码