Vue3基础

1. setup函数##

setup 函数是组件逻辑的地方，它在组件实例被创建时，初始化 props 之后调用

**

2. ref

ref 主要是用来包装原始类型的数据

​ 为什么要包装对象
我们知道在 JavaScript 中，原始值类型如 string 和 number 是只有值，没有引用的。如果在一个函数中返回一个字符串变量，接收到这个字符串的代码只会获得一个值，是无法追踪原始变量后续的变化的
因此，包装对象的意义就在于提供一个让我们能够在函数之间以引用的方式传递任意类型值的容器。

setup(props) {
    const msg = ref('hello')
    const appendName = () => {
      msg.value = `hello ${props.name}`
    }
    return {
      msg,
      appendName
    }
  },

**
**

3. reactive

reactive主要用于非原始类型的数据

import { reactive } from 'vue'

const object = reactive({
  count: 0
})

**

4. toRefs

响应式对象转为普通对象用它可以再变成响应式的

setup() {
     const obj = reactive({
       count: 0
     })
     const inc = () => {
       obj.count++
     }
     return {
      
       // 如果直接用ES6扩展运算符，会取消双向数据绑定的特性,使用toRefs(),转为响应式数据
       ...toRefs(obj),
       inc
     }
},

5. watchEffect

监听所有的数据 改变的时候触发

立即执行，没有惰性，页面的首次加载就会执行
自动检测内部代码，代码中有依赖就会执行
不需要传递要侦听的内容, 会自动感知代码依赖

 setup() {
    const userId = ref(0)
    // 只要数据数据发生改变就触发
    watchEffect(() => console.log(userId.value))
    setTimeout(() => {
      userId.value = 1
    }, 1000)
    return {
      userId
    }
  }

6. watch

不能监听所有的, 只能监听指定数据

具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行
参数可以拿到当前值和原始值
可以侦听多个数据的变化

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

// 侦听多个数据源
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

7. 瞬移组件

<teleport to="#modal">
 	<-- 内容 -->
</teleport>

8. Suspense异步组件

在页面加载之前显示加载动画
显示占位符内容
处理延迟加载的图像

<Suspense>
    <template #default>
      <component-a></component-a>
    </template>
    <template #fallback>
      <h1>Loadding...</h1>
    </template>
  </Suspense>

9. 生命周期

• 除去 beforeCreate和 created之外，在我们的 setup 方法中，有9个旧的生命周期钩子，我们可以在setup方法中访问

  • onBeforeMount——挂载开始前调用

  • onMounted——挂载后调用

  • onBeforeUpdate——当响应数据改变，且重新渲染前调用

  • onUpdated——重新渲染后调用

  • onBeforeUnmount——Vue实例销毁前调用

  • onUnmounted——实例销毁后调用

  • onActivated——当keep-alive组件被激活时调用

  • onDeactivated——当keep-alive组件取消激活时调用

  • onErrorCaptured——从子组件中捕获错误时调用

• 改变两个销毁生命周期更具有语义化

  • beforeDestory 换成 beforeUnmount
  • destoryed 换成 unmounted

• 新增两个方便调试生命周期

  • onRenderTracked
  • onRenderTriggered