Vue3新的script setup语法糖

2022-01-08 11:02:33 阅读：186 来源： 互联网

标签：count vue const script setup props Vue3 import ref

开始使用

/*不使用script-setup语法糖*/
<script>
import { defineComponent } from "vue"
export default defineComponent({
name: 'app',
})
</script>

/*使用script-setup语法糖*/
<script setup>
</script>

引用组件的变更

/*原先*/
<template>
<about />
</template>
<script>
import about from './about.vue'
import { defineComponent } from "vue"
export default defineComponent({
name: 'home',
components: { about }
})
</script>

/*用语法糖后*/
<template>
<about />
</template>
<script>
<script setup>
import about from './about.vue'
</script>
组件的引入使用已不再需要components注册才能使用了，直接引入就可以在tamplate使用了，U1S1，这个更改让代码看起来更舒服简介了一些

变量使用的变更

/*原先*/
<template>
count:{{count}}
num:{{num}}
text:{{text}}
<el-button @click="handleClick">点击</el-button>
</template>

<script>
import { reactive, toRefs, ref } from 'vue'
export default {
name: '',
setup() {
/*这里我列举了三种声明变量的方式*/
const count = ref(1)
const num = 2
const state = reactive({
text: "小黄在测试"
})
function handleClick(){
count.value++
}
/*不使用script-srtup语法糖需要导出需要在template使用的变量和方法*/
return { count, num, ...toRefs(state),handleClick }
}
}
</script>

/*用语法糖后*/
<template>
count:{{count}}
num:{{num}}
/*这里没有使用toRefs展开变量，所以需要state.text*/
text:{{state.text}}
<el-button @click="handleClick">点击</el-button>
</template>

<script setup>
import { reactive, ref } from 'vue'
const count = ref(1)
const num = 2
const state = reactive({
text: "小黄在测试"
})
function handleClick(){
count.value++
}
</script>

使用script setup语法糖后变量和方法已不再需要return出去才能被template使用了，减少了代码量，看起来更加的美观

props使用的变更

/*原先*/
/*子组件*/
<template>
{{foo}}
</tamplate>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
name:'son',
props:{
foo:String
}
})
</script>

/*父组件*/
<template>
<About foo="我是小黄" />
</template>
<script>
import About from "../about/index.vue"
import {defineComponent} from 'vue'
export default defineComponent({
name:'father',
components:{About}
})
</script>

/*用语法糖后*/
/*子组件*/
<template>
{{foo}}
</tamplate>
<script setup>
import {defineProps} from 'vue'
const props = defineProps({
foo:String
})
console.log(props) // Proxy {foo: '我是小黄'}
</script>
/*父组件*/
<template>
<About foo="我是小黄" />
</template>
<script setup>
import About from "../about/index.vue"
</script>

通过 defineProps 指定当前props类型的同时，获得上下文的props对象
在script中需要props[key]引用，而template中可直接调用key
用法上差异不大…

emit使用的变更

/*原先*/
<template>
<el-button @click="handleClick">点击</el-button>
</template>
<script>
export default{
setup(){
emit:['h-update','h-delete']
}
}
</script>

/*用语法糖后*/
<template>
<el-button @click="handleClick">点击</el-button>
</template>
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['h-update', 'h-delete'])
function handleClick(){
emit('h-update')
console.log(emit)
//(event, ...args) => instance.emit(event, ...args)
}
</script>

slots、attrs使用的变更

<script setup>
import {useSlots,useAttrs} from 'vue'
const slots = useSlots()
const attrs = useAttrs()
console.log(slots)//可以获取组件的插槽
console.log(attrs)//可以获取组件的属性
</script>

<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

导入指令的用法

<script setup>
  import { directive as clickOutside } from 'v-click-outside'
</script>

<template>
  <div v-click-outside />
</template>

ref & toRefs的用法

import {defineProps, toRefs,defineEmits,ref} from 'vue' 
const props = defineProps({ isOpen: Boolean })

const count = ref(1)
const obj = ref({
　　count:0
})
console.log(count.value)
console.log(obj.value.count)

const { isOpen } = toRefs(props);

尽量不要混着用，reactive 和 ref 选一种，toRef 和 toRefs 选一种，不然代码会很乱。
推荐 ref 和 toRefs 一把梭。

ref

标签：count,vue,const,script,setup,props,Vue3,import,ref
来源： https://www.cnblogs.com/MrSlow/p/15777696.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue3新的script setup语法糖