[JavaScript知识库]VUE3----setup函数的使用

前置

开始啦

参数

我们先讲一下setup函数中的两个参数

• 1、props
  在setup函数中的第一个参数是props。正如在一个标准组件中所期望的那样，setup函数中的props是响应式的，当传入新的props的时候,它即将被更新

// 这个就是props

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

但是，因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。

如果需要解构 prop，可以在 setup 函数中使用`toRefs 函数来完成此操作：如下面的代码

import { toRefs } from 'vue'

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

  console.log(title.value)
}

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：

import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}

• 2、Context
  传递给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 生命周期钩子中执行此操作。

上面的是官方的理解

下面的是我自己的理解及代码

触发时机在beforCreate/created生命周期之前触发
Vue3中beforCreate/created生命周期函数已经被废弃了，其实已经被setup给取代了

<template>
  <div id="nav">
    <div>setup函数的用法</div>
    <hr />
    <h1>{{ msg }}</h1>
    <hr />
    <h1>{{ info }}</h1>
    <div>
      <button @click="onAdd">点击</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  // setup是一个新的组件选项，作为组件中
  // Vue3依然可以使用data中的数据，但是我们不建议使用(这是选项API)
  /* data(){
    return {
      info:'nihao'
    }
  } */
  setup () {
    // 触发时机在beforCreate/created生命周期之前触发
    // Vue3中beforCreate/created生命周期函数已经被废弃了，其实已经被setup给取代了
    // 此时无法访问this，因为组件实例此时并没有被创建
    // console.log('hellow')
    // 这里返回的数据用于给模板使用：类似于之前的Data中提供的数据
    const onAdd = () => {
      alert('这是点击事件')
    }
    return {
      msg: 'hello',
      info: '我喜欢学习前端',
      onAdd
    }
  }
  /*
  Vue2中在methods里面定义事件函数
  Vue3中在setup中定义事件函数
  methods: {
    onAdd () {
      alert('你好')
    }
  } 
*/
}
</script>
<style lang="less"></style>