Vue生命周期与setup深入详解

<script lang="ts">
import { onMounted } from 'vue'
export default {
   setup() {
     onMounted(() => {
    	console.log('mounted')
	})
	onMounted(() => {
	    console.log('mounted two')
	})
  }
}
</script>

<script setup lang="ts">
import { onMounted } from 'vue'
onMounted(() => {
    console.log('mounted')
})
onMounted(() => {
    console.log('mounted two')
})
</script>
<style scoped>
</style>

export default {
  props: {
    title: String
  },
  setup(props) {
  	// 注意这里不要解构props，这样会使解构出来的变量失去响应性。如果一定要解构需要使用响应式api转发下。
    console.log(props.title)
  }
}

export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)
    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)
    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)
    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

export default {
  setup(props, { expose }) {
    // 让组件实例处于 “关闭状态”
    // 即不向父组件暴露任何东西
    expose()
    const publicCount = ref(0)
    const privateCount = ref(0)
    // 有选择地暴露局部状态
    expose({ count: publicCount })
  }
}

import { h, ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}

import { h, ref } from 'vue'
export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value
    expose({
      increment
    })
    return () => h('div', count.value)
  }
}