vue3 setup

setup是vue3中的一个新的配置项，我们可以将组件中用到的数据，方法配置在setup中

setup处于beforeCreate和created两个钩子函数之前

  beforeCreate() {
    console.log('beforeCreate');    
  },
  setup() {
    console.log('setup', this);
  },
  created() {
    console.log('create');
  }

image.png

setup接受两个参数props和context

• props
  setup函数的props是响应式的，但如果将其解构，响应式会丢失，如果必须解构，或者想要将某个 prop 传入到一个外部函数中但想保持响应性，那么你可以使用 toRefs() toRef() 这两个工具 API

import { toRefs, toRef } from 'vue'
toRefs 将props全部转换为ref再解构
const { title } = toRefs(props)

toRef 将props的一个属性转换为一个ref
const title = toRef(props, 'title')

props: {
  title: String,
  name: String
},
setup(props) {
  const {title, name} = toRefs(props)
  console.log(title.value);
  console.log(name.value);
}

• context
  setup上下文，暴露了一些属性，可解构为 { attrs, slots, emit, expose }
  attrs: 一个非响应式对象，等价于 $attrs
  slots: 插槽，非响应式对象，等价于$slots
  emit: setup内部没有this,使用emit代替this.$emit,用来抛出事件
  expose: 暴露公共属性，可选择性的暴露想要暴露的属性和方法，也可整个关闭组件，不暴露数据

setup中的值需要通过.value来获取

setup() {
  let count = ref(0)
  console.log(count);
  console.log(count.value); //0
}

image.png

setup中的属性和方法都必须return出去，否则无法使用

setup() {
  let count = ref(0)
  let title = '我是父组件传来的值'
  return {
    title
  }
},
created() {
  console.log(this.count); //undefined
  console.log(this.title); //我是父组件传来的值
}

setup函数只能是同步的，不能是异步的

尚在学习中，欢迎指正和建议