百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

vue3 script setup 语法糖

ztj100 2024-11-26 11:15 44 浏览 0 评论

Loong Panda


<script setup> 是在单文件组件 (SFC) 中使用 组合式 API 的编译时语法糖。相比于普通的 <script> 语法,它有更简洁的代码,由于处于同一作用域,因此的运行时性能会更好。


响应式变量

<script setup>
	// vue3和vue2最大的区别就是响应式变量
  import { ref, toRef, toRefs, reactive, onMounted } from 'vue';
  const val1 = ref(0); // 创建任意数据类型的响应式变量
  const val2 = reactive({ num: 1 }); // 创建引用类型的响应式对象
  const { newVal } = toRefs(val2); // 将响应式对象转换为普通对象
  const val3 = toRef(val2, 'num'); // 将响应式对象num2中num字段创建为一个新的响应式变量
  onMounted(() => {
    val1.value = Date.now(); // 修改ref创建的变量
    val2.num = Date.now() // 修改reactive创建的变量
  });
</script>

函数

<template>
	<el-button size="small" @click="onClick">点击</el-button>
</template>
<script setup>
  
  function onClick() {
    // ....
  };
</script>

计算属性(computed)

<script setup>
  import { computed, ref } from 'vue'
  const num = ref(1)
  const calc = computed(() => {
  	return num.value * 2
  })
</script>

观察属性(watch)

<script setup>
  import { watch, reactive } from 'vue'
  const obj = reactive({
  	count: 1
  })
  // 监听count
  watch(
  	() => obj.count,
  	(newVal, oldVal) => {
      
    },
    {
      immediate: true, // 立即执行
      deep: true // 深度监听
    }
  )
</script>

父子组件传值 props 和 emit


子组件
  
<template>
  <span>{{ dataId }}</span> // 展示父级传递过来的参数
  <el-button size="small" @click="onUpdate">更新</el-button>
</template>
<script setup>

  // 声明 props
  const props = defineProps({
    dataId: {
      type: String,
      default: ''
    }
  })
  // 声明 emit 事件,事先需要声明好事件名,如on-update
  const emit = defineEmits(['on-update'])

  const onUpdate = () => {
    // 执行 on-update 事件
    emit('on-update', Date.now())
  }
</script>

父组件

<template>
	<child :data-id="chidDataId" @on-update="onUp"></child>
</template>
<script setup>
  import child from './child.vue';
  import { ref } from 'vue';
  const chidDataId = ref(100)

  // 接收子组件触发的方法
  function onUp(name) {
  	//
  }
</script>

七、双向绑定 v-model

子组件

<template>

<span @click="changeInfo">我叫{{ modelValue }},今年{{ age }}岁</span>

</template>

<script setup>

// import { defineEmits, defineProps } from 'vue'

// defineEmits和defineProps在<script setup>中自动可用,无需导入

// 需在.eslintrc.js文件中【globals】下配置【defineEmits: true】、【defineProps: true】

defineProps({

modelValue: String,

age: Number

})

const emit = defineEmits(['update:modelValue', 'update:age'])

const changeInfo = () => {

// 触发父组件值更新

emit('update:modelValue', 'Tom')

emit('update:age', 30)

}

</script>

父组件

<template>

// v-model:modelValue简写为v-model

// 可绑定多个v-model

<child v-model="state.name" v-model:age="state.age"></child>

</template>

<script setup>

import child from './child.vue'

import { reactive } from 'vue'

const state = reactive({

name: 'Jerry',

age: 20

})

</script>


路由

<script setup>
  import { useRoute, useRouter } from 'vue-router'

  const route = useRoute();
  const router = useRouter();

	// 路由跳转
  router.push('/home')
  
	// 获取路由实例,及路由信息
  console.log(route.query)
  
</script>


路由守卫

<script setup>
  import { onBeforeRouteLeave, onBeforeRouteEnter } from 'vue-router'

  onBeforeRouteLeave((to, from, next) => {
    next()
  })
  onBeforeRouteEnter((to, from, next) => {
  	next()
  })
</script>


全局状态管理器

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

  // 获取state
  store.state.xxx
  // 触发mutations的方法
  store.commit('fnName')
  // 触发actions的方法
  store.dispatch('fnName')
  // 获取Getters
  store.getters.xxx
</script>

原型挂载/绑定与使用

----绑定--------------------------------------------------------------------
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 获取原型
const prototype = app.config.globalProperties
// 绑定参数
prototype.$ajax = ajax

----使用--------------------------------------------------------------------

