Vue 3.0 前瞻Vue Function API新特性体验

最近 Vue 官方公布了 Vue 3.0 最重要的RFC:Function-based component API,并发布了兼容 Vue 2.0 版本的 plugin:vue-function-api,可用于提前体验 Vue 3.0 版本的 Function-based component API。笔者出于学习的目的,提前在项目中尝试了vue-function-api

笔者计划写两篇文章,本文为笔者计划的第一篇,主要为笔者在体验 Vue Function API 的学习心得。第二篇计划写阅读vue-function-api的核心部分代码原理,包括setup、observable、lifecycle。

本文阅读时间约为15~20分钟。

概述

Vue 2.x 及以前的高阶组件的组织形式或多或少都会面临一些问题,特别是在需要处理重复逻辑的项目中,一旦开发者组织项目结构组织得不好,组件代码极有可能被人诟病为“胶水代码”。而在 Vue 2.x 及之前的版本,解决此类问题的办法大致是下面的方案:

笔者维护的项目也需要处理大量复用逻辑,在这之前,笔者一直尝试使用mixin的方式来实现组件的复用。有些问题也一直会对开发者和维护者造成困惑,如一个组件同时mixin多个组件,很难分清对应的属性或方法写在哪个mixin里。其次,mixin的命名空间冲突也可能造成问题。难以保证不同的mixin不用到同一个属性名。为此,官方团队提出函数式写法的意见征求稿,也就是RFC:Function-based component API。使用函数式的写法,可以做到更灵活地复用组件,开发者在组织高阶组件时,不必在组件组织上考虑复用,可以更好地把精力集中在功能本身的开发上。

注:本文只是笔者使用vue-function-api提前体验 Vue Function API ,而这个 API 只是 Vue 3.0 的 RFC,而并非与最终 Vue 3.x API 一致。发布后可能有不一致的地方。

在 Vue 2.x 中使用

要想提前在Vue 2.x中体验 Vue Function API ,需要引入vue-function-api,基本引入方式如下:

import Vue from 'vue';
import { plugin as VueFunctionApiPlugin } from 'vue-function-api';

Vue.use(VueFunctionApiPlugin);

基本组件示例

先来看一个基本的例子:

<template>
  <div>
    <span>count is {{ count }}</span>
    <span>plusOne is {{ plusOne }}</span>
    <button @click="increment">count++</button>
  </div>
</template>

<script>
import Vue from 'vue';
import { value, computed, watch, onMounted } from 'vue-function-api';

export default {
  setup(props, context) {
    // reactive state
    const count = value(0);
    // computed state
    const plusOne = computed(() => count.value + 1);
    // method
    const increment = () => {
      count.value++;
    };
    // watch
    watch(
      () => count.value * 2,
      val => {
        console.log(`count * 2 is ${val}`);
      }
    );
    // lifecycle
    onMounted(() => {
      console.log(`mounted`);
    });
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment,
    };
  },
};
</script>

详解

setup

setup函数是Vue Function API 构建的函数式写法的主逻辑,当组件被创建时,就会被调用,函数接受两个参数,分别是父级组件传入的props和当前组件的上下文context。看下面这个例子,可以知道在context中可以获取到下列属性值:

const MyComponent = {
  props: {
    name: String
  },
  setup(props, context) {
    console.log(props.name);
    // context.attrs
    // context.slots
    // context.refs
    // context.emit
    // context.parent
    // context.root
  }
}

value & state

value函数创建一个包装对象,它包含一个响应式属性value:

那么为何要使用value呢,因为在JavaScript中,基本类型并没有引用,为了保证属性是响应式的,只能借助包装对象来实现,这样做的好处是组件状态会以引用的方式保存下来,从而可以被在setup中调用的不同的模块的函数以参数的形式传递,既能复用逻辑,又能方便地实现响应式。

直接获取包装对象的值必须使用.value,但是,如果包装对象作为另一个响应式对象的属性,Vue内部会通过proxy来自动展开包装对象。同时,在模板渲染的上下文中,也会被自动展开。

import { state, value } from 'vue-function-api';
const MyComponent = {
  setup() {
    const count = value(0);
    const obj = state({
      count,
    });
    console.log(obj.count) // 作为另一个响应式对象的属性,会被自动展开

    obj.count++ // 作为另一个响应式对象的属性,会被自动展开
    count.value++ // 直接获取响应式对象,必须使用.value

    return {
      count,
    };
  },
  template: `<button @click="count++">{{ count }}</button>`,
};

如果某一个状态不需要在不同函数中被响应式修改,可以通过state创建响应式对象,这个state创建的响应式对象并不是包装对象,不需要使用.value来取值。

watch & computed

watch和computed的基本概念与 Vue 2.x 的watch和computed一致,watch可以用于追踪状态变化来执行一些后续操作,computed用于计算属性,用于依赖属性发生变化进行重新计算。

