浅析 Vue 3.0 的组装式 API(一)


Posted in Javascript onAugust 31, 2020

(一)响应式数据

1. 简单例子

从最简单的数据绑定开始,在 Vue 2.0 中,我们这样将一个数据绑定到模板的指定位置:

在组件创建参数的 data 构造函数中返回一个用来绑定的数据对象,其中有个 now 字段,会被渲染到模板内的 .app > p 内。

<template>
  <div class="app">
    <h1>Hello world!</h1>
    <p>Now is: {{now.toString()}}</p>
  </div>
</template>

<script>
// Vue 2.0
export default {
  data() {
    return {
      now: new Date(),
    };
  },
};
</script>

用 Vue3 的组装 API 实现的话,则是这样:

// Vue 3.0
export default {
  setup() {
    return {
      now: new Date(),
    };
  },
};

2. 更新数据

奇怪,看起来好像没啥区别,只是把 data 改成了 setup 吗?

并不是,假如我们现在对这个 DEMO 做个小改动,让它每秒钟刷新一次时间,用 Vue2 大概是这样实现:

// Vue 2.0
export default {
  data() {
    return {
      now: new Date(),
    };
  },
  mounted() {
    setInterval(() => this.now = new Date(), 1000);
  },
};

而 Vue3 的等效实现则为:

// Vue 3.0
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const now = ref(new Date());
    onMounted(() => {
      setInterval(() => now.value = new Date(), 1000);
    });
    return {
      now,
    };
  },
};

3. 对比分析

写了太多 Vue 的我们可能已经忘了,Vue2 的代码从标准 JS 模块的角度来看有多奇怪:

  • mounted 中修改的 this.now 数据是在哪创建的?我们在模块 default 对象的成员里并没有找到对应字段,倒是在 data 内返回的另一个对象中有这个字段;
  • data 中返回的 now 也不是真正的 this.now,而是 this.now 的初始值,在 data setInterval 修改 now 并不能更新渲染出来的时间;
  • 如果想复用这个数据和它的更新逻辑,你必须将这样的结构单独写一份,然后通过特殊的 mixin 函数混入到当前组件的构造参数内。

这一切,是因为整个模块 default 对象其实是 vm 对象的构造参数。其背后隐藏了对象的创建逻辑,在构造对象时构造参数中的一些不同层级的字段被绑定到了 vm 对象上。

不少新手可能都犯过一个错误,在 data 中返回的数据字段和 propsmethods 或者 computed 中的字段命名撞车(尤其是使用名为 data 的字段),在编码阶段并不能被 IDE 直接发现。就是因为上面的原因,这些字段创建时隶属于不同的位置,在之后构造时才被绑在了同一个对象上,导致了运行时才能发现的冲突。

Vue3 中,改成提供 refreactivetoRefonMounted 等函数的形式实现,例子中:

  • setup 中看到的 now 即是用于绑定的 this.now
  • 修改 now.value 即可看到页面状态的更新;
  • 如果要封装这份数据处理,只需要将 nowonMounted 处理提取到同一个函数内,再将 now 返回即可,不再需要黑盒的 mixin 处理。

可以说 Vue3 是直接将响应数据的创建决定权、生命周期的通知回调,都通过 API 的形式交给了开发者,更直观明了和可控。

4. API 说明

下面详细说说常用的几个响应式数据相关 API:ref, reactive toRefs

(1) ref

上面例子中使用到的 ref,可以将一个数据包装成响应式数据代理对象。

const count = ref(0);
console.log(count.value); // => 0

count.value++;
console.log(count.value); // => 1

当你修改代理对象的 count.value 属性时,模板中使用到 count 的位置将响应数据的变化,更新视图中的数据状态。

(2) reactive

对于对象的响应式封装,使用 ref 稍显麻烦:

const state = ref({
  count: 0,
});
console.log(state.value.count); // => 0

state.value.count++;
console.log(state.value.count); // => 1

这时可以改为使用 reactive,像操作普通对象的字段一样修改 count 即可更新视图:

const state = reactive({
  count: 0,
});
console.log(state.count); // => 0

state.count++;
console.log(state.count); // => 1

对代理对象 state 添加新的字段也可触发视图更新。

(3) toRefs

有时候,对象的名字过长,我们想直接在模板内使用对象内部字段,直接使用解构是不行的:

import { reactive } from 'vue';

export default {
  setup() {
    const position = reactive({
      x: 0,
      y: 0,
    });
    return {
      // 错误,解构出来的 x, y 并没有响应式代理。绑定到模板上后,数据变化无法触发视图更新
      ...position,
    };
  },
};

这个情况下,使用 toRefs 处理后再解构赋值即可:

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const position = reactive({
      x: 0,
      y: 0,
    });
    return {
      ...toRefs(position),
    };
  },
};

但需要注意,toRefs 只处理调用时 position 的现有字段,如果在之后对 position 增加新字段,将无法触发视图更新。

以上就是浅析 Vue 3.0 的组装式 API(一)的详细内容,更多关于Vue 组装式 API的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
关于element的表单组件整理笔记
Feb 05 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue中v-model对select的绑定操作
Aug 31 #Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 #Javascript
vue绑定数字类型 value为数字的实例
Aug 31 #Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 #Javascript
详解Node.JS模块 process
Aug 31 #Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 #Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 #Javascript
You might like
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
python3访问sina首页中文的处理方法
2014/02/24 Python
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
在python中pandas的series合并方法
2018/11/12 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python中可以声明变量类型吗
2020/06/18 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
介绍Java的内部类
2012/10/27 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
三八妇女节趣味活动方案
2014/08/23 职场文书
2014年学生工作总结
2014/11/20 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python