微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

快来免费体验ChatGpt plus版本的，我们出的钱 体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器, ChatGpt4 已上线 https://cube.waixingyun.cn/home

方法

<script setup>
function getParam(param) {return param;
}
</script><template>{{ getParam(1) }}
</template>

响应式数据声明

import { ref, reactive } from 'vue'
const enabled = ref(true)
const object = reactive({ variable: false })

组件声明

import { defineAsyncComponent } from "vue";
import TheComponent from "./components/TheComponent.vue";
const AsyncComponent = defineAsyncComponent(() =>import("./components/AsyncComponent.vue")
);

观察者

import { watch, ref } from "vue";
const counter = ref(0);
watch(counter, () => {console.log("Counter value changed");
});

生命周期钩子

import { onMounted } from "vue";
console.log("Equivalent to created hook");
onMounted(() => {console.log("Mounted hook called");
});

定义 emits

const emit = defineEmits(["event-name"]);
function emitEvent() {emit("event-name");
}

定义属性

defineProps({elements: Array,counter: {type: Number,default: 0,},
});

额外资源

• Vue 3 official docs
• Vue 3 official script setup docs
• The 101 guide to Script Setup in Vue 3
• Vue.js Script Setup in Less than 5 Minutes
  * Refactoring a Component from Vue 2 Options API to Vue 3 Composition API
  

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。