computed返回一个只读的包装对象,和普通包装对象一样可以被setup函数返回,这样就可以在模板上下文中使用computed属性。可以接受两个参数,第一个参数返回当前的计算属性值,当传递第二个参数时,computed是可写的。

import { value, computed } from 'vue-function-api';

const count = value(0);
const countPlusOne = computed(() => count.value + 1);

console.log(countPlusOne.value); // 1

count.value++;
console.log(countPlusOne.value); // 2

// 可写的计算属性值
const writableComputed = computed(
  // read
  () => count.value + 1,
  // write
  val => {
    count.value = val - 1;
  },
);

watch第一个参数和computed类似,返回被监听的包装对象属性值,不过另外需要传递两个参数:第二个参数是回调函数,当数据源发生变化时触发回调函数,第三个参数是options。其默认行为与 Vue 2.x 有所不同:

  • lazy:是否会在组件创建时就调用一次回调函数,与 Vue 2.x 相反,lazy默认是false,默认会在组件创建时调用一次。
  • deep:与 Vue 2.x 的 deep 一致
  • flush:有三个可选值,分别为 'post'(在渲染后,即nextTick后才调用回调函数),'pre'(在渲染前,即nextTick前调用回调函数),'sync'(同步触发)。默认值为'post'。
// double 是一个计算包装对象
const double = computed(() => count.value * 2);

watch(double, value => {
  console.log('double the count is: ', value);
}); // -> double the count is: 0

count.value++; // -> double the count is: 2

当watch多个被包装对象属性时,参数均可以通过数组的方式进行传递,同时,与 Vue 2.x 的vm.$watch一样,watch返回取消监听的函数:

const stop = watch(
  [valueA, () => valueB.value],
  ([a, b], [prevA, prevB]) => {
    console.log(`a is: ${a}`);
    console.log(`b is: ${b}`);
  }
);
stop();

注意:在RFC:Function-based component API初稿中,有提到effect-cleanup,是用于清理一些特殊情况的副作用的,目前已经在提案中被取消了。

生命周期

所有现有的生命周期都有对应的钩子函数,通过onXXX的形式创建,但有一点不同的是,destoryed钩子函数需要使用unmounted代替:

import { onMounted, onUpdated, onUnmounted } from 'vue-function-api';

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!');
    });
    onUpdated(() => {
      console.log('updated!');
    });
    // destroyed 调整为 unmounted
    onUnmounted(() => {
      console.log('unmounted!');
    });
  },
};

一些思考

上面的详解部分,主要抽取的是 Vue Function API 的常见部分,并非RFC:Function-based component API的全部,例如其中的依赖注入,TypeScript类型推导等优势,在这里,由于篇幅有限,想要了解更多的朋友,可以点开RFC:Function-based component API查看。个人也在Function-based component API讨论区看到了更多地一些意见:

  • 由于底层设计,在setup取不到组件实例this的问题,这个问题在笔者尝试体验时也遇到了,期待正式发布的 Vue 3.x 能够改进这个问题。
  • 对于基本类型的值必须使用包装对象的问题:在 RFC 讨论区,为了同时保证TypeScript类型推导、复用性和保留Vue的数据监听,包装属性必须使用.value来取值是讨论最激烈的
  • 关于包装对象value和state方法命名不清晰可能导致开发者误导等问题,已经在Amendment proposal to Function-based Component API这个提议中展开了讨论:
setup() {
  const state = reactive({
    count: 0,
  });

  const double = computed(() => state.count * 2);

  function increment() {
    state.count++;
  }

  return {
    ...toBindings(state), // retains reactivity on mutations made to `state`
    double,
    increment,
  };
}
  • 引入reactive API 和 binding API,其中reactive API 类似于 state API , binding API 类似于 value API。
  • 之前使用的方法名state在 Vue 2.x 中可能被用作组件状态对象,导致变量命名空间的冲突问题,团队认为将state API 更名为 reactive 更为优雅。开发者能够写出const state = ... ,然后通过state.xxxx这种方式来获取组件状态,这样也相对而言自然一些。
  • value方法用于封装基本类型时,确实会出现不够优雅的.value的情况,开发者可能会在直接对包装对象取值时忘记使用.value,修正方案提出的 reactive API,其含义是创建响应式对象,初始化状态state就使用reactive创建,可保留每项属性的getter和setter,这么做既满足类型推导,也可以保留响应式引用,从而可在不同模块中共享状态值的引用。
  • 但reactive可能导致下面的问题,需要引入binding API。 解决,如使用reactive创建的响应式对象,对其使用拓展运算符...时,则会丢失对象的getter和setter,提供toBindings方法能够保留状态的响应式。

下一篇文章中,笔者将阅读vue-function-api的核心部分代码原理,包括setup、observable、lifecycle等,从内部探索 Vue Function API 可能带给我们的改变。

