Vue3渲染&事件处理
官网：https://cn.vuejs.org/guide/essentials/conditional.html
条件渲染
v-if和v-show
不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。
v-show 不支持在 元素上使用，也不能和 v-else 搭配使用。
总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。
当
v-if和v-for同时存在于一个元素上的时候，v-if会首先被执行。
列表渲染
可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法
<div v-for="item of items">div>
v-for与对象
你也可以使用v-for来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用Object.keys()的返回值来决定。
value — key — index
const myObject = reactive({
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
})
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。
key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。
数组变化侦测
Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本
- return numbers.reverse()
+ return [...numbers].reverse()
事件处理
-
方法与内联事件判断：模板编译器会通过检查
v-on的值是否是合法的JavaScript标识符或属性访问路径来断定是何种形式的事件处理器。举例来说，foo、foo.bar和foo['bar']会被视为方法事件处理器，而foo()和count++会被视为内联事件处理器。 -
在内联事件处理器中访问事件参数
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
button>
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
Submit
button>
事件修饰符
<a @click.stop="doThis">a>
<form @submit.prevent="onSubmit">form>
<a @click.stop.prevent="doThat">a>
<form @submit.prevent>form>
<div @click.self="doThat">...div>
触发与监听事件
使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：
<button @click="$emit('someEvent')">click mebutton>
父组件可以通过 v-on (缩写为 @) 来监听事件：
<MyComponent @some-event="callback" />
声明触发的事件
我们在 中使用的 $emit 方法不能在组件的