当前位置：网站首页>Tips for using setup

Tips for using setup

2022-07-19 15:01:00 【InfoQ】

One 、setup Characteristics and functions of functions

　　 One thing is for sure Vue3.0 Is compatible Vue2.x Version of In other words, in our daily work Can be in Vue3 Use in Vue2.x The relevant grammar of But when you really start using Vue3 When writing a project You'll find him better than Vue2.x It's much more convenient

　　Vue3 A major characteristic function of ---- setup

　　1、setup Function is in Life cycle function beforeCreate and Created The function before the two hook functions That is to say setup Function cannot be Use data and methods Of data and methods in

　　2、setup The function is Composition API（ Combine API） Entrance

　　3、 stay setup The variables and methods defined in the function finally need return Out of the Otherwise, it cannot be used in the template

Two 、setup Attention points of function

　　1、 Because of the execution setup Function , Not implemented yet Created Life cycle approach , So in setup Function , Can't use data and methods Variables and methods of

　　2、 Because we can't be in setup Use in a function data and methods, therefore Vue In order to avoid our wrong use , Direct will setup Function this To modify a undefined

　　3、setup Functions can only be synchronous, not asynchronous

usage 1: combination ref Use

<template>
 <div id=&quot;app&quot;>
 &nbsp;{{name}}
 &nbsp;<p>{{age}}</p>
 &nbsp;<button @click=&quot;plusOne()&quot;>+</button>
 </div>
</template>
 
<script>
import {ref} from &quot;vue&quot;
export default {
 name:&quot;app&quot;,
 data(){
 &nbsp;return {
 &nbsp; name:&quot;xiaosan&quot;
 }
 },
 setup(){
 &nbsp;const name =ref(&quot; Little four &quot;)
 &nbsp;const age=ref(18)
 &nbsp;function plusOne(){
 &nbsp; age.value++ // Want to change the value or get the value   must .value
 }
 &nbsp;return { // Must return   Can only be used in the template 
 &nbsp; name,age,plusOne
 }
 }
}
</script>
 Copy code

usage 2： The code segment

Options API and Composition API

Options API Appointment ：

We need to be in props Set the receiving parameters inside

We need to be in data It sets variables

We need to be in computed Set calculation properties inside

We need to be in watch Set the listening attribute inside

We need to be in methods Set the event method inside

You'll find that Options APi It's agreed where and what we should do , On the contrary, it forces us to split the code to a certain extent .

Now use Composition API, No longer so agreed , So , Code organization is very flexible , Our control code is written in setup Just inside .

setup The function provides two arguments props and context, What's important is that setup There is no in the function this, stay vue3.0 in , Visit them in the form of ： this.xxx=》context.xxx

We don't have this Context , period Options API Forced code separation .Composition API It gives us a broader world , Then we need to be more cautious about making an appointment .

For complex logic code , We should pay more attention to Composition API At first , Don't be stingy with Composition API To separate code , Used to cut into various modules .

We expect this ：

importuseAfrom &quot;./a&quot;;
importuseBfrom &quot;./b&quot;;
importuseCfrom &quot;./c&quot;;
exportdefault {
 &nbsp; &nbsp;setup(props) {
 &nbsp; &nbsp; &nbsp; &nbsp;let { a, methodsA } = useA();
 &nbsp; &nbsp; &nbsp; &nbsp;let { b, methodsB } = useA();
 &nbsp; &nbsp; &nbsp; &nbsp;let { c, methodsC } = useC();
 &nbsp; &nbsp; &nbsp; &nbsp;return {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;a,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;methodsA,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;b,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;methodsB,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;methodsC
 &nbsp; &nbsp; &nbsp; }
 &nbsp; }
}
 Copy code