Vue setup函数初识__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

setup函数

setup是Composition API 表演的舞台

从参数说起,setup函数接受两个参数props和context。

setup(props,context){
}

setup第一个参数props

正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 props 时，它将被更新。但是props是响应式的,你们不能使用ES解构,他会消除props的响应式。如果需要解构props,可以在setup函数中使用toRefs来完成解构。

setup(props,context){
 const {count} = toRefs(props);// 这样props不会失去响应式
}

setup第二个参数context

context是一个普通的JavaScript对象,它暴露组件的三个 property,context是非响应式对象,所以可以对它进行安全的解构。

 setup(props, { attrs , slots , emit }) {
    // Attribute (非响应式对象)
    console.log(attrs)

    // 插槽 (非响应式对象)
    console.log(slots)

    // 触发事件 (方法)
    console.log(emit)
  }

访问组件的 property

执行 setup 时，组件实例尚未被创建。因此，你只能访问以下 property：props,attrs,slots,emit。

setup的返回值

setup函数可以有两种返回值,一种是返回一个对象,另外一种是返回一个渲染函数。

//第一种 
import {ref} from 'vue'
  export default {
    setup(){
    const count = ref(0)
    return {
      count
     }
    }
}

// 第二种
import {ref,h} from 'vue'
epxort default {
 setup(){
 // 这里返回的渲染函数会覆盖template所表示的内容。
  return () => h('h1','hello,vue3.0')
 }
}

setup的注意点

setup函数里面的this是undefined。
setup函数不能使用ES6的async修饰符。
setup函数里面定义变量名如果和vue2.0冲突了,会以vue3.0为主。