setup.png

setup2.png

ref.png

reactive+computed+watch.png

parent component

<template>
  <h1>{{num}}</h1>
  <child :msg="msg" msg2="welcome to vue+ts" @show="show"></child>
  <hr>
  <button @click="updateCount">按鈕</button>
  <h1>{{count}}</h1>
  <hr>
  <input type="text" placeholder="請(qǐng)輸入內(nèi)容" ref="inputRef">
  <hr>
  <h3>姓名： {{user.name}}</h3>
  <h3>年齡： {{user.age}}</h3>
  <h3>books: {{user.books}}</h3>
  <button @click="updateUser">更新</button>
  <h2>{{fullName1}}</h2>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, computed, watch, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
import Child from './Child.vue'

export default defineComponent({
  beforeCreate () {
    console.log('beforeCreate執(zhí)行了')
  },
  setup () {
    console.log('setup執(zhí)行了')
    const num = 18
    const msg = ref('hello, vue3')
    const show = () => {
      console.log('name:', 'hua')
    }
    const count = ref(0)
    function updateCount () {
      count.value++
    }
    const inputRef = ref<HTMLElement|null>(null)
    onBeforeMount(() => {
      console.log('--onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted執(zhí)行了')
      console.log(inputRef)
      inputRef.value && inputRef.value.focus()
    })
    onBeforeUpdate(() => {
      console.log('--onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('--onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('--onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('--onUnmounted')
    })
    const user = reactive({
      name: 'hello, flower',
      age: 18,
      books: ['紅寶書', '設(shè)計(jì)模式', '算法與數(shù)據(jù)結(jié)構(gòu)'],
      firstName: '張',
      lastName: 'Susan'
    })
    const updateUser = () => {
      user.name = '小紅'
      user.age += 2
      user.books[0] = 'javascript'
    }
    const fullName1 = computed(() => {
      return user.firstName + user.lastName
    })
    const fullName2 = computed({
      get () {
        return user.firstName + '_' + user.lastName
      },
      set (val: string) {
        const names = val.split('_')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })
    const fullName3 = ref('')
    watch(
      user,
      ({ firstName, lastName }) => {
        fullName3.value = firstName + '_' + lastName
      },
      { immediate: true, deep: true }
    )
    return {
      num,
      msg,
      show,
      count,
      updateCount,
      inputRef,
      user,
      updateUser,
      fullName1,
      fullName2
    }
  },
  components: {
    Child
  }
})
</script>
<style scoped>

</style>

child component

<template>
  <div @click="emitFn">我是子組件{{msg}}</div>
</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Child',
  props: ['msg'],
  setup (props, { attrs, emit }) {
    console.log(props)// {msg:'hello, vue3'}
    console.log(attrs)// {msg2:'welcome to vue+ts', __vInternal: 1}
    const emitFn = () => {
      emit('show')
    }
    return {
      emitFn
    }
  }
})
</script>
<style scoped>

</style>
https://juejin.cn/post/6977004323742220319

script setup語(yǔ)法糖

<script setup>
import { defineComponent, defineProps, useAttrs, useSlots, defineExpose } from 'vue'
import Child from './Child.vue'
// 通過(guò)defineProps指定當(dāng)前props類型隐解，獲得上下文的props對(duì)象
const props = defineProps({
  title: String
})
// 使用defineEmit定義當(dāng)前組件含有的事件，并通過(guò)返回的上下午去執(zhí)行emit

// 可以通過(guò)useContext從上下文中獲取slots和attrs,不過(guò)提案在正式通過(guò)后帕涌，廢除了這個(gè)語(yǔ)法
// 被拆成了useAttrs和useSlots
const emit = defineEmits(['change', 'delete'])
const attrs = useAttrs()
const slots = useSlots()

// defineExpose API
// 傳統(tǒng)的寫法续徽，我們可以在父組件中，通過(guò)ref實(shí)例的方式去訪問(wèn)子組件的內(nèi)容钦扭，
// 但在script setup中，該方法就不能用了其弊，setup相當(dāng)于是一個(gè)閉包，除了內(nèi)部的template模板
// 誰(shuí)都不能訪問(wèn)內(nèi)部的數(shù)據(jù)和方法
const a = 1
const b = 2
defineExpose({
  a,
  ba
})
</script>