Setup是VUE3.0中为我们新提供的的组件选项。

创建组件实例,然后初始化props,紧接着就调用setup函数,从生命周期钩子的视角来看,他在beforecreate之前调用。

setup()是函数,具有return,return函数中定义的变量,把其暴露给模板。

一:setup

1:Setup可以替代VUE2中的data和method函数。

(1):使用VITE创建一个空项目,默认会给我们一个helloworld组件,我们使用这个组件做测试。

项目搭建,请移步《VUE3(一)安装+使用vite创建一个项目

上代码,这里大概展示一下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:setup的两个参数(prpos,context)

关于setup的参数,官方文档有详尽的介绍,具体,请参照:

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

(1):prpos

setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。

这个就是父组件传入子组件的参数。具体,请参照上方的代码。

看到这里,其实你可以停下来,自己搭建一个项目试一下。

(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)
  }
}

这里我只用到了emit(触发事件),这个可以用作将子组件的值传递给父组件。具体我们之后组件那部分再说。

3:setup中没有办法访问到this。

this在setup中不可用,方法和声明周期都可以写在setup中,如果在方法中访问setup中的变量时,直接变量名就可以使用。方法名和变量名要在setup中return出去才可以正常执行。

4:setup()是函数,具有return,return函数中定义的变量,把其暴露给模板。

具体,请参见第一部分的示例代码

二:ref关键字

在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI

一定要注意,ref创建的是一个响应式数据。这个在VUE3.0中非常灵活,几乎是怎么玩都行的。具体后边还会说到,这里大概说一下基本用法。

1:引入ref
import {
    ref,
} from "vue";
2:使用注意点

在 VUE 的模板中使用 ref 的值不需要通过 value 获取 (Vue 会通过自动给 ref 的值加上 .value)

在 js 中使用 ref 的值必须使用 .value 获取

上方代码实现效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZmHK2vyX-1614561734866)(https://resource.guanchao.site/ueditor/php/upload/image/20210210/1612948504279759.gif#pic_center)]

有好的建议,请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序:

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