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>
