关于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