Vue.js 2 vs Vue.js 3的实现 – 云栖社区

vue.js核心团队已经讨论过将在Vue3实现的变化。虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化。这意味着什么呢,同时它对你意味着什么呢?


Vue 2 实现

Vue.js 2 中是通过在Object.defineProperty方法中定义的getters和setters来实现数据响应的。我们看下Vue的响应机制简化版。

Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get:function(){
return value;
},
set:function(newValue){
if(value !== newValue){
value = newValue;
tellTheWorldIhaveChanged(); //somebody is watching!
}
}
});

使用这种类型的设置,每当我们改变属性,它会通知监听者和依赖者,让其知道这里发生了变化。此属性设置是在初始化模型和显式调用Vue.set/vm.$set时发生的。

然而采用这种设置,以下这些操作需要额外的帮助:

  1. 数组按照索引进行更新
data(){
return {
names:[]
}
}
...
this.persons[0] = 'John Elway';

你可能知道这不会触发更新。事实上, the holy guide of Vue明确提到关于数组的警告。为什么会这样的呢?因为数组的setter没办法检测到按照索引赋值的操作。

解决它的一个办法就是使用Vue.set

Vue.set(this.names, 0, 'John Elway');

不过,Vue已经封装了几个数组方法给我们,因此我们可以通过这些数组方法来更新我们的数组。

this.names.push('John Elway');

2. 动态添加属性

data(){
return {
names:[]
}
} ... this.$data.lastAddedName = 'John Elway';

不是很好的例子,对吗?这里我可能提前知道这个属性已经存在,但也有可能我们连属性的名称都不知道。JavaScript 松散的类型允许我们很轻易地添加属性。然而Vue的响应机制并不知道我们添加了这个属性。

让我来拯救这一切! — Vue.set

Vue.set(this.$data,'lastAddedName','John Elway');

如果我们有办法不用vue.set来解决这些问题,而是直接使用数组索引就好了。

Vue 3 实现

欢迎来到通过代理(proxy)实现的响应世界。代理是在ES6(又名ES2015)中引入的一个特性(所以其实它已经出现很久了)。由此,我很确定你已经了解它了,但可能无法在生产环境中使用它们。因为他们是没有替代方法的。没有polyfill,在旧浏览器中无法用别的方式替代。

幸运地是,语法并不荒谬。事实上,这有点眼熟。

let data = {
names:[]
}; data.names = new Proxy(data.names,{
set:function(obj, prop, value){
if(obj[prop] !== value){
obj[prop] = value;
tellTheWorldIhaveChanged();
}
}
});

这个代理不仅会捕捉我们前面提到的数组索引,而且当数组方法被调用时也会触发。并且不需要包装器。

动态添加属性会怎样?

data = new Proxy(data,{
set:function(obj, prop, value){
if(obj[prop] !== value){
obj[prop] = value;
tellTheWorldIhaveChanged();
}
}
}); data.lastAddedName = 'John Elway'; //tellTheWorldIhaveChanged()

天哪,真是太棒了。让我们在Change.org上申请,快速创建一个吧!


总结

我在即将发布的2.5版本之前不久写的这篇文章。Vue 3没有被谈论很多,但我真的很期待上述提到的变化。也就是说,我不能在短期内在工作项目上使用它。为什么?Vue 3不能用于Internet Explorer,并且Babel不能解决兼容问题。

尽管存在兼容性问题,采用新的响应机制有以下几个长远的好处。

  1. 简化源 代码— 这种改写让团队对数组函数进行封装,减少他们做类型检查的次数。

  2. 新手容易学习 — 从响应机制中去掉之前版本里的注意事项将有助于那些学习Vue的新手。论坛上关于数组响应性的一系列问题就会消失。

  3. 更好的性能* — 我听说有些人认为这将加快响应系统的速度。但是它现在已经很快了,所以我还没有完全接受这一观点。

感谢阅读!如果您发现任何错误,请让我知道。

更新

据说这个使用代理的版本将在当前版本号后面添加 _ -next_ (就像esnext),而不是用“Vue 3”。此更新可能跟Vue 2.6同时发布。所以,将会发行Vue2.6和Vue 2.6-next。这将消除对API的困惑。

本文转载自:众成翻译

译者:foreverjiangting

审校: huangxiaolu

链接:http://www.zcfy.cc/article/4369

原文:https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf

Vue.js 2 vs Vue.js 3的实现 – 云栖社区的更多相关文章

  1. Vue2.0 vue-source.js jsonp demo vue跨域请求

    以调用百度的输入提示接口为例 ===================================================================================== ...

  2. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  3. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)

    缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...

  5. vue(1)——node.js安装使用,利用npm安装vue

    node node简介 node.js也是用js开发的语言,而且是一门服务端语言,更有大神利用node写了一个操作系统出来——NodeOS node能干什么 自带下载工具: 对于我们开发前端项目,no ...

  6. 导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法(vue、jq、原生js)

    一.vue如何实现? 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. Js 框架之Vue .JS学习记录 ① 与Vue 初识

    目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备  VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...

  8. 【vue】vue +element 搭建项目,将js函数变成vue的函数

    demo:时间转换 1.目录 <1>在src文件夹下新建文件夹prototypefns--------在此文件夹创建util.js, <2>在prototypefns下新建文件 ...

  9. Vue的理解:Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

随机推荐

  1. tomcat ider配置

    xml文件配置: <servlet> <servlet-name>test1</servlet-name>//设定java文件链接的锚点 <servlet-c ...

  2. vue 上滑加载更多

    移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...

  3. 值得收藏--GitHub Top 20 开源项目

    参考链接:https://github.com/Aufree/trip-to-iOS/blob/master/Top-100.md 项目名称                            项目 ...

  4. 排序算法总结(C++)

    算法复杂度 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面. 不稳定:如果a原本在b的前面,而a=b,排序之后 a 可能会出现在 b 的后面. 时间复杂度:对排序数据的总的操作次数.反映 ...

  5. onunload与onbeforeunload事件解析 标签: 浏览器 2017-04-10 09:46 45人阅读 评论(0)

    注:只测试了chrome和IE浏览器的表现情况 onunload事件 //JS Document window.onunload = onunload_message; function onunlo ...

  6. Golang - 开篇必须吹牛逼

    目录 Golang - 开篇必须吹牛逼 Go牛逼吗 安装环境 Golang - 开篇必须吹牛逼 (1)我们为什么要学 高并发 深度 || 广度 (2)go学习思路和目标 多打多练 掌握go语言 做一个 ...

  7. 【Codeforces 996B】World Cup

    [链接] 我是链接,点我呀:) [题意] [题解] 你可以找出来a[i]里面的最小值mi,显然是这个数字最可能先变成0,但还不确定. 然后用mi/n得到你最少需要走多少圈才能让那个mi变成" ...

  8. web开发如何使用高德地图API(一)浏览器定位

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  9. MySQL 索引分析

    MySQL复合唯一索引分析 关于复合唯一索引(unique key 或 unique index),网上搜索不少人说:"这种索引起到的关键作用是约束,查询时性能上没有得到提高或者查询时根本没 ...

  10. IE-FSC

    Top3: Top2: FSC related to Redis: (Redis = https://www.cnblogs.com/ngtest/p/10693750.html) FSC statu ...