vue3.2 setup语法糖
<script setup></script> 是在单文件组件 (sfc) 中使用组合式 api 的编译时语法糖
解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在<template></template>使用的问题
1.<script setup>在<template/>使用</script>
<script setup></script>中无需return 声明的变量、函数以及import引入的内容，即可在<template></template>使用
<script setup></script>语法糖
<script setup>
//import引入的内容
import { getToday } from './utils'
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
</script>
//在template中直接使用声明的变量、函数以及import引入的内容
<template>
<div @click="log">{{ msg }}</div>
<p>{{getToday()}}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</template>标准组件<script></script> 需要写setup函数并繁琐retrun
<script>
//import引入的内容
import { getToday } from './utils'
export default{
setup(){
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
//想在tempate里面使用需要在setup内return暴露出来
return{
msg,
log,
getToday
}
}
}
</script>
<template>
<div @click="log">{{ msg }}</div>
<p>{{getToday()}}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</template>小结：<script setup></script>语法糖里面的代码会被编译成组件 setup() 函数的内容，不需要通过return暴露 声明的变量、函数以及import引入的内容，即可在<template></template>使用，并且不需要写export default{}
<script setup></script>语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script></script> 只在组件被首次引入的时候执行一次不同，<script setup></script> 中的代码会在每次组件实例被创建的时候执行
<script>
console.log('script');//多次实例组件,只触发一次
export default {
setup() {
console.log('setupFn');//每次实例化组件都触发和script-setup标签一样
}
}
</script>（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）
2、<script setup>引入组件将自动注册</script>
不需要在引入组件后，通过 components:{}注册组件，可直接使用
<script setup>
import MyComponent from './MyComponent.vue'
//components:{MyComponent} 不需要注册直接使用
</script>
<template>
<MyComponent />
</template>3、组件通信:
在<script setup></script>中必须使用 defineProps 和 defineEmits API 来替代 props 和 emits
defineProps 和 defineEmits具备完整的类型推断并且在 中是直接可用的(浏览了一下掘金，发现大部分文章demo还是通过import引入这2个api，这点官方文档写得很清楚)
defineProps 代替props
接收父组件传递的数据（父组件向子组件传参）
父组件:
<template>
<div>父组件</div>
<Child :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const msg = ref('父的值') //自动返回，在template直接解套使用
</script>子组件：
<template></template> 中可以直接使用父组件传递的props （可省略props.）
<script-setup></script-setup> 需要通过props.xx获取父组件传递过来的props
<template>
<div>子组件</div>
<div>父组件传递的值：{{title}}</div>
</template>
<script setup>
//import {defineProps} from 'vue' 不需要引入
//语法糖必须使用defineProps替代props
const props = defineProps({
title: {
type: String
}
});
//script-setup 需要通过props.xx获取父组件传递过来的props
console.log(props.title) //父的值
</script>defineEmit 代替emit
子组件向父组件传递数据（子组件向外暴露数据）
子组件代码:
<template>
<div>子组件</div>
<button @click="toEmits">子组件向外暴露数据</button>
</template>
<script setup>
import {ref} from 'vue'
const name = ref('我是子组件')
//1、暴露内部数据
const emits = defineEmits(['childFn']);
const toEmits = () => {
//2、触发父组件中暴露的childFn方法并携带数据
emits('childFn',name)
}
</script>父组件代码:
<template>
<div>父组件</div>
<Child @childFn='childFn' />
<p>接收子组件传递的数据{{childData}} </p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/875" title="百度GBI"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d54b42fe6818.png" alt="百度GBI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/875" title="百度GBI">百度GBI</a>
<p>百度GBI-你的大模型商业分析助手</p>
</div>
<a href="/ai/875" title="百度GBI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childData = ref(null)
const childFn=(e)=>{
consloe.log('子组件触发了父组件childFn，并传递了参数e')
childData=e.value
}
</script>4.<script setup>需主动向父组件暴露子组件属性 ：defineExpose</script>
使用 <script setup></script> 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露
子组件代码：
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
//主动暴露组件属性
defineExpose({
a,
b
})
</script>父组件代码:
<template>
<div>父组件</div>
<Child ref='childRef' />
<button @click='getChildData'>通过ref获取子组件的属性 </button>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childRef= ref() //注册响应数据
const getChildData =()=>{
//子组件接收暴露出来得值
console.log(childRef.value.a) //1
console.log(childRef.value.b) //2 响应式数据
}
</script>5.语法糖其他功能
useSlots 和 useAttrs （少用，由于大部分人是SFC模式开发，在<template></template>通过<slot></slot>标签就可以渲染插槽）
如果需要在script-setup中使用 slots 和 attrs 需要用useSlots 和 useAttrs替代
需要引入：import { useSlots ,useAttrs } form 'vue'
在<template></template>中通过 $slots 和 $attrs 来访问更方便（attrs用来获取父组件中非props的传递到子组件的参数/方法，attrs 用来获取父组件中非props的传递到子组件的参数/方法，attrs用来获取父组件中非props的传递到子组件的参数/方法，slots可以获取父组件中插槽传递的虚拟dom对象，在SFC模式应该用处不大，在JSX /TSX使用比较多）
父组件:
<template>
<Child msg="非porps传值子组件用attrs接收" >
<!-- 匿名插槽 -->
<span >默认插槽</span>
<!-- 具名插槽 -->
<template #title>
<h2>具名插槽</h2>
</template>
<!-- 作用域插槽 -->
<template #footer="{ scope }">
<footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
</template>
</Child>
</template>
<script setup>
// 引入子组件
import Child from './child.vue'
</script>子组件：
<template>
<!-- 匿名插槽 -->
<slot />
<!-- 具名插槽 -->
<slot name="title" />
<!-- 作用域插槽 -->
<slot name="footer" :scope="state" />
<!-- $attrs 用来获取父组件中非props的传递到子组件的参数 -->
<p>{{ attrs.msg == $attrs.msg }}</p>
<!--true 没想到有啥作用... -->
<p>{{ slots == $slots }}</p>
</template>
<script setup>
import { useSlots, useAttrs, reactive, toRef } from 'vue'
const state = reactive({
name: '张三',
age: '18'
})
const slots = useSlots()
console.log(slots.default()); //获取到默认插槽的虚拟dom对象
console.log(slots.title()); //获取到具名title插槽的虚拟dom对象
// console.log(slots.footer()); //报错 不知道为啥有插槽作用域的无法获取
//useAttrs() 用来获取父组件传递的过来的属性数据的（也就是非 props 的属性值）。
const attrs = useAttrs()
</script>useSlots或许在JSX/TSX下更实用
想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx
useSlots 可以获取父组件传递过来插槽的虚拟dom对象，可以用来渲染插槽内容
<script lang='jsx'>
import { defineComponent, useSlots } from "vue";
export default defineComponent({
setup() {
// 获取插槽数据
const slots = useSlots();
// 渲染组件
return () => (
<div>
{slots.default?slots.default():''}
{slots.title?slots.title():''}
</div>
);
},
});
</script>大部分人是SFC模式开发，在<template></template>通过<slot></slot>标签就可以渲染插槽，这种JSX 的写法应该是很少人会使用的
6.在setup访问路由
访问路由实例组件信息：route和router
setup 里不能访问 this，不能再直接访问 this.$router 或 this.$route。（getCurrentInstance可以替代this但不推荐）
推荐：使用useRoute 函数和useRouter函数替代this.$route 和 this.$router
<script setup>
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
function pushWithQuery(query) {
router.push({
name: 'search',
query: {
...route.query,
},
})
}
<script/>导航守卫
仍然可以使用路由实例组件的导航守卫
import router from './router'
router.beforeEach((to,from,next)=>{
})也可以使用组合式api的导航守卫onBeforeRouteLeave, onBeforeRouteUpdate
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
// 与 beforeRouteLeave 相同，无法访问 `this`
onBeforeRouteLeave((to, from) => {
const answer = window.confirm(
'Do you really want to leave? you have unsaved changes!'
)
// 取消导航并停留在同一页面上
if (!answer) return false
})
const userData = ref()
// 与 beforeRouteUpdate 相同，无法访问 `this`
onBeforeRouteUpdate(async (to, from) => {
//仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
<script/>组合式 API 守卫也可以用在任何由 `
