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="请输入内容" 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执行了')
  },
  setup () {
    console.log('setup执行了')
    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执行了')
      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: ['红宝书', '设计模式', '算法与数据结构'],
      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语法糖

<script setup>
import { defineComponent, defineProps, useAttrs, useSlots, defineExpose } from 'vue'
import Child from './Child.vue'
// 通过defineProps指定当前props类型，获得上下文的props对象
const props = defineProps({
  title: String
})
// 使用defineEmit定义当前组件含有的事件，并通过返回的上下午去执行emit

// 可以通过useContext从上下文中获取slots和attrs,不过提案在正式通过后，废除了这个语法
// 被拆成了useAttrs和useSlots
const emit = defineEmits(['change', 'delete'])
const attrs = useAttrs()
const slots = useSlots()

// defineExpose API
// 传统的写法，我们可以在父组件中，通过ref实例的方式去访问子组件的内容，
// 但在script setup中，该方法就不能用了，setup相当于是一个闭包，除了内部的template模板
// 谁都不能访问内部的数据和方法
const a = 1
const b = 2
defineExpose({
  a,
  ba
})
</script>