setup语法糖 

最大好处就是所有声明部分皆可直接使用，无需return出去

注意：部分功能还不完善，如：name、render还需要单独加入script标签按compositionAPI方式编写

// setup 下还可以附加<script>

setup语法糖独有
 

<script setup>
import { ref ,reactive,toRefs } from 'vue'
const a = 1;
const num = ref(99)  // 基本数据类型
const user = reactive({ // 引用数据类型age:11
})
// 解构能获取响应式属性 {}解构 toRefs保留响应式
const { age } = toRefs(user)
// 导出
defineExpose({a
})
// props
const props = defineProps({foo: String
})
// 事件
const emit = defineEmits(['change', 'delete'])
// 自定义指令
const vMyDirective = {created(el, binding, vnode, prevVnode) {// 下面会介绍各个参数的细节console.log('创建了')},
}
</script>

defineProps defineEmits与组件应用

// 子组件
<template><div class="hello"><h1>{{ msg }}</h1><slot name="btn"></slot><button @click="chickMe"></button></div>
</template><script setup>
import { useSlots, useAttrs } from 'vue';const slots = useSlots()
const attrs = useAttrs()
const props = defineProps({msg: String
})
const emit = defineEmits(['change'])
console.log(slots, attrs)
const chickMe = ()=>{emit('change','abc')
}</script>// 父组件
<template><div class="home" ><HelloWorld msg="hello" atr="attrs" @change="changeP "><template #btn><div>我是 btn：{{ obj.text }}</div></template></HelloWorld></div>
</template><script setup>
import HelloWorld from '../components/HelloWorld.vue';
import { ref ,reactive,toRefs } from 'vue'const obj = reactive({id: 0,text: '小红'})const changeP=(e)=>{console.log(e)}
</script> 
、

defineExpose与组件应用

// 子组件
<template><div class="hello">123</div>
</template><script setup>const testPose =()=>{console.log('子组件暴露方法')
}
defineExpose({testPose
})
</script>// 父组件
<template><div class="home" v-test><HelloWorld  ref="helloSon"></HelloWorld><button @click="testEpose"></button></div>
</template>
<script setup>
import HelloWorld from '../components/HelloWorld.vue';
import { ref } from 'vue'
// setup函数的话可以从context上查找
const helloSon = ref(null);
const testEpose = () => {helloSon.value.testPose();
}
</script>

自定义指令相关

• 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 钩子中可用。

应用

<template><div class="home" v-test></div>
</template>
//setup 外部调用
<script>
// 指令必须 vXxx 这样书写
import vTest from './TestDirective'
export default defineComponent({directives: {test:vTest,},setup(props) {// console.log('Test',vTest)return {};} 
})
</script>
//或者 setup内部
<script setup>
import vTest from './TestDirective'
</script>

 对象字面量

<div v-demo="{ color: 'white', text: 'hello!' }"></div>app.directive('demo', (el, binding) => {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!"
})