Vue3.2单文件组件setup的语法糖与新特性总结

目录

前言

满满的干货，建议收藏慢慢看，可以当作Vue3.0的学习资料。

在vue2.0时期，组件里定义的各类变量、方法、计算属性等是分别存放到data、methods、computed...选项里，这样编写的代码不便于后期的查阅（查找一个业务逻辑需要在各个选项来回切换）。setup函数的推出就是为了解决这个问题，让新手开发者更容易上手...

setup语法糖

setup是Vue3.0后推出的语法糖，并且在Vue3.2版本进行了大更新，像写普通JS一样写vue组件，对于开发者更加友好了；按需引入computed、watch、directive等选项，一个业务逻辑可以集中编写在一起，让代码更加简洁便于浏览。

一、基本用法

只需在<script>里添加一个setup属性，编译时会把<script>

<script setup>
console.log('hello script setup')
</script>

普通的<script>只会在组件被首次引入的时候执行一次，<script setup>里的代码会在每次组件实例被创建的时候执行。

二、data和methods

<script>

<script setup>
import { ref, reactive } from 'vue'    
// 普通变量
const msg = 'Hello!'
 
// 响应式变量
let num = ref(1111)         // ref声明基本类型变量
const obj = reactive({        // reactive声明对象类型变量，如Object、Array、Date...
    key: 'this is a object'
})
 
// 函数
function log() {
    console.log(msg)          // Hello
    console.log(num.value)    // 1111（可根据input输入值而改变）
    console.log(obj.key)      // this is a object
}
</script>
 
<template>
    <h1>{{ msg }}</h1>
    <p>{{obj.key}}</p>
    <input v-model="num" type="text" />
    <button @click="log">打印日志</button>
</template>

三、计算属性computed

<script setup>
import { ref, computed } from 'vue'
 
let count = ref(0)
const countPlus = computed(()=>{
    return count.value+1
})
</script>
 
<template>
    <h1>计数：{{ countPlus }}</h1>
</template>

四、监听器watch、watchEffect

1、watch监听器除了使用方式有区别之外，其他的与vue2.0没啥变化

<script setup>
import { ref, reactive, watch } from 'vue'
 
// 监听ref
let count = ref(0)
watch(count, (newVal, oldVal)=> {
    console.log('修改后', newVal)
    console.log('修改前', oldVal)
})
 
// 监听reactive属性
const obj = reactive({
    count: 0
})
watch(
    ()=> obj.count,     // 一个函数，返回监听属性
    (newVal, oldVal)=> {
        console.log('修改后', newVal)
        console.log('修改前', oldVal)
    },
    {
        immediate: true,     // 立即执行，默认为false
        deep: true     // 深度监听，默认为false
    }
)
 
const onChange = function(){
    count.value++
    obj.count++
}
</script>
 
<template>
    <button @click="onChange">改变count</button>
</template>

2、watchEffect

watchEffect是Vue3.0新增的一个监听属性的方法，它与watch的区别在于watchEffect不需要指定监听对象，回调函数里可直接获取到修改后的属性的值

<script setup>
import { ref, reactive, watchEffect } from 'vue'
 
let count = ref(0)
const obj = reactive({
    count: 0
})
setTimeout(()=>{
    count.value++
    obj.count++
}, 1000)
 
watchEffect(()=> {
    console.log('修改后的count', count.value)
    console.log('修改前的obj', obj.value)
})
</script>

五、自定义指令directive

以 vNameOfDirective 的形式来命名本地自定义指令，可以直接在模板中使用

<script setup>
// 导入指令可重命名
// import { myDirective as vMyDirective } from './MyDirective.js'
 
// 自定义指令
const vMyDirective = {
  beforeMount: (el) => {
    // 在元素上做些操作
  }
}
</script>
<template>
  <h1 v-my-directive>This is a Heading</h1>
</template>

六、import导入的内容可直接使用

 1、导入的模块内容，不需要通过 methods 来暴露它

// utils.js 
export const onShow = function(name) {
    return 'my name is ' + name
}

// Show.vue
<script setup>
    import { onShow } from './utils.js'
</script>
<template>
    <div>{{ onShow('jack') }}</div>
</template>

 2、导入外部组件，不需要通过components注册使用

// Child.vue
<template>
    <div>I am a child</div>
</template>

// Parent.vue
<script setup>
    import Child from './Child.vue'
</script>
<template>
    <child></child>
</template>

七、声明props和emits 

在 <script> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的

// Child.vue
<script setup>
 
// 声明props
const props = defineProps({
    info: {
        type: String,
        default: ''
    }
})
 
// 声明emits
const $emit = defineEmits(['change'])
 
const onChange = function() {
    $emit('change', 'child返回值')
}
</script>
 
<template>
    <h1>信息：{{ info }}</h1>
    <button @click="onChange">点击我</button>
</template>

// Parent.vue
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
 
const msg = ref('hello setup !')    // 响应式变量
 
const onAction = function(event) {
    console.log(event)    // child返回值
}
</script>
 
<template>
    <child :info="msg" @change="onAction"></child>
</template>

// Child.vue
<script setup>
import { ref, defineExpose } from 'vue'
 
const info = ref('I am child')
const onChange = function() {
    console.log('Function of child')
}
 
// 暴露属性
defineExpose({
    info,
    onChange
})
</script>
 
<template>
    <h1>信息：{{ info }}</h1>
    <button @click="onChange">点击我</button>
</template>

// Parent.vue
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
 
const childRef = ref()
const onAction = function() {
    console.log(childRef.value.info)    // I am child
    console.log(childRef.value.onChange())    // Function of child
}
</script>
 
<template>
    <child ref="childRef"></child>
    <button @click="onAction">获取子值</button>
</template>

// Parent.vue
<script setup>
import { ref, provide } from 'vue'
import Child from './Child.vue'
 
const msg = ref('Hello, my son')
const onShow = function() {
    console.log('I am your parent')
}
 
provide('myProvide', {
    msg,
    onShow
})
</script>
 
<template>
    <child></child>
</template>

// Child.vue
<script setup>
import { inject } from 'vue'
 
const provideState = inject('myProvide')    // 接收参数
 
const getData = function() {
    console.log(provideState.msg)    // Hello, my son
    console.log(provideState.onShow())    // I am your parent
}
</script>
 
<template>
    <button @click="getData">获取父值</button>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
 
const $route = useRoute()
const $router = userRouter()
 
// 路由信息
console.log($route.query)
 
// 路由跳转
$router.push('/login')
</script>

<script setup>
    const post = await fetch(`/api/post/1`).then(r => r.json())
</script>

// 方式一
<script setup>
import { nextTick } from 'vue'
 
nextTick(()=>{
    console.log('Dom已更新！')
})
</script>

// 方式二
<script setup>
import { nextTick } from 'vue'
 
await nextTick()    // nextTick是一个异步函数，返回一个Promise实例
// console.log('Dom已更新！')
</script>

// main.js里定义
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
 
// 定义一个全局属性$global 
app.config.globalProperties.$global = 'This is a global property.' 
 
app.mount('#app')

// 组件内使用
<script setup>
import { getCurrentInstance } from 'vue'
 
// 获取vue实例
const { proxy } = getCurrentInstance()
// 输出
console.log(proxy.$global)    // This is a global property.
</script>

// 使用方式
<script setup>
import { onMounted } from 'vue'
 
onMounted(()=> {
    console.log('onMounted')
})
</script>