Vue3.2单文件组件setup的语法总结

setup语法糖

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

1. 基本用法

只需在里的代码编译成一个setup函数

普通的

3.计算属性computed

4. 监听器watch、watchEffect

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

2、watchEffect

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

5.自定义指令directive

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

6. import导入的内容可直接使用

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

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

// Show.vue

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

// Child.vue

// Parent.vue

7. 声明props和emits

使用 defineProps 和 defineEmits API 来声明 props 和 emits

// Child.vue

// Parent.vue

8. 父组件获取子组件的数据

父组件要想通过ref获取子组件的变量或函数，子组件须使用defineExpose暴露出去

// Child.vue

// Parent.vue

9. provide和inject传值

无论组件层次结构有多深，父组件都可以通过provide 选项来其所有子组件提供数据，子组件通过inject接收数据

// Parent.vue

// Child.vue

10. 路由useRoute和useRouter

11. 对await异步的支持

12. nextTick

// 方式一

// 方式二

13. 全局属性globalProperties

// 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')

// 组件内使用

14. 生命周期

setup()里访问组件的生命周期需要在生命周期钩子前加上“on”，并且没有beforeCreate和created生命周期钩子

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

image.png

// 使用方式

15. 与普通的script标签一起使用

16. v-memo新指令该指令与v-once类似，v-once是只渲染一次之后的更新不再渲染，而v-memo是根据条件来渲染。该指令接收一个固定长度的数组作为依赖值进行记忆比对，如果数组中的每个值都和上次渲染的时候相同，则该元素（含子元素）不刷新。

1、应用于普通元素或组件；

当组件重新渲染的时候，如果 valueA 与 valueB 都维持不变，那么对这个

以及它的所有子节点的更新都将被跳过。
2、结合v-for使用
v-memo 仅供性能敏感场景的针对性优化，会用到的场景应该很少。渲染 v-for 长列表 (长度大于 1000) 可能是它最有用的场景：

作者：用户体验官大龙
链接：https://juejin.cn/post/7095392368064462879
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。