当然,目前 Vue Function API 还处在讨论阶段,Vue 3.0 还处在开发阶段,还是期待下半年 Vue 3.0 的初版问世吧,希望能给我们带来更多的惊喜。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue3.0 CLI - 2.5 - 了解组件的三维

    我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. 问答 1.vue 组件有什么? 为什么要加上 vue,因为不同的 MVC 框架,东西不一样,不过基本的功能都有. 组件有 data.computed.watch.methods 以及生命周期钩子等.对于入门者来说,先搞清楚这些是什么东西. data 属性经过前面几篇文章的学习,对其已有初步的了解. computed 是计算属性,前面也有了解. methods 组件方法,其实是专门定义函数的一个对象,这些函数最终

  • vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 首先美化一下界面 - 相关的界面代码不粘贴,可从我的 github 分支中看到.下面最终的实现效果图: 改造下 data 中的 navs 属性 ( navs 数组每个元素都是 包含 active 和 data 属性的对象 ): created: function () { fetch('https://www.apiopen.top/journalismApi') .then(v => v.json()) .th

  • vue3.0 CLI - 2.1 - component 组件入门教程

    我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. 进入 src 文件夹,这是实际都工程文件夹,其他文件夹以及文件以后在了解. 3个文件夹  assets - 各类静态资源文件夹 - 比如 图片, css 文件等.  components - 组件文件夹, 组件是 vue 等 MVC 框架等核心概念,自行了解含义. view - 视图文件夹. 5个文件  app.vue.main.js - 主视图.配合 main.js 成为 vue 程序的主入口.router.

  • vue3.0 CLI - 2.6 - 组件的复用入门教程

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. ========================== 定义一个基础组件 这个基础组件,是导航条中 可以复用 的基础组件 单个导航. 基础组件[导航组件]基础的功能是能够显示文字,单击的交互方式.明确任务目标之后,进行开发. 在 component 目录下新建 Base 目录,Base 下新建文件 TopNav.vue.加入如下代码: <template> <div class="topnav&q

  • vue3.0中的双向数据绑定方法及优缺点

    熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.defineProperty 替换不是因为不好,是因为有更好的方法使用效率更高 Object.defineProperty的缺点: 1. 在Vue中,Object.defineProperty无法监控到数组下标的变化, 导致直接通过数组的下标给数组设置值,不能实时响应. push() pop() shift() unsh

  • 你了解vue3.0响应式数据怎么实现吗

    从 Proxy 说起 什么是Proxy proxy翻译过来的意思就是"代理",ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层"拦截",返回一个新的代理对象,之后所有在Proxy中被拦截的属性,都可以定制化一些新的流程在上面,先看一个最简单的例子 const target = {}; // 要被代理的原对象 // 用于描述代理过程的handler const handler = { get: function (target,

  • vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) : <template><div class="form"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

  • 初探Vue3.0 中的一大亮点Proxy的使用

    前言 不久前,也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 Vue3.0 Updates 的主题演讲,对 Vue3.0 的更新计划.方向进行了详细阐述,表示已经放弃使用了 Object.defineProperty,而选择了使用更快的原生 Proxy !! 这将会消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制:无法监听 属性的添加和删除.数组索引和长度的变更,并可以支持 Map.Set.W

  • 配置一个vue3.0项目的完整步骤

    说起来有点丢人,我已经使用vue好久了,但是怎么从0开始配置一个vue项目,每次还是要百度.这次决定写个博客,加强下记忆,如果再记不住就直播自己的女朋友洗澡. 以下以新建一个图书管理项目为例.我使用vue3新建项目,对于创建一个项目来说,vue3真的比vue2简单很多. 1.初始化项目 1.1全局安装vue-cli 创建vue项目,首先要确保全局安装了vue命令行工具. 我这边使用yarn而不用npm,因为yarn要比npm好用的多,强烈推荐使用.如果大家对yarn不熟悉,我这边免费赠送我的ya

  • vue3.0 搭建项目总结(详细步骤)

    1.环境配置 项目中的不同开发环境有很多依赖配置,所以可以根据环境设置不同的配置,以免在不同环境经常修改文件 1 在根目录下创建 `.env.[环境]` 文件,可以在不同环境设置一些配置变量,如图 .env.dev 文件 2.eslint 配置 在package.json 文件里面有一个eslintConfig对象,可设置rules: 如图 3.配置svg 在vue.config.js 里面需在module.exports对象里面设置 chainWebpack: config => { conf

  • vue3.0 CLI - 3.2 路由的初级使用教程

    我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支. ========================== 动态路由 在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是  /user/id/ 而是 /user/666/. 显然这个 id 能被获取,在组件中使用.通过 this.$route.params 获取. this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }. $route

  • vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. helloworld.vue 都挪到 about 路由当中. <template><div class="about"><HelloWorld msg="vue 官方相关资料的链接"/></div></template> <script> import HelloWorld from '@/components/

随机推荐