VUE3 (eight) setup and ref functions

Setup is a new component option provided for us in VUE3.0.

Create the component instance, then initialize the props, and then call the setup function. From the perspective of the life cycle hook, it is called before the beforecreate.

setup() is a function with return and variables defined in the return function, which are exposed to the template.

One: setup

1: Setup can replace the data and method functions in VUE2.

(1): Use VITE to create an empty project, the default will give us a helloworld component, we use this component for testing.

To build the project, please move to " VUE3 (1) Installation + Create a Project with Vite "

On the code, here is probably a new way of writing VUE3

Helloworld.vue

<template>
  <h1>{
    
    {
    
     msg }}</h1>
  <button @click="count++">count is: {
    
    {
    
     count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <button @click="clickMe()">点我弹窗</button>
</template>
 
<script lang='ts'>
import {
    
    
    ref,
} from "vue";
export default {
    
    
  name: 'HelloWorld',
  props: {
    
    
    msg: String
  },
  // 使用setup 代替 data
  // 因为我这里使用的是typescript，因此需要给参数指定类型
  setup(props:any,context:any){
    
    
    let count = ref(0); 
    const clickMe = () => {
    
    
      // 使用ref关键字绑定的变量，赋值 的时候必须使用.value
      count.value++;
      alert('hi');
    }
    return {
    
    
      count,
      clickMe
    }
  },//*/
 
  // 这是VUE2.0的写法，data与methods
  /*data() {
    
    
    return {
    
    
      count: 0
    }
  },
  methods:{
    
    
    clickMe(){
    
    
      alert('hi');
    }
  }//*/
}
</script>

2: Two parameters of setup (prpos, context)

Regarding the setup parameters, the official document has a detailed introduction. For details, please refer to:

https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#Parameter

（1） ： prpos

The props in the setup function are reactive. When a new prop is passed in, it will be updated.

This is the parameter passed by the parent component to the child component. For details, please refer to the code above.

Seeing this, you can actually stop and build a project yourself to try it out.

（2）：context

The name of this parameter is not fixed, it can be called anything.

The second parameter passed to the setup function is the context. The context is a normal JavaScript object, which exposes the properties of three components:

export default {
    
    
  setup(props, context) {
    
    
    // Attribute (非响应式对象)
    console.log(context.attrs)
 
    // 插槽 (非响应式对象)
    console.log(context.slots)
 
    // 触发事件 (方法)
    console.log(context.emit)
  }
}

Here I only use emit (trigger event), this can be used to pass the value of the child component to the parent component. Specifically, we will talk about the part of the component later.

3: There is no way to access this in setup.

This is not available in the setup, the method and the declaration cycle can be written in the setup, if the variable in the setup is accessed in the method, the direct variable name can be used. The method name and variable name must be returned in setup before they can be executed normally.

4: setup() is a function, with return, the variables defined in the return function are exposed to the template.

For details, please refer to the sample code in the first part

Two: ref keyword

In the setup function, you can use the ref function to create a responsive data. When the data changes, Vue will automatically update the UI

It must be noted that what ref creates is a responsive data. This is very flexible in VUE3.0, and it can be played almost anywhere. I will talk about the details later, here is a brief introduction to the basic usage.

1: Introduce ref

import {
    
    
    ref,
} from "vue";

2: Use attention points

The value of ref used in the VUE template does not need to be obtained by value (Vue will automatically add .value to the value of ref)

The value of ref used in js must be obtained using .value

The above code achieves the effect:

Have a good suggestion, please enter your comment below.

Welcome to personal blog
https://guanchao.site

Welcome to the Mini Program: