1. Vue3基础语法

<script setup>
import { ref,computed } from 'vue'// 定义响应式的变量
const count = ref(0)
const author = ref({name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']
})
//定义props
const props = defineProps({foo: String,fruit: {type: String,default: "apple"}
})
//定义方法
const btnClick=()=>{author.value.books.pop()
}
// 定义计算属性 ref 计算属性缓存
const publishedBooksMessage = computed(() => {return author.value.books.length > 0 ? 'Yes' : 'No'
})
</script>

2. 生命周期函数

<script setup>
import { onMounted } from 'vue'
// 在组件完成初始渲染并创建 DOM 节点后运行代码
onMounted(() => {console.log(`the component is now mounted.`)
})</script>

3. 监听器Watch

在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数。

• 深层监听器
  • 直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发，传入deep: true
• 即时回调监听器
  • 希望在创建侦听器时，立即执行一遍回调，传入 immediate: true
• 一次性监听器
  • 希望回调只在源变化时触发一次，请使用 once: true 选项。

4.模板引用

为了通过组合式 API 获得该模板引用，我们需要声明一个匹配模板 ref attribute 值的 ref：

<script setup>
import { ref, onMounted } from 'vue'// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)onMounted(() => {input.value.focus()
})
</script><template><input ref="input" />
</template>

5.props单向数据流

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。
每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。

想要更改一个 prop 的需求通常来源于以下两种场景：

• prop 被用于传入初始值；而子组件想在之后将其作为一个局部数据属性。在这种情况下，最好是新定义一个局部数据属性，从 props 上获取初始值即可：

const props = defineProps(['initialCounter'])
// 计数器只是将 props.initialCounter 作为初始值
// 像下面这样做就使 prop 和后续更新无关了
const counter = ref(props.initialCounter)

• 需要对传入的 prop 值做进一步的转换。在这种情况中，最好是基于该 prop 值定义一个计算属性：

const props = defineProps(['size'])
// 该 prop 变更时计算属性也会自动更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())

6.如何编写抛出事件

//写在template中
<button @click="$emit('increaseBy', 1)">Increase by 1
</button>

<script setup>
const emit = defineEmits(['inFocus', 'submit'])
// 放在方法中
function buttonClick() {emit('submit')
}
</script>

父组件可以通过 v-on (缩写为 @) 来监听事件：

<MyComponent @some-event="callback" />