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... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

相关推荐
前端小巷子几秒前
浏览器的渲染流程:从 HTML 到屏幕显示
前端·javascript·面试
EndingCoder9 分钟前
状态管理详解:Context API、Redux、Recoil 和 Zustand 在 React Native 中的应用
javascript·react native·react.js
sunbyte15 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | EventKey Codes(键盘码)
前端·javascript·css·vue.js·vue
前端Hardy1 小时前
实测!Three.js 实现动态粒子螺旋与星环环绕动画
前端·javascript
lens941 小时前
Oxlint v1.0.0 发布:ESLint 的性能革命,快 50~100 倍!
前端·javascript
DarkLONGLOVE1 小时前
一键锁死网页内容!这个JS函数让你的原创无法被复制!
前端·javascript
不会飞的鲨鱼2 小时前
FastMoss 国际电商Tiktok数据分析 JS 逆向 | MD5加密
javascript·python·数据挖掘·数据分析
怪大叔95272 小时前
vue组件之远程组件
前端·javascript·vue.js
邢同学爱折腾2 小时前
长安的荔枝小说阅读器——程序员的浪漫与效率
前端·javascript
Hilaku2 小时前
用好了 watchEffect 才算会用 Vue3 —— 那些让人误解的响应式陷阱
前端·javascript·vue.js