vue3.0学习笔记(二)——生命周期与响应式数据(ref,reactive,toRef,toRefs函数)

1. 组合API-setup函数

使用细节:

  • setup 是一个新的组件选项,作为组件中使用组合API的起点。
  • 从组件生命周期来看,它的执行在组件实例创建之前vue2.x的beforeCreate执行
  • 这就意味着在setup函数中 this 还不是组件实例,this 此时是 undefined
  • 在模版中需要使用的数据和函数,需要在 setup 返回(return)。

2. 生命周期

2.1 回顾vue2.x生命周期钩子函数

  • beforeCreate
  • created——实例创建,能获取data, 不能获取真实DOM,一般用于发起Ajax请求
  • beforeMount
  • mounted——可以获取真实DOM
  • beforeUpdate
  • updated——当数据发生变化并更新页面后执行,获取更新后的DOM
  • beforeDestroy
  • destroyed——手动消除计时器/定时器/全局事件

2.2 认识vue3.0生命周期钩子函数

  • setup 创建实例前
  • onBeforeMount 挂载DOM前
  • onMounted 挂载DOM后
  • onBeforeUpdate 更新组件前
  • onUpdated 更新组件后
  • onBeforeUnmount 卸载销毁前
  • onUnmounted 卸载销毁后

总结: 组合API的生命周期钩子有7个,可以多次使用同一个钩子,执行顺序和书写顺序相同。

3. ref() 函数

  • 作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象

定义响应式数据:

  • ref函数,常用于简单数据类型定义为响应式数据
    • 再修改值,获取值的时候,需要.value
    • 在模板中使用ref申明的响应式数据,可以省略.value

语法:

  • 从 vue 包中导入 ref 函数        import { ref } from 'vue'

  • 在 setup 中执行 ref 函数并传入初始值,使用变量接收 ref 函数的返回值

使用场景:

  • 当你明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可
  • 其他情况使用ref

4. reactive() 函数

  • 作用:接受对象类型数据的参数传入并返回一个响应式的对象
  • 定义响应式数据:

    • reactive是一个函数,它可以定义一个复杂数据类型,成为响应式数据。
    • 通常是用来定义响应式对象数据

语法:

  • 从 vue 包中导入 ref 函数        import { reactive } from 'vue'

  • 在 setup 中执行 reactive 函数并传入初始值,使用变量接收 reactive 函数的返回值

5. toRef() 函数

  • 作用:toRef 是函数,转换响应式对象某个属性为单独响应式数据,并且值是关联的
  • 语法:

    • 从 vue 包中导入 toRef 函数        import { toRef } from 'vue'

    • toRef (响应式对象, 响应式对象中的某个属性)

使用场景:有一个响应式对象数据,但是模版中只需要使用其中一项数据。

6. toRefs() 函数

  • 作用:toRefs() 是函数,转换响应式对象中所有属性为单独响应式数据,并且值是关联的。
  • 语法:
    • 从 vue 包中导入 toRefs 函数        import { toRefs } from 'vue'
    • toRefs (响应式对象)

7. 案例

基本步骤:

  • 记录鼠标坐标
    • 定义一个响应式数据对象,包含x和y属性。
    • 在组件渲染完毕后,监听document的鼠标移动事件
    • 指定move函数为事件对应方法,在函数中修改坐标
    • 在setup返回数据,模版中使用
  • 累加1功能
    • 定义一个简单数据类型的响应式数据
    • 定义一个修改数字的方法
    • 在setup返回数据和函数,模板中使用
<template>
  <div>
    <div>鼠标的坐标为:</div>
    <p>x:{{ x }}</p>
    <p>y:{{ y }}</p>
    <hr>
    <div>{{ count }}</div>
    <button @click="add">+ 1</button>
  </div>
</template>

<script>
import { onMounted, reactive, onUnmounted, toRefs, ref } from 'vue'
// 功能1:记录鼠标坐标
// 定义一个响应式数据对象,包含x和y属性。
// 在组件渲染完毕后,监听document的鼠标移动事件
// 指定move函数为事件对应方法,在函数中修改坐标
// 在setup返回数据,模版中使用

export default {
  setup () {
    // 1. 定义一个响应式数据对象,包含x和y属性。
    const mouse = reactive({
      x: 0,
      y: 0
    })
    // 3. 指定move函数为事件对应方法,在函数中修改坐标
    const move = (e) => { 
        mouse.x = e.pageX
        mouse.y = e.pageY
      }
    // 2. 在组件渲染完毕后,监听document的鼠标移动事件
    onMounted(() => {
      document.addEventListener('mousemove',move)
    })
    //  4. 组件销毁时,移除事件
    onUnmounted(() => {
      document.removeEventListener('mousemove',move)
    })

    // 功能2:数字加 1 
    const count = ref(0)
    const add = () => {
      count.value += 1
    }
    return {
      ...toRefs(mouse),
      count,
      add
    }
  }
}
</script>

<style>

</style>

相关推荐

  1. vue3 学习笔记07 -- 定义响应数据

    2024-07-23 09:12:05       25 阅读
  2. Vue学习笔记-Vue3对响应数据的判断

    2024-07-23 09:12:05       51 阅读
  3. Vue3 生命周期组合API】

    2024-07-23 09:12:05       38 阅读
  4. Vue3 响应API:高级函数

    2024-07-23 09:12:05       26 阅读
  5. vue钩子函数生命周期

    2024-07-23 09:12:05       32 阅读
  6. Vue:封装响应数据的防抖函数

    2024-07-23 09:12:05       45 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-23 09:12:05       106 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-23 09:12:05       116 阅读
  3. 在Django里面运行非项目文件

    2024-07-23 09:12:05       95 阅读
  4. Python语言-面向对象

    2024-07-23 09:12:05       103 阅读

热门阅读

  1. DP学习——状态模式

    2024-07-23 09:12:05       27 阅读
  2. Gradle依赖报告:项目依赖树的X光机

    2024-07-23 09:12:05       26 阅读
  3. 推翻百年集论的三个定理

    2024-07-23 09:12:05       23 阅读
  4. 2710. 移除字符串中的尾随零

    2024-07-23 09:12:05       28 阅读
  5. AI学习指南机器学习篇-SOM的优缺点

    2024-07-23 09:12:05       23 阅读
  6. spring —— IoC容器(二)

    2024-07-23 09:12:05       30 阅读
  7. Postman 接口测试工具详解

    2024-07-23 09:12:05       25 阅读