关于vue.js:vue3的小知识

一、组合式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