Vue3.0 和Vue2.0写法比较

实现功能:实时获取鼠标位置

Vue2.0 在vue组件中的写法:

<template>部分:


image.png

<script>部分:


image.png

在组件不复杂的情况下,这种写法结构清晰。

Vue3.0写法

<script>部分:这部分是创建了一个完成该功能的函数,所有数据和操作都在这一个函数里,直接调用即可。


image.png

接着对上面的函数进行封装,注意此处用setup()函数为Vue3.0新增的。<script>部分结束。


image.png

总结:当我们在写比较大的组件时,Vue3.0的结构会更加清晰。

图片来源:b站老陈打码视频

推荐阅读更多精彩内容