开始使用
/*不使用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