前言:
而今朋友们对“ajaxsetup”大约比较看重,兄弟们都需要学习一些“ajaxsetup”的相关资讯。那么小编在网络上收集了一些关于“ajaxsetup””的相关内容,希望各位老铁们能喜欢,同学们快快来学习一下吧!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.jsimport { 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
标签: #ajaxsetup