浅析 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 相关文章推荐
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
js中的this的指向问题详解
Aug 29 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
python打开网页和暂停实例
2014/09/30 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python3如何判断三角形的类型
2020/04/12 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
人力管理专业毕业生求职信
2014/02/27 职场文书
商务英语专业求职信
2014/06/26 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
党支部书记岗位职责
2015/02/15 职场文书
经营场所证明范本
2015/06/19 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers