vue3的小知识

Posted 2021-09-04 羽玉

一、组合式Api

1、简介

组合式Api需要有个实际使用它的地方，这个位置称为setup。

2、组件代码结构

export default {
  components: { RepositoriesFilters },
  props: {
    user: { 
      type: String
    }
  },
  data () {
    return {
      test: \'\'
    }
  },
  computed: {},
  watch: {},
  methods: {},
  mounted() {},
  created() {}

二、setup

1、参数

setup接收两个参数props和context

props

setup函数中的第一个参数props，props是响应式的，每当传入新的props，都将会被更新

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

ps：props是响应式的，不能使用es6解构赋值

如果需要结构props的话，可以使用toRefs来操作

import {toRefs} from \'vue\'
export default {
  props: {
    title: String
  },
  setup(props) {
    const {title} = toRefs(props)
    console.log(title.value)
  }
}

context

context是第二个参数，非响应式的，暴露三个属性

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

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

    // 触发事件 (方法)
    console.log(context.emit)
    
  }
 // 解构
 setup(props, {attrs，slots，emit}) {}
}

访问组件property

setup执行的时候，组件还未被创建，因此只能访问props、attrs、slots、emit
不能访问data、computed、methods