vue3知识点总结（二）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章vue3知识点总结（一）中，我们学习了vue3的知识点，包括vue3新特性、vue2响应式原理、vue3响应式原理、vite基本使用、选项API和组合API等等相关知识点。今天，在这篇文章中，我们将继续学习vue3，包括setup函数、生命周期、reactive函数、ref函数等相关知识点。

setup函数

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

<template>
  <div class="container">
    <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>

生命周期

我们来回顾vue2.x生命周期钩子函数：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

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

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

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

<template>
  <div class="container">
    container
  </div>
</template>
<script>
import { onBeforeMount, onMounted } from 'vue'
export default {
  setup () {
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后2',document.querySelector('.container'))
    })
  },
}
</script>

reactive函数

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。reactive函数通常是用来定义响应式对象数据。reactive对象在解构的时候会丢失响应式的效果，赋值给新的变量也会丢失响应式效果。

<template>
  <div class="container">
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup () {
    // 普通数据
    // const obj = {
    //   name: 'ls',
    //   age: 18
    // }
    const obj = reactive({
      name: 'ls',
      age: 18
    })

    // 修改名字
    const updateName = () => {
      console.log('updateName')
      obj.name = 'zs'
    }

    return { obj ,updateName}
  }
}
</script>

ref函数

ref函数，常用于简单数据类型定义为响应式数据。再修改值，获取值的时候，需要.value。在模板中使用ref声明的响应式数据，可以省略.value。当我们明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可。其他情况使用ref

<template>
  <div class="container">
    <div>{{name}}</div>
    <div>{{age}}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. name数据
    const name = ref('ls')
    console.log(name)
    const updateName = () => {
      name.value = 'zs'
    }
    // 2. age数据
    const age = ref(10)

    // ref常用定义简单数据类型的响应式数据
    // 其实也可以定义复杂数据类型的响应式数据
    // 对于数据未知的情况下 ref 是最适用的
    // const data = ref(null)
    // setTimeout(()=>{
    //   data.value = res.data
    // },1000)

    return {name, age, updateName}
  }
}
</script>