<script setup>
  import { getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()

  proxy.$ajax(url, {})
    .then(res => {
  		// .....
  	})
</script>

生命周期

vue3和vu2周期最大的区别是vue3用setup替代了beforeCreate 和 created,通俗的说fa就是说原来在beforeCreate 和 created写的代放在码在setup里就行了。其他的周期使用前缀“on”,

比如: onMounted(() => {})


选项式 API

Hook inside setup

beforeCreate

Not needed*

created

Not needed*

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeUnmount

onBeforeUnmount

unmounted

onUnmounted

errorCaptured

onErrorCaptured

renderTracked

onRenderTracked

renderTriggered

onRenderTriggered

activated

onActivated

deactivated

onDeactivated

相关推荐

Java网络编程(JAVA网络编程技术)

网络编程三要素1.IP地址:表示设备在网络中的地址,是网络中设备的唯一标识2.端口号:应用程序在设备中唯一的标识3.协议:连接和数据在网络中传输的规则。InetAddress类Java中也有一个...

字节Java全能手册火了!多线程/网络/性能调优/框架啥都有

前言在这个技术不断更新的年代,跟不上时代变化的速度就会被刷掉,特别是咱们程序员这一群体,技术不断更新的同时也要同时进步,不然长江后浪推前浪,前浪......一个程序员从一个什么都不懂的小白在学到有一定...

一分钟了解java网络编程(java基础网络编程)

一、OSI七层网络模型应用层:Http协议、电子邮件传输、文件服务器等;表示层:数据转换,解决不同系统的兼容问题(跨语言);会话层:建立与应用程序的会话连接;传输层:提供了端口号和传输协议(TPC/U...

Java编程-高并发情况下接口性能优化实践-提升吞吐量TPS

记得前段时间工作中接到一个任务是优化一个下单接口的性能提高接口的吞吐量TPS,前期通过arthas工具跟踪接口的具体方法调用链路及耗时,发现了影响此接口的性能瓶颈主要是加锁的方式,后来变更了锁的方式...

socket 断线重连和心跳机制如何实现?

一、socket概念1.套接字(socket)是网络通信的基石,是支持TCP/IP协议的网络通信的基本操作单元。它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,...

迅速了解-Java网络编程(java基础网络编程)

Java网络编程在JavaSE阶段,我们学习了I/O流,既然I/O流如此强大,那么能否跨越不同的主机进行I/O操作呢?这就要提到Java的网络编程了。...

Java网络编程详解(java 网络编程)

网络编程基础知识最!最!最!重要网络编程基础概念网络编程不等于网站编程,网络编程即使用套接字(socket)来达到各进程间的通信,现在一般称为TCP/IP编程;网络编程分为服务端和客户端。服务端就相当...

「开源推荐」高性能网络通信框架 HP-Socket v5.7.2

简介HP-Socket是一套通用的高性能TCP/UDP/HTTP通信框架,包含服务端组件、客户端组件和Agent组件,广泛适用于各种不同应用场景的TCP/UDP/HTTP通信系统,提供C/...

Java网络编程从入门到精通:打造属于你的网络世界

Java网络编程从入门到精通:打造属于你的网络世界在当今这个信息爆炸的时代,网络编程已经成为程序员必不可少的一项技能。而Java作为一种功能强大且广泛使用的编程语言,在网络编程领域也有着举足轻重的地位...

5分钟读懂C#中TcpClient、TcpListener和Socket三个类的角色

一、核心功能与定位1.Socket类:底层通信的基石-位于System.Net.Sockets命名空间,提供对网络协议栈的直接操作,支持TCP、UDP等多种协议。-手动管理连接细节:需...

(三)谈谈 IO 模型(Socket 编程篇)

快过年啦,估计很多朋友已在摸鱼的路上。而我为了兄弟们年后的追逐,却在苦苦寻觅、规划,导致文章更新晚了些,各位猿粉谅解。上期分享,我们结合新春送祝福的场景,通过一坨坨的代码让BIO、NIO编程过程呈...

大数据编程入门:Java网络编程(大数据 编程)

如果想要编写出一个可以运行在多个设备上的程序,应该怎么做呢?答案是网络编程,今天小编将为大家带来大数据编程入门:Java网络编程。一、网络编程概念网络编程是指编写在通过网络连接的多个设备(计算机)上运...

基于JAVA的社交聊天室(java聊天设计与实现)

基于Java的社交聊天室一、前言随着互联网技术的迅速发展,实时通信和在线社交已成为人们日常生活的重要组成部分。基于Java的社交聊天室系统,凭借其跨平台、高性能和安全性等特点,为用户提供了一个集中、开...

java-socket长连接demo体验(java socket长连接)

作者:DavidDing来源:https://zhuanlan.zhihu.com/p/56135195一、前言最近公司在预研设备app端与服务端的交互方案,主要方案有:服务端和app端通过阿里i...

JAVA数据库编程(java数据库编程指南)

预计更新###第一节:什么是JAVA-JAVA的背景和历史-JAVA的特点和应用领域-如何安装和配置JAVA开发环境###第二节:JAVA基础语法-JAVA的基本数据类型和变量-运算符和...

取消回复欢迎 发表评论: