Vue3 Script Setup 速查表

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

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

方法

xml 复制代码
<script setup>
function getParam(param) {
  return param;
}
</script>

<template>
  {{ getParam(1) }}
</template>

响应式数据声明

csharp 复制代码
import { ref, reactive } from 'vue'
const enabled = ref(true)
const object = reactive({ variable: false })

组件声明

javascript 复制代码
import { defineAsyncComponent } from "vue";
import TheComponent from "./components/TheComponent.vue";
const AsyncComponent = defineAsyncComponent(() =>
  import("./components/AsyncComponent.vue")
);

观察者

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

生命周期钩子

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

定义 emits

scss 复制代码
const emit = defineEmits(["event-name"]);
function emitEvent() {
  emit("event-name");
}

定义属性

php 复制代码
defineProps({
  elements: Array,
  counter: {
    type: Number,
    default: 0,
  },
});

额外资源

交流

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

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

相关推荐
薄雾晚晴10 分钟前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
kymjs张涛32 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
古夕35 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部35 分钟前
前端-业务-架构
前端·javascript·代码规范
华仔啊36 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
小高00737 分钟前
💥💥💥前端“隐藏神技”:15 个高效却鲜为人知的 Web API 大起底
前端·javascript
flyliu38 分钟前
再再次去搞懂事件循环
前端·javascript
XiaoMu_0011 小时前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静1 小时前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia1 小时前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