setup语法糖
最大好处就是所有声明部分皆可直接使用，无需return出去
注意：部分功能还不完善，如：name、render还需要单独加入script标签按compositionAPI方式编写
// setup 下还可以附加
setup语法糖独有
defineProps defineEmits与组件应用
// 子组件// 父组件{{ msg }}
defineExpose与组件应用
立即学习“前端免费学习笔记（深入）”；
// 子组件123// 父组件
自定义指令相关
created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里。
beforeUpdate：在更新包含组件的 VNode 之前调用。
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。
import { createApp } from 'vue';
const Test = createApp();
Test.directive('my-directive', {
// 在绑定元素的 attribute 前
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {
// 下面会介绍各个参数的细节
console.log('创建了')
},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) { },
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) { },
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) { },
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) { },
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) { },
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) { }
})
export default Test.directive('my-directive');el：指令绑定到的元素。这可以用于直接操作 DOM。binding：一个对象，包含以下属性。value：传递给指令的值。例如在v-my-directive="1 + 1"中，值是2。oldValue：之前的值，仅在beforeUpdate和updated中可用。无论值是否更改，它都可用。arg：传递给指令的参数 (如果有的话)。例如在v-my-directive:foo中，参数是"foo"。modifiers：一个包含修饰符的对象 (如果有的话)。例如在v-my-directive.foo.bar中，修饰符对象是{ foo: true, bar: true }。instance：使用该指令的组件实例。dir：指令的定义对象。vnode：代表绑定元素的底层 VNode。prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在beforeUpdate和updated钩子中可用。
应用
//setup 外部调用 //或者 setup内部
对象字面量
app.directive('demo', (el, binding) => {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
}) 
