浅谈Vue.js 3.0新增的 Composition API

最新推荐文章于 2024-08-15 19:41:48 发布

懒得跟猪打架

最新推荐文章于 2024-08-15 19:41:48 发布

阅读量200

点赞数

分类专栏： Vue.js 3.0入门即放弃文章标签： vue.js 前端 javascript 前端框架 ecmascript

本文链接：https://blog.csdn.net/u011024243/article/details/126036845

版权

Vue.js 3.0入门即放弃专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了Vue3.0的Composition API，包括createApp、setup方法的使用，以及如何在setup中处理生命周期钩子函数。通过示例展示了如何创建响应式对象reactive，并重构代码以提高复用性。通过mousePosition案例，阐述了Composition API在事件监听和封装逻辑上的优势。

摘要由CSDN通过智能技术生成

Composition API

首先还是演示我们的显示鼠标位置案例。
在这里插入图片描述
首先说一下 createApp()创建出来的对象，跟我们使用Vue2.x创建的对象少了很多，而且这些成员都没有使用$符开头。说明未来我们基本不用给这个对象上新增成员。我们可以看到component、directive、mixin、use等这些全局方法和以前的使用方式都是一样的。mout()和以前的$mount()作用类似；unmount()类似以前的$destroy()；

如何使用Composition API

`createApp(options)`Vue实例创建API

它需要一个新的选项setup方法作为配合，这个setup方法也就是Composition API的入口。

`setup(props, context) {...}` Composition API的入口

setup的执行时机：它是在props被解析完毕，但是在组件实例被创建之前执行的，所以在setup的内部无法通过this获取到组件的实例。因为这是组件实例还没有被创建，所以在setup中也无法访问到data，methods，computed，此时this指向的是undefined
setup的参数及返回值：
- 第一个参数， props 接收外部传入的参数，是一个响应式的对象，它不能被解构。
- 第二个参数， context ，是一个对象，具有三个成员 attrs、emit、slots
- 需要返回一个对象，setup中返回的对象可以使用在模版，methods，computed，以及生命周期的钩子函数中。

`reactive`响应式对象的创建API

Composition中返回的应该是响应式的数据，为了实现让某一个逻辑的所有代码都能够被封装到一个函数中，Vue3.0中提供了一个新的API reactive让我们可以来创建响应式对象。

reactive： reactive()函数就是通过其内部将我们传递进去的数据封装成了一个 Proxy代理对象，从而实现了对数据的安全监听，使得我们的数据非常高效地转换成了响应式对像。

案例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document 01 for Vue 3.0 Composition API</title>
</head>

<body>
  <div id="app">x: {{ position.x }} y: {{ position.y }}</div>
  <script type="module">
    import {
        createApp,
        reactive,
      } from './node_modules/vue/dist/vue.esm-browser.js';

      const app = createApp({
        setup() {
          // 第一个参数， props 接收外部传入的参数，是一个响应式的对象，它不能被解构。
          // 第二个参数， context ，是一个对象，具有三个成员 attrs、emit、slots
          // 需要返回一个对象，setup中返回的对象可以使用在模版，methods，computed，以及生命周期的钩子函数中
          const position = reactive({
            x: 0,
            y: 0,
          });
          return {
            position,
          };
        },
        mounted() {
          this.position.x = 100;
          this.position.y = 50;
        },
      });

      console.log(app);

      app.mount('#app');
  </script>
</body>

</html>

如何在setup中使用生命钩子函数

生命周期的钩子函数都可以在setup中定义，除了beforeCreate和created外，其他的都需要在生命周期钩子函数名前加上on作为前缀，然后首字母大写。具体如下图所示：在这里插入图片描述

给上述鼠标位置案例添加事件监听，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document 01 for Vue 3.0 Composition API</title>
  </head>

  <body>
    <div id="app">x: {{ position.x }} y: {{ position.y }}</div>
    <script type="module">
      import {
        createApp,
        reactive,
        onMounted,
        onUnmounted,
      } from './node_modules/vue/dist/vue.esm-browser.js';

      const app = createApp({
        setup() {
          // 第一个参数， props 接收外部传入的参数，是一个响应式的对象，它不能被解构。
          // 第二个参数， context ，是一个对象，具有三个成员 attrs、emit、slots
          // 需要返回一个对象，setup中返回的对象可以使用在模版，methods，computed，以及生命周期的钩子函数中
          const position = reactive({
            x: 0,
            y: 0,
          });

          const update = (e) => {
            position.x = e.pageX;
            position.y = e.pageY;
          };

          onMounted(() => {
            window.addEventListener('mousemove', update);
          });
          onUnmounted(() => {
            window.removeEventListener('mousemove', update);
          });
          return {
            position,
          };
        },
        mounted() {
          this.position.x = 100;
          this.position.y = 50;
        },
      });

      console.log(app);

      app.mount('#app');
    </script>
  </body>
</html>

可以对代码进行重构，把获取鼠标位置的功能封装到一个函数中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document 01 for Vue 3.0 Composition API</title>
  </head>

  <body>
    <div id="app">x: {{ position.x }} y: {{ position.y }}</div>
    <script type="module">
      // 当前重构抽离的函数可以放到一个模块中，将来在任何组件中都可以使用，你可以尝试使用相同的方式实现其他的逻辑
      function useMousePosition() {
        const position = reactive({
          x: 0,
          y: 0,
        });

        const update = (e) => {
          position.x = e.pageX;
          position.y = e.pageY;
        };

        onMounted(() => {
          window.addEventListener('mousemove', update);
        });
        onUnmounted(() => {
          window.removeEventListener('mousemove', update);
        });
        return position;
      }
      import {
        createApp,
        reactive,
        onMounted,
        onUnmounted,
      } from './node_modules/vue/dist/vue.esm-browser.js';

      const app = createApp({
        setup() {
          // 第一个参数， props 接收外部传入的参数，是一个响应式的对象，它不能被解构。
          // 第二个参数， context ，是一个对象，具有三个成员 attrs、emit、slots
          // 需要返回一个对象，setup中返回的对象可以使用在模版，methods，computed，以及生命周期的钩子函数中
          const position = useMousePosition();
          return {
            position,
          };
        },
        mounted() {
          this.position.x = 100;
          this.position.y = 50;
        },
      });

      console.log(app);

      app.mount('#app');
    </script>
  </body>
</html>

你可以点击这里去在线尝试一下：【在线案例】

懒得跟猪打架

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈Vue.js 3.0新增的 Composition API

首先还是演示我们的显示鼠标位置案例。首先说一下createApp()创建出来的对象，跟我们使用Vue2.x创建的对象少了很多，而且这些成员都没有使用$符开头。说明未来我们基本不用给这个对象上新增成员。我们可以看到component、directive、mixin、use等这些全局方法和以前的使用方式都是一样的。mout()和以前的$mount()作用类似；unmount()类似以前的$destroy()；...
复制链接

扫一扫