Vue3的setup语法糖使用

setup语法糖（在书写script标签后面加上setup修饰） 

<script setup></script>

作用：

1. 自动注册子组件

//原写法：先引入，后component声明，再调用 import xxx from './xxx.vue' <script setup>export default{ components:{ xxx }  }</script> //语法糖：直接引入 <script setup> import xxx from './xxx.vue' </script>

2. 属性和方法无需返回

//原写法：定义属性方法，后return返回 <script setup>export default{ setup(){ …  return {…} } } </script> //语法糖：直接定义属性方法 <script setup> … </script>

3. 支持props、emit和context（以下为子组件的接收方法）

//原写法：利用setup参数接收 <script>   export default{     emits: ['xx'] ,   //接收自定义事件     props: { xxx:type } ,    //接收父组件传递的信息，注意：需标注其数据类型     setup(props,context){     const yyy=()=>{ context.emit('xx'),data }         return { props,yyy } } } </script>   //语法糖： <script setup> import { useContext,defineProps,defineEmit } from 'vue' const emit = defineEmit(['xx']) const ctx = useContext() const props = defineProps({ xxx:type })  //为proxy代理对象 const  { xxx } = toRefs(props) const yyy=()=>{ emit('xx',data) } </script>

注意：

• Vue3的props接收时需规定数据类型，若父元素数据类型出错，则报错
• 需注意API的引入顺序，useContext放最前面

4. vuex使用

<script setup> import { useStore } from 'vuex' const store = new useStore() … </script>

在store文件在，使用createStore创建store实例

5.使用ref获取DOM元素        

获取DOM元素，只需定义与ref同名的数据即可，需搭配nextTick或onMounted阶段使用

<div ref="xxx"></div>   <script setup> import { ref,nextTick,onMounted } from 'vue' let xxx=ref()           //不可写在函数内，否则响应式失效 console.log(xxx.value)  //此时获取为undefined nextTick(()=>{ console.log(box.value) }) //<div>1</div> onMounted(()=>{ console.log(box.value) }) </script