您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 126人已围观

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

前言

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

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

setup语法糖

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

一、基本用法

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

普通的

三、计算属性computed

四、监听器watch、watchEffect

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

2、watchEffect

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

五、自定义指令directive

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

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

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

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

// Show.vue

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

// Child.vue

// Parent.vue

七、声明props和emits

在

// Parent.vue

如果使用了 Typescript，使用纯类型声明来声明 prop 和 emits 也是可以的。

`八、父组件获取子组件的数据`

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

// Child.vue

// Parent.vue

`九、provide和inject传值`

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

// Parent.vue

// Child.vue

`十、路由useRoute和useRouter`

`十一、对await异步的支持`

十二、nextTick

// 方式一

// 方式二

`十三、全局属性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')

// 组件内使用