编程知识 cdmana.com

Vue 3 setup function

Interested people can pay attention to my official account 《 Life code 》

Life code

You can also subscribe to my CSDN special column

Vue 3 Introduction to the Basics Series

setup

setup Function can be said to be Vue 3 An entry function .

Parameters

Use setup Function time , It will take two parameters :

  1. props
  2. context

Let's take a closer look at how to use each parameter .

Props

setup The first parameter in the function is props. As expected in a standard component ,setup Function props It's reactive , When a new prop when , It will be updated . We are still src/TemplateM.vue

`<template>
  <div class="template-m-wrap">
    counter ---> {{ counter }}
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'TemplateM',
  props: {
    test: {
      type: Object,
      default: () => {
        return {
          name: 'haha',
        }
      },
    },
  },
  setup(props) {
    const counter = ref(0)
    console.log('props===>', props)
    return {
      counter,
    }
  },
})
</script>
`

however , because props It's reactive , you Out of commission ES6 deconstruction , Because it will eliminate prop Responsiveness .

We can try to make props Conduct ES6 deconstruction , See what happens :

`<template>
  <div class="template-m-wrap">
    counter ---> {{ counter }}
    <br/>
    test.name ---> {{ test.name }}
    <br/>
    name ---> {{ name }}
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'TemplateM',
  props: {
    test: {
      type: Object,
      default: () => {
        return {
          name: 'haha',
        }
      },
    },
  },
  setup(props) {
    const counter = ref(0)
    console.log('props===>', props)
    const {name} = props.test
    return {
      counter,
      name
    }
  },
})
</script>
`

We saw that the console started to alert :

If you need to deconstruct prop, By using setup Function toRefs To do this safely .

`<template>
  <div class="template-m-wrap">
    counter ---> {{ counter }}
    <br/>
    test.name ---> {{ test.name }}
    <br/>
    name ---> {{ name }}
  </div>
</template>
<script>
import { defineComponent, ref, toRefs } from 'vue'
export default defineComponent({
  name: 'TemplateM',
  props: {
    test: {
      type: Object,
      default: () => {
        return {
          name: 'haha',
        }
      },
    },
  },
  setup(props) {
    const counter = ref(0)
    console.log('props===>', props)
    const {name} = toRefs(props.test)
    return {
      counter,
      name
    }
  },
})
</script>
`

This time we can see the following results :

Context

Pass to setup The second parameter to the function is context.context It's a common JavaScript object , It exposes three components of property:

`<template>
  <div class="template-m-wrap">
  </div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'TemplateM',
  props: {
    test: {
      type: Object,
      default: () => {
        return {
          name: 'haha',
        }
      },
    },
  },
  setup(props, context) {
    console.log('props===>', props, context)
    return {
    }
  },
})
</script>
`

We can see that the effect is as follows :

context It's a common JavaScript object , in other words , It's not reactive , This means that you can safely deal with context Use ES6 deconstruction .

`setup(props, { attrs, slots, emit }) {
    ...
}
`

Be careful

attrs and slots It's a state object , They are always updated as the component itself updates . This means that you should avoid deconstructing them , And always with attrs.x or slots.x Method reference of property. Please note that , And props Different ,attrs and slots yes Not Responsive . If you're going to base it on attrs or slots Change application side effects , Then it should be in onUpdated Do this in the lifecycle hook .

Access component's property

perform setup when , The component instance has not been created . therefore , You can only access the following property:

  • props
  • attrs
  • slots
  • emit

let me put it another way , you Will not be accessible The following component options :

  • data
  • computed
  • methods

Use with templates

If setup Return an object , In the template of the component, it can be passed to setup Of props property Access the object as well property:

`<template>
  <div class="template-m-wrap" title="hhhhh">
    <div>{{ readersNumber }} {{ book.title }}</div>
  </div>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
  name: 'TemplateM',
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    // expose to template
    return {
      readersNumber,
      book,
    }
  },
})
</script>
`

We can see that the effect is as follows :

Be careful , from setup Back to refs When accessing in a template, it is Automatically untied Of , So... Should not be used in templates .value.

Using render functions

setup You can also return a render function , This function can directly use responsive states declared in the same scope :

`<template>
  <div class="template-m-wrap" title="hhhhh">
  </div>
</template>
<script>
import { defineComponent, ref, reactive, h } from 'vue'
export default defineComponent({
  name: 'TemplateM',
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    // expose to template
    return () => h('div', [readersNumber.value, book.title])
  },
})
</script>
`

The effect is as follows :

Use this

stay setup() Inside ,this It will not be a reference to the active instance , because setup() Is called before parsing other component options , therefore setup() Inside this The behavior of and other options for this Completely different . This is with other options API Use it together setup() May lead to confusion .

版权声明
本文为[KenNaNa]所创,转载请带上原文链接,感谢

Scroll to Top