Vue3：Setup

清欢OvO
2,903 阅读7分钟

1、Setup是什么？

1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的

2、setup函数是 Composition API（组合API）的入口

3、与模板一起使用：需要返回一个对象，在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

4、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）

5、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

6、使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

2、setup函数使用需注意的点

1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined

3、setup函数只能是同步的不能是异步的，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

3、如何使用setup

　　setup 选项应该是一个接受 props 和 context 的函数。
此外，我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

　　个人觉得可以理解为：

  1. setup 选项应该为一个函数
  2. setup 选项函数接受两个参数： props 和 context
  3. setup 选项函数需要返回要暴露给组件的内容

3.1 setup函数中的参数--props

　　正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来完成此操作：

import { toRefs } from 'vue'

setup(props) {
    const { title } = toRefs(props)

    console.log(title.value)
}

3.2 setup函数中的参数--context

context 上下文是一个普通的 JavaScript 对象，它暴露三个组件的 property：

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

　　attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以 attrs.x 或 slots.x 的方式引用 property。请注意，与 props 不同，attrs 和 slots 是非响应式的。如果你打算根据 attrs 或 slots 更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。

4、setup函数的返回值

4.1 setup函数的返回值--对象

　　如果 setup 返回一个对象，则可以在组件的模板中像传递给 setup 的 props property 一样访问该对象的 property：

<template>
  <!-- 模板中使用会被自动解开，所以不需要 .value  -->
  <div>{{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

　　注意，从 setup 返回的 refs 在模板中访问时是被自动解开的，因此不应在模板中使用 .value。

4.2 setup函数的返回值--渲染函数

setup 还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态：

import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    // Please note that we need to explicitly expose ref value here
    return () => h('div', [readersNumber.value, book.title])
  }
}

新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。

5、setup函数内部不使用this

　　在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。

6、响应式系统API

　　将不同组件的相同部分抽离出来，单独维护，目的是提高代码的复用性

6.1 reactive

reactive() 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()

const obj = reactive({ count: 0 })

　　响应式转换是“深层的”：会影响对象内部所有嵌套的属性。基于 ES2015 的 Proxy 实现，返回的代理对象不等于原始对象。建议仅使用代理对象而避免依赖原始对象。作用是帮助我们创建响应式数据对象。

//导入语法
import { reactive } from 'vue'
export default {
  setup() {
    // state 现在是一个响应式的状态
    const state = reactive({
      count: 0,
    })
  }
}

6.2 ref

接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。基于基本数据类型（字符串、布尔、数值）创建一个响应式数据对象。

//语法
import {ref} from 'vue';

export default {
    setup() {
        //使用ref基于基本数据类型创建响应式数据对象
        const name = ref('test');
        //修改name的默认值
        neme.value = "测试"; 
        return {
            name
        }
    }
}

如果传入 ref 的是一个对象，将调用 reactive 方法进行深层响应转换。
修改需要操作.value，视图中使用直接通过数据名称引用即可。

{{ name }}

6.3 toRefs

作用：让reactive创建的响应式数据对象，支持es6的解构赋值，同时保持响应式的特性

//导入语法
import { reactive,toRefs } from 'vue'
export default {
  setup() {
    // 语法
    const {name,age,sex} = toRefs(reactive({
      name: '测试',
      age: 18,
      sex: '女'
    }));
    return {
        name,
        age,
        sex
    }
  }
}

6.4 computed

使用响应式 computed API 有两种方式：

  1. 传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象。
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误！
  1. 传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态。
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0
  1. 类型定义
// 只读的
function computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>

// 可更改的
function computed<T>(options: {
  get: () => T
  set: (value: T) => void
}): Ref<T>

6.5 watch

　　watch API 完全等效于 2.x this.$watch （以及 watch 中相应的选项）。watch 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调。

  • 对比 watchEffect，watch 允许我们：

    • 懒执行副作用；
    • 更明确哪些状态的改变会触发侦听器重新运行副作用；
    • 访问侦听状态变化前后的值。

  • 侦听单个数据源

侦听器的数据源可以是一个拥有返回值的 getter 函数，也可以是 ref：

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

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})
  • 侦听多个数据源

watcher 也可以使用数组来同时侦听多个源：

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

7. 代码分割

代码分割
Options API 约定：

  • 在 props 里面设置接收参数
  • 在 data 里面设置变量
  • 在 computed 里面设置计算属性
  • 在 watch 里面设置监听属性
  • 在 methods 里面设置事件方法

　　你会发现Options APi都约定了我们该在哪个位置做什么事，这反倒在一定程度上也强制我们进行了代码分割。

　　现在用Composition API，不再这么约定了，于是乎，代码组织非常灵活，我们的控制代码写在setup里面即可

avatar
文章
阅读
粉丝