您现在的位置是：网站首页> 编程资料编程资料
Vue3.2 setup语法糖及Hook函数基本使用_vue.js_
2023-05-24
361人已围观
简介 Vue3.2 setup语法糖及Hook函数基本使用_vue.js_
引言
在2021 年 8 月 5 日，Vue发布了3.2版本的新写法，其中最主要的亮点就在于setup的语法糖，学过Vue3.0的小伙伴都清楚，当我们在使用Vue3的语法就构建组件的时候，总是需要把外面定义的方法变量必须要return出去，比较麻烦一些，所以Vue官方这次提供了setup语法糖，有了他，我们可以更加简洁舒适的去构建组件。
setup（语法糖）
1、基本使用
在vue3.2中我们不再需要进行return，当使用
这里面的代码会被编译成组件 setup() 函数的内容，这也就意味着与普通的
3、组件通信
defineProps ----> [用来接收父组件传来的 props] 代码示列：
父组件代码:
我是父组件----1
子组件代码：
我是子组件----2{{props.title}}
defineEmit ----> [子组件向父组件事件传递] 代码示列：
子组件代码:
我是子组件----2
父组件代码:
我是父组件----1{{data}}
在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的，但在script-setup模式下，所有数据只是默认return给template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载ref 变量获取子组件的数据。如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由defineExpose来完成。
defineExpose ----> [组件暴露出自己的属性] 代码示列：
子组件代码：
我是子组件----2> {{ xiaoZhi.stator }}
父组件代码:
结果：
hook函数
介绍：
- Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数
- Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数
示列 :
1、首先我们需要创建一个hooks的文件 文件示列：
2、在hookds文件下，我们创建一个我们需要使用的.js文件 这里我们比如时usePoint.js
这里我们在usePoint里面写了一个获取鼠标点击位置的方法 代码示列：
import {reactive, onMounted, onBeforeUnmount} from 'vue' export default function () { //展示的数据 可以通过App.vue 界面去隐藏 let point = reactive({ x: 0, y: 0 }) //获取鼠标点击事件 function savePonint(event) { point.x = event.pageX point.y = event.pageY console.log(event.pageX, event.pageY) } //现实之后调用 挂载完毕 onMounted(() => { window.addEventListener('click', savePonint) }) //在隐藏之前调用 卸载之前 onBeforeUnmount(() => { window.removeEventListener('click', savePonint) }) return point } 我们在组件中引入此文件 代码示列：
当前求和:{{ sum }}
当前鼠标点击坐标为:x:{{ point.x }},y:{{ point.y }}
结果展示：
总得来说，新引入的setup语法糖的 目的是简化使用Composition API时冗长的模板代码，也就是让代码更加简洁，阅读性也越高。而在组件中引入并使用自定义hook 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂！
以上就是Vue3.2 setup语法糖及Hook函数基本使用的详细内容，更多关于Vue3.2 setup语法糖Hook函数的资料请关注其它相关文章！
相关内容
- JavaScript实现导入导出excel的示例代码_javascript技巧_
- webpack打包的3种hash值详解_javascript技巧_
- 小程序animate动画实现直播间点赞_javascript技巧_
- 小程序tab实现页面切换_javascript技巧_
- 浅谈vue3中ref、toRef、toRefs 和 reactive的区别_vue.js_
- JavaScript中array.reduce()数组方法的四种使用实例_javascript技巧_
- js面向对象编程OOP及函数式编程FP区别_JavaScript_
- 小程序实现tab更换页面效果_javascript技巧_
- Vue.js实现页面后退时还原滚动位置的操作方法_javascript技巧_
- 微信小程序实现时间选择_javascript技巧_
