精华内容
下载资源
问答
  • 进入2020年,离vue3.0正式版发布时间越来越近了。今天,借助尤雨溪大大提前发布vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可...
    4f4f3e1ebd6325b0c46244ae6014d99c.png

    进入2020年,离vue3.0正式版发布的时间越来越近了。今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。

    vue3的变化可以总结为以下几点:

    • 更小
    • 更快
    • 加强typescript支持
    • Api一致性
    • 提高可维护能力
    • 开放更多底层功能

    其中前三点是最主要的变化。

    更小:

    vue2采用面向对象编程的思想,vue3则采用函数式编程的思想。

    vue2源码中代码是这样组织的:

    function vue(){...} vue.prototype.init = ...

    vue3源码中是这样组织的:

    //监听方法:function watch(){...} //渲染方法:function render(){...}

    原因:充分利用函数式编程组合大于继承的优势,采用函数式编程更利于逻辑功能的复用,webpack打包时更有利于tree-shaking,更利于代码的压缩,更利于返回值类型校验,压缩后的文件体积更小。

    更快:

    vue3修改了虚拟dom的算法(即diff算法 - 比对虚拟dom有没有变化)

    vue2需要diff所有的虚拟dom节点,而vue3参考了SVELTE框架的思想,先分层次-然后找不变化的层-针对变化的层进行diff,更新速度不会再受template大小的影响,而是仅由可变的内容决定。经过尤雨溪自己的测试,大概有6倍的速度提升。

    加强typescript支持:

    vue3的源码开始采用了ts进行编写,给开发者也提供了支持ts的开发模式。

    Api一致性

    vue3最开始的版本可以完美兼容vue2的api。

    提高可维护能力

    从源码的层面上提供了更多的可维护能力。

    开放更多底层功能

    把更多的底层功能开放出来,比如render、依赖收集功能,我们可以更好的进行自定义化开发,可以写更多的高阶组件。

    最后我们再谈谈两者在数据双向绑定方面的区别。

    数据双向绑定:

    关于数据双向绑定的实现,vue2 采用了defineProperty,而vue3则采用了proxy。

    优点:

    1. 使用proxy不污染源对象,会返回一个新对象,defineProperty是注入型的,会破坏源对象
    2. 使用proxy只需要监听整个源对象的属性,不需要循环使用Object.defineProperty监听对象的属性
    3. 使用proxy可以获取到对象属性的更多参数,使用defineProperty只能获取到监听属性的新值newvalue
    /* vue2.0*/var a = { b:123, c:444};Object.defineProperty(a,'b',{     set: function(newvalue){       console.log('i am be set')     }}) //只能获取到newvalue这个参数/* vue3.0 */var a={ b:123, c:444};var newa = new Proxy(a,{     set:function(target,key,newvalue){         console.log(target,key,newvalue)     }}) //可以获取到target,key,newvalue三个参数

    希望整理的这些内容对大家有所帮助。最后老K提前祝大家春节快乐!!!

    e94d914402eef723f154598ee1bd7ec9.gif

    本文为原创内容,若转载请注明出处,转发感激不尽。

    展开全文
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。原文:...

    Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。

    原文:https://github.com/vuejs/vue-next/releases

    作者:Vue 团队

    译文:https://zhuanlan.zhihu.com/p/254219538

    译者:QC-L

    今天,我们非常自豪地宣布 Vue.js 3.0 "One Piece" 发布。本次主版本更新包含性能的改进,更小的 bundle 体积,对 TypeScript 更好的支持,用于处理大规模用例的全新 API,以及为框架未来的长期迭代奠定了夯实的基础。

    3.0 的发布意味着两年多以来的努力,其中包含 30+ RFC[1],2600+ commits,99 位贡献者[2]所提交的 628 个 PR[3],还有许多除核心仓库以外的开发及文档编写工作。在此对 Vue 团队成员表示最深切的感谢,感谢贡献者们提交的 PR,感谢赞助商和 sponsors[4] 的资金支持,感谢广大社区成员参与预发布版本的设计与谈论,并提供反馈。Vue 是一个独立项目,为社区建立,也由社区维护,没有大家的鼎立支持,Vue 3.0 是不可能实现的。

    进一步推进 "渐进式框架" 概念

    Vue 从开始就有一个简单的使命:成为任何人都能快速学习且平易近人的框架。随着我们用户群体的增长,框架的应用范围也在不断扩大,以适应不断迭代的需求。随着时间的流逝,它演变成了 "渐进式框架":一个可以逐步学习和采用的框架,同时为用户提供持续支持,以应对越来越多的苛刻场景。

    时至今日,我们在全球拥有 130 多万的用户,我们看到 Vue 被应用于各种不同的场景中的可能,从在传统的服务端渲染页面之上添加交互,到拥有数百个组件的完整单页应用。Vue 3.0 将这种灵活性进一步提升。

    分离内部模块

    Vue 3.0 核心仍然通过一个简单的 标签来使用,但其内部结构已经被重写,并解耦成一个个模块的集合[5]。新的架构下为源码提供了更好的可维护性,并允许终端用户通过 tree-shaking 的形式将减少一半的运行时体积。

    这些模块还暴露了底层 API,解锁了许多高级用法:

    • 编译器支持自定义 AST 转换,用于在构建时自定义(如,在构建时进行 i18n 操作[6])
    • 核心运行时提供了一系列 API,用于针对不同渲染目标(如 native moile[7]WebGL[8]终端[9])的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。
    • `@vue/reactivity` 模块[10]导出的功能,可以直接访问 Vue 的响应式系统。并且可以作为一个独立的包进行使用。它可以与其他模块解决方案配对使用(如 lit-html[11]),甚至是在非 UI 场景中使用。

    用于解决规模问题的全新 API

    在 Vue 3.0 中,基于对象的 2.x API 基本没有变化,并引入了 Composition API[12] — 一套全新的 API,旨在解决 Vue 在大规模应用场景中的痛点。Composition API 构建于响应式 API 之上,实现了类似于 React hook 的逻辑组成与复用,相较于 2.x 基于对象的 API 方式来说,拥有更加灵活的代码组织模式,以及更为可靠的类型推断能力。

    Composition API 同时还提供了适用于 Vue 2.x 的版本,可通过 `@vue/composition-api`[13] 插件来在项目中使用,目前已有适用于 Vue 2 和 Vue 3 的 Composition API 实用的工具库(如 `vueuse`[14]`vue-composable`[15])。

    性能提升

    Vue 3 与 Vue 2 相比,在 bundle 包大小方面(tree-shaking 减少了 41% 的体积),初始渲染速度方面(快了 55%),更新速度方面(快了 133%)以及内存占用方面(减少了 54%)都有着显著的性能提升[16]

    在 3.0 中,我们采取了 “编译信息虚拟 DOM” 的方式:针对模板编译器进行了优化,并生成渲染函数代码,以提升静态内容的渲染性能,为绑定类型留下运行时提示,最为重要的是,模板内部的动态节点进行了扁平化处理,以减少运行时遍历的开销。因此,用户可以获得两全其美的效果,从模板中获得编译器优化后的性能,或在需要时通过手动渲染函数直接控制。

    改进与 TypeScript 的兼容

    Vue 3 的代码库完全采用 TypeScript 编写,自动生成、测试并构建类型声明,因此它们总为最新。Composition API 可以很好的进行类型推断。Vetur,官方推出的 VSCode 插件,现已支持对模板表达式和 props 的类型检查,同时,Vue 3 已全面支持 TSX[17]

    实验特性

    我们为单文件组件提出了两个新特性[18](SFC,又称为 .vue 文件):

    • :在 SFC 内使用 Composition API 的语法糖
    • :在 SFC 中支持将状态作为 CSS 变量注入到样式中

    这些特性在 3.0 中均已实现且可用,但提供这些特性的目的只是为了收集反馈。在最终合并到 RFC 之前,这些特性仍是实验性的。

    我们还实现了一个目前尚未编写文档的 组件,它允许在初始渲染或 branch 切换时,等待嵌套的异步依赖(异步组件或带有 async setup() 组件)。我们正在与 Nuxt.js 团队一起测试和迭代此功能(Nuxt 3 正在开发中[19]),并可能会在 3.1 时完善它。

    分阶段发布

    Vue 3.0 的发布意味着本框架的整体准备就绪。虽然框架的一些子项目还需进一步完善才能达到稳定状态(特别是 router 以及 Vuex 与 devtools 的集成),但我们相信现在已经可以使用 Vue 3 开启全新的项目。同时,我们也鼓励库作者开始升级项目以支持 Vue 3。

    查阅 Vue 3 的库指南[20],以了解框架所有子项目的详细进展。

    迁移与 IE11 的支持

    由于时间限制,我们推迟了迁移构建(v3 兼容 v2 的构建,以及迁移警告)和兼容 IE11 的计划,并打算在 2020 年 Q4 集中进行。因此,计划迁移现有 v2 应用或需要兼容 IE11 的用户,目前应注意限制。

    下一阶段工作

    对于发布后的一段时间内,我们将重点关注:

    • 迁移构建
    • 支持 IE11
    • Router 以及 Vuex 与 devtools 的集成
    • 对 Vetur 中模板类型推断的进一步改进

    目前,Vue 3 及其相关子项目的文档站、github 分支以及 npm 的 dist 标签都将保持在 next 状态。这意味着 npm install vue 仍会安装 2.x 版本,而通过 npm install vue@next 将会安装 v3 版本。我们计划在 2020 年底之前将所有文档链接,分支以及 npm 标签全部切为 3.0。

    与此同时,我们已开始规划 2.7 版本,这将会是 2.x 的最后一个小版本。2.7 将与 v3 进行兼容改进,并对使用 v3 中已删除/更改的 API 发出警告,以更好的帮助 3.0 的迁移升级工作。我们计划在 2021 年 Q1 进行 2.7 的工作,发布后将直接成为 LTS 版本,维护周期为 18 个月。

    试用

    欲了解更多关于 Vue 3.0 的信息,请查阅全新的文档站[21],如果你是 2.x 的老用户,请直接查看迁移指南章节[22]

    关注我们

    我们将为你带来最前沿的前端资讯。

    b6f3cc51b0ee88a3c7f8fd3c4089dd7f.png

    参考资料

    [1]

    30+ RFC: https://github.com/vuejs/rfcs/tree/master/active-rfcs

    [2]

    99 位贡献者: https://github.com/vuejs/vue-next/graphs/contributors

    [3]

    628 个 PR: https://github.com/vuejs/vue-next/pulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview++sort%3Aupdated-desc

    [4]

    赞助商和 sponsors: https://github.com/vuejs/vue/blob/dev/BACKERS.md

    [5]

    解耦成一个个模块的集合: https://github.com/vuejs/vue-next/tree/master/packages

    [6]

    在构建时进行 i18n 操作: https://github.com/intlify/vue-i18n-extensions

    [7]

    native moile: https://github.com/rigor789/nativescript-vue-next

    [8]

    WebGL: https://github.com/Planning-nl/vugel

    [9]

    终端: https://github.com/ycmjason/vuminal

    [10]

    @vue/reactivity 模块: https://github.com/vuejs/vue-next/tree/master/packages/reactivity

    [11]

    lit-html: https://github.com/yyx990803/vue-lit

    [12]

    Composition API: https://v3.vuejs.org/guide/composition-api-introduction.html

    [13]

    @vue/composition-api: https://github.com/vuejs/composition-api

    [14]

    vueuse: https://github.com/antfu/vueuse

    [15]

    vue-composable: https://github.com/pikax/vue-composable

    [16]

    显著的性能提升: https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEaig-cVAAJtpIGLZNbv3Lr4CR0/edit?usp=sharing

    [17]

    Vue 3 已全面支持 TSX: https://github.com/vuejs/vue-next/blob/master/test-dts/defineComponent.test-d.tsx

    [18]

    两个新特性: https://github.com/vuejs/rfcs/pull/182

    [19]

    Nuxt 3 正在开发中: https://nuxtjs.slides.com/atinux/state-of-nuxt-2020

    [20]

    Vue 3 库指南: https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries

    [21]

    全新的文档站: https://v3.vuejs.org/

    [22]

    迁移指南章节: https://v3.vuejs.org/guide/migration/introduction.html

    展开全文
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,...

    Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。

    原文:https://github.com/vuejs/vue-next/releases

    作者:Vue 团队

    译文:https://zhuanlan.zhihu.com/p/254219538

    译者:QC-L

    今天,我们非常自豪地宣布 Vue.js 3.0 "One Piece" 发布。本次主版本更新包含性能的改进,更小的 bundle 体积,对 TypeScript 更好的支持,用于处理大规模用例的全新 API,以及为框架未来的长期迭代奠定了夯实的基础。

    3.0 的发布意味着两年多以来的努力,其中包含 30+ RFC[1],2600+ commits,99 位贡献者[2]所提交的 628 个 PR[3],还有许多除核心仓库以外的开发及文档编写工作。在此对 Vue 团队成员表示最深切的感谢,感谢贡献者们提交的 PR,感谢赞助商和 sponsors[4] 的资金支持,感谢广大社区成员参与预发布版本的设计与谈论,并提供反馈。Vue 是一个独立项目,为社区建立,也由社区维护,没有大家的鼎立支持,Vue 3.0 是不可能实现的。

    进一步推进 "渐进式框架" 概念

    Vue 从开始就有一个简单的使命:成为任何人都能快速学习且平易近人的框架。随着我们用户群体的增长,框架的应用范围也在不断扩大,以适应不断迭代的需求。随着时间的流逝,它演变成了 "渐进式框架":一个可以逐步学习和采用的框架,同时为用户提供持续支持,以应对越来越多的苛刻场景。

    时至今日,我们在全球拥有 130 多万的用户,我们看到 Vue 被应用于各种不同的场景中的可能,从在传统的服务端渲染页面之上添加交互,到拥有数百个组件的完整单页应用。Vue 3.0 将这种灵活性进一步提升。

    分离内部模块

    Vue 3.0 核心仍然通过一个简单的 <script> 标签来使用,但其内部结构已经被重写,并解耦成一个个模块的集合[5]。新的架构下为源码提供了更好的可维护性,并允许终端用户通过 tree-shaking 的形式将减少一半的运行时体积。

    这些模块还暴露了底层 API,解锁了许多高级用法:

    • 编译器支持自定义 AST 转换,用于在构建时自定义(如,在构建时进行 i18n 操作[6]

    • 核心运行时提供了一系列 API,用于针对不同渲染目标(如 native moile[7]WebGL[8] 或终端[9])的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。

    • `@vue/reactivity` 模块[10]导出的功能,可以直接访问 Vue 的响应式系统。并且可以作为一个独立的包进行使用。它可以与其他模块解决方案配对使用(如 lit-html[11]),甚至是在非 UI 场景中使用。

    用于解决规模问题的全新 API

    在 Vue 3.0 中,基于对象的 2.x API 基本没有变化,并引入了 Composition API[12] — 一套全新的 API,旨在解决 Vue 在大规模应用场景中的痛点。Composition API 构建于响应式 API 之上,实现了类似于 React hook 的逻辑组成与复用,相较于 2.x 基于对象的 API 方式来说,拥有更加灵活的代码组织模式,以及更为可靠的类型推断能力。

    Composition API 同时还提供了适用于 Vue 2.x 的版本,可通过 `@vue/composition-api`[13] 插件来在项目中使用,目前已有适用于 Vue 2 和 Vue 3 的 Composition API 实用的工具库(如 `vueuse`[14]`vue-composable`[15])。

    性能提升

    Vue 3 与 Vue 2 相比,在 bundle 包大小方面(tree-shaking 减少了 41% 的体积),初始渲染速度方面(快了 55%),更新速度方面(快了 133%)以及内存占用方面(减少了 54%)都有着显著的性能提升[16]

    在 3.0 中,我们采取了 “编译信息虚拟 DOM” 的方式:针对模板编译器进行了优化,并生成渲染函数代码,以提升静态内容的渲染性能,为绑定类型留下运行时提示,最为重要的是,模板内部的动态节点进行了扁平化处理,以减少运行时遍历的开销。因此,用户可以获得两全其美的效果,从模板中获得编译器优化后的性能,或在需要时通过手动渲染函数直接控制。

    改进与 TypeScript 的兼容

    Vue 3 的代码库完全采用 TypeScript 编写,自动生成、测试并构建类型声明,因此它们总为最新。Composition API 可以很好的进行类型推断。Vetur,官方推出的 VSCode 插件,现已支持对模板表达式和 props 的类型检查,同时,Vue 3 已全面支持 TSX[17]

    实验特性

    我们为单文件组件提出了两个新特性[18](SFC,又称为 .vue 文件):

    • <script setup>:在 SFC 内使用 Composition API 的语法糖

    • <style vars>:在 SFC 中支持将状态作为 CSS 变量注入到样式中

    这些特性在 3.0 中均已实现且可用,但提供这些特性的目的只是为了收集反馈。在最终合并到 RFC 之前,这些特性仍是实验性的。

    我们还实现了一个目前尚未编写文档的 <Suspense> 组件,它允许在初始渲染或 branch 切换时,等待嵌套的异步依赖(异步组件或带有 async setup() 组件)。我们正在与 Nuxt.js 团队一起测试和迭代此功能(Nuxt 3 正在开发中[19]),并可能会在 3.1 时完善它。

    分阶段发布

    Vue 3.0 的发布意味着本框架的整体准备就绪。虽然框架的一些子项目还需进一步完善才能达到稳定状态(特别是 router 以及 Vuex 与 devtools 的集成),但我们相信现在已经可以使用 Vue 3 开启全新的项目。同时,我们也鼓励库作者开始升级项目以支持 Vue 3。

    查阅 Vue 3 的库指南[20],以了解框架所有子项目的详细进展。

    迁移与 IE11 的支持

    由于时间限制,我们推迟了迁移构建(v3 兼容 v2 的构建,以及迁移警告)和兼容 IE11 的计划,并打算在 2020 年 Q4 集中进行。因此,计划迁移现有 v2 应用或需要兼容 IE11 的用户,目前应注意限制。

    下一阶段工作

    对于发布后的一段时间内,我们将重点关注:

    • 迁移构建

    • 支持 IE11

    • Router 以及 Vuex 与 devtools 的集成

    • 对 Vetur 中模板类型推断的进一步改进

    目前,Vue 3 及其相关子项目的文档站、github 分支以及 npm 的 dist 标签都将保持在 next 状态。这意味着 npm install vue 仍会安装 2.x 版本,而通过 npm install vue@next 将会安装 v3 版本。我们计划在 2020 年底之前将所有文档链接,分支以及 npm 标签全部切为 3.0。

    与此同时,我们已开始规划 2.7 版本,这将会是 2.x 的最后一个小版本。2.7 将与 v3 进行兼容改进,并对使用 v3 中已删除/更改的 API 发出警告,以更好的帮助 3.0 的迁移升级工作。我们计划在 2021 年 Q1 进行 2.7 的工作,发布后将直接成为 LTS 版本,维护周期为 18 个月。

    试用

    欲了解更多关于 Vue 3.0 的信息,请查阅全新的文档站[21],如果你是 2.x 的老用户,请直接查看迁移指南章节[22]

    关注我们

    我们将为你带来最前沿的前端资讯。

    参考资料

    [1]

    30+ RFC: https://github.com/vuejs/rfcs/tree/master/active-rfcs

    [2]

    99 位贡献者: https://github.com/vuejs/vue-next/graphs/contributors

    [3]

    628 个 PR: https://github.com/vuejs/vue-next/pulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview++sort%3Aupdated-desc

    [4]

    赞助商和 sponsors: https://github.com/vuejs/vue/blob/dev/BACKERS.md

    [5]

    解耦成一个个模块的集合: https://github.com/vuejs/vue-next/tree/master/packages

    [6]

    在构建时进行 i18n 操作: https://github.com/intlify/vue-i18n-extensions

    [7]

    native moile: https://github.com/rigor789/nativescript-vue-next

    [8]

    WebGL: https://github.com/Planning-nl/vugel

    [9]

    终端: https://github.com/ycmjason/vuminal

    [10]

    @vue/reactivity 模块: https://github.com/vuejs/vue-next/tree/master/packages/reactivity

    [11]

    lit-html: https://github.com/yyx990803/vue-lit

    [12]

    Composition API: https://v3.vuejs.org/guide/composition-api-introduction.html

    [13]

    @vue/composition-apihttps://github.com/vuejs/composition-api

    [14]

    vueusehttps://github.com/antfu/vueuse

    [15]

    vue-composablehttps://github.com/pikax/vue-composable

    [16]

    显著的性能提升: https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEaig-cVAAJtpIGLZNbv3Lr4CR0/edit?usp=sharing

    [17]

    Vue 3 已全面支持 TSX: https://github.com/vuejs/vue-next/blob/master/test-dts/defineComponent.test-d.tsx

    [18]

    两个新特性: https://github.com/vuejs/rfcs/pull/182

    [19]

    Nuxt 3 正在开发中: https://nuxtjs.slides.com/atinux/state-of-nuxt-2020

    [20]

    Vue 3 库指南: https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries

    [21]

    全新的文档站: https://v3.vuejs.org/

    [22]

    迁移指南章节: https://v3.vuejs.org/guide/migration/introduction.html

    专注分享当下最实用的前端技术。关注前端达人,与达人一起学习进步!

    长按关注"前端达人"

    展开全文
  • vue3.0从正式发布到推广,还需要一段时间 vue2.x应用范围广,有大量项目需要维护升级 proxy存在兼容性问题,且不能ployfill 社区热门知识点:Proxy重写响应式讲解 回顾vue2.*的响应式原理 [object.defindeProperty] ...
    vue3.0 升级内容

    全部用TS重写的(响应式、vdom、模本编译)
    性能提升,减少代码量
    会调整部分API
    Proxy重写响应式

    vue2.x 马上要过时了吗

    vue3.0从正式发布到推广,还需要一段时间
    vue2.x应用范围广,有大量项目需要维护升级
    proxy存在兼容性问题,且不能ployfill

    社区热门知识点:Proxy重写响应式讲解

    回顾vue2.*的响应式原理 [object.defindeProperty]

    object.defindeProperty缺点:

    • 深度监听需要一次性递归
    • 无法监听新增属性/删除属性(vue.set/vue.delete)
    • 无法原生监听数组,需要特殊处理

    vue3_Proxy实现响应式原理

    前置知识

    Proxy ES6语法 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。
    Proxy 可以理解成, 在目标对象之前架设一层“ 拦截”, 外界对该对象的访问, 都必须先通过这层拦截, 因此提供了一种机制, 可以对外界的访问进行过滤和改写。

    语法:const p = new Proxy(target, handler)
    target 要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)
    handler 一个通常以函数作为属性的对象, 各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
    handler.get() 方法用于拦截对象的读取属性操作。
    handler.set() 方法是设置属性值操作的捕获器。
    handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作

    Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法这些方法与proxy handlers的方法相同。

    Reflect.get(target, propertyKey[, receiver])
    Reflect.deleteProperty(target, propertyKey)
    Reflect.set(target, propertyKey, value[, receiver])
    target: 需要取值的目标对象; key: 需要获取的值的键值;value::设置的值。
    如果target对象中指定了getter, receiver则为getter调用时的this值

    1. Proxy对数据拦截监听的基本使用

    1、用Proxy将目标对象data进行包装拦截处理如下:

    const proxyData = new Proxy(data, {
        get(target, key, receiver) {
            const result = Reflect.get(target, key, receiver)
            console.log('get', key) //监听
            return result //返回结果
        },
        set(target, key, value, receiver) {
            const result = Reflect.set(target, key, value, receiver)
            console.log('set', key, value) //set age 30
            return result //是否设置成功
        },
        deleteProperty(target, key) {
            const result = Reflect.deleteProperty(target, key)
            console.log('delete property', key) //delete property name
            return result //是否删除成功
        },
    })
    

    2、定义data为对象,并对data对象进行操作时

    const data = {
        name: 'lili',
        age: 20,
    }
    // 对象操作
    proxyData.age // get操作  :  get age
    proxyData.age = 30 // set操作 :  set age 30
    proxyData.sex = "女" // set操作 :  set sex 女
    delete proxyData.name // 删除操作 : delete property name
    

    不足:
    在对象设置属性时,无法确定是新增属性还是原有属性;

    3、定义data为数组,并对data数组进行操作

    const data =['a','b','c']
    
    proxyData.push('d') 
    // get push  push()方法触发
    // get length //获取数组长度
    // set 3 d //设置值
    // set length 4 设置数组长度
    

    不足:
    给数组添加元素时,没必监听 原型的属性,如push(),只需要监听本身(非原型)的属性,
    set 3 d,set length 4 为重复处理同一个数据,set length 4多余

    2. Proxy对数据拦截监听使用的优化

    针对以上问题,对Proxy对数据拦截监听使用进行优化

    1.在对象设置属性时,无法确定是新增属性还是原有属性
    在set方法中判断

    const ownKeys = Reflect.ownKeys(target)
    if (ownKeys.includes(key)) {
    	console.log('已有的 key') //监听
    } else {
    	console.log('新增的 key')
    }
    

    2、在监听属性时,只监听本身(非原型)的属性

    在get方法中,判断如果是自身的属性,才进行监听

    // Reflect.ownKeys()方法可以返回包含Symbol属性在内的自有属性。
    const ownKeys = Reflect.ownKeys(target)
    if (ownKeys.includes(key)) {
        console.log('get',key)//监听
    }
    
    

    3、重复的数据不处理

    在 set方法中,重复数据不处理

    const oldVal=target[key]
    if (value === oldVal) {
        return true
    }
    

    以上问题,Proxy对数据拦截监听使用的优化后:

    const proxyData = new Proxy(data, {
      // target:目标对象、 key:被捕获的属性名、receiver:Proxy或者继承Proxy的对象
      get(target, key, receiver) {
        // 只监听 处理本身(非原型)的属性
        const ownKeys = Reflect.ownKeys(target)
        if (ownKeys.includes(key)) {
          console.log('get', key) //监听
        }
        const result = Reflect.get(target, key, receiver)
        return result //返回结果
      },
      // value 新属性值。
      set(target, key, value, receiver) {
    		const ownKeys = Reflect.ownKeys(target)
        if (ownKeys.includes(key)) {
          console.log('已有的 key') //监听
        } else {
          console.log('新增的 key')
        }
        // 重复的数据不处理
        if (value === target[key]) {
          return true
        }
        const result = Reflect.set(target, key, value, receiver)
        console.log('set', key, value) //set age 30
        return result //是否设置成功
      },
      deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key) //delete property name
        return result //是否删除成功
      },
    })
    

    定义data为数组,并对data数组进行操作时

    const data =['a','b','c']
    
    proxyData.push('d') 
    // get length //获取数组长度
    // set 3 d //设置值
    

    实现了只保留了对自身属性的监听,重复数据没有重复设置

    3. Proxy实现响应式

    实现思路:
    ① 创建响应式方法reactive(data),该方法可以传入需要处理的数据对象data
    函数内逻辑:
    ② 判断 data 是否为 对象或者数组,不是直接返回
    ③ 创建 Proxy 代理对象,Proxy对象中传入data
    Proxy 代理对象中的方法配置:
    ④ 在get()方法对数据的进行监听:只监听 处理本身(非原型)的属性;在返回结果中采用递归调用reactive(),实现对数据的深度监听
    ⑤ 在 set() 方法中进行数据的新增和更新:判断是否是新增数据;重复的数据不处理;
    ⑥ 在 deleteProperty() 方法中对数据进行删除操作;
    实例:
    ⑦ 定义数据data,传入响应式方法中,返回的值proxyData为实现响应式的可操作数据

    // 创建响应式
    function reactive(target = {}) {
      if (typeof target != 'object' || target == null) {
        // 不是对象或者数组,则返回
        return target
      }
      // 代理配置 生成代理对象
      return observed = new Proxy(target, {
        // target:目标对象、 key:被捕获的属性名、receiver:Proxy或者继承Proxy的对象
        get(target, key, receiver) {
          // 只监听 处理本身(非原型)的属性 ,如push()
          const ownKeys = Reflect.ownKeys(target)
          if (ownKeys.includes(key)) {
            console.log('get', key) //监听
          }
          const result = Reflect.get(target, key, receiver)
          // return result //返回结果
          // 深度监听
          // 性能如何提升的?
          return reactive(result) //递归get处理 实现深度监听
        },
        // value 新属性值。
        set(target, key, value, receiver) {
          // 判断是否是新增属性
          const ownKeys = Reflect.ownKeys(target)
          if (ownKeys.includes(key)) {
            console.log('已有的 key') //监听
          } else {
            console.log('新增的 key')
          }
          // 重复的数据不处理
          const oldVal = target[key]
          if (value === oldVal) {
            return true
          }
          const result = Reflect.set(target, key, value, receiver)
          console.log('set', key, value) //set age 30
          return result //是否设置成功
        },
        deleteProperty(target, key) {
          const result = Reflect.deleteProperty(target, key)
          console.log('delete property', key) //delete property name
          console.log('result', result) //result true
          return result //是否删除成功
        },
      })
    
    }
    
    
    // 测试数据
    const data = {
      name: 'lili',
      age: 20,
      info: {
        city: "beijing"
      }
    }
    const proxyData = reactive(data)
    

    vue3.0 与 vue2.* 实现响应式 比较

    vue3.0 基于 Proxy 实现响应式
    vue2.0 基于 Oject.defineProperty 实现响应式

    相较于vue2,Proxy 实现响应式:

    • 深度监听,性能更好
    • 可监听新增删除的属性
    • 可监听数组变化

    总结:

    • Proxy 能规避 Oject.defineProperty的问题
    • Proxy无法兼容所有浏览器,无法 polyfill

    Reflect的作用总结

    • 1.和 Proxy 能力一一对应

    • 2.规范化、标准化、函数式

    const obj={a:100,b:200}
    'a' in obj //true
    Reflect.has(obj,'a')//true
    
    delete obj.b //true
    Reflect.deleteProperty(obj,'b') //true
    
    • 3.替代掉Object上的工具函数
    const obj={a:100,b:200}
    Object.getOwnPropertyNames(obj) //["a", "b"]
    Reflect.ownKeys(obj) // ["a", "b"]
    
    展开全文
  • 进入2020年,离vue3.0正式版发布时间越来越近了。今天,借助尤雨溪大大提前发布vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可...
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。原文:...
  • vue3.0 上手体验

    2020-10-14 18:13:18
    vue3.0 beta 版本已经发布有一段时间了,今天这篇文章就带大家体验一下,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue3.0的优势

    2021-01-08 17:53:50
    因为现在Vue3.0发布了正式版,我也抽时间出来学习了一下,自己总结了一下Vue3.0相比Vue2.0的优势,如有不足欢迎评论区里指出! Vue3.0的优势 1.性能比Vue2.x快了1.2~2.0倍。 2.支持按需编译,体积比Vue2.x更小。 3...
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。原文:...
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。原文:...
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。原文:...
  • 浅析Vue3.0响应式原理

    2021-02-06 13:18:06
    vue3.0发布以来也好几个月了,最近也一直在忙碌手头上的工作,没有时间来学习vue3.0。刚好快要过年了,公司的事情不是很多,这才抽出时间来学习下vue3.0的响应式原理! 回顾Vue2.x 响应式原理 利用观察者模式 + ...
  • Vue 3.0中jsx语法的使用

    2021-01-21 10:54:12
    Vue 3.0 正式发布了,喜大普奔:beaming_face_with_smiling_eyes:。新的语法又要学习一阵阵,不过需要在生产环境下大面积使用,可能需要等到它的周边工具:vuex,vue-router 等等全部升级完毕。 Vue 3.0 中尤大使用的...
  • | 来源:公众号《前端全栈开发者》随着Vue 3最近进入发布候选阶段,是你尝试一下的绝佳时机。要马上开始,你需要使用...Vue3系列文章:迎接Vue3.0系列 | Vue3中的Vue Router初探 迎接Vue3.0系列 | 如何在Vue2与Vue3...
  • 最近经常有小伙伴问我一些关于 Vue3.0 的问题,有些甚至恐慌 Vue3.0 发布后自己不会咋办?会不会以后就要失业了呢?当一些新技术的出现,总有些人会对自己不自信,当然,你问我怕不怕?说实话,我是一点都不慌的,...
  • Vuejs 3.0 在北京时间2020年9月19日凌晨,终于发布了 3.0 版本,代号:One ...Vue3.0发布链接​github.comVue 是当前非常流行的框架,Vue3.0更是酝酿了2年多的时间,经过2600多次commit,600多次PR,中间也发布了...
  • | 来源:公众号《前端全栈开发者》随着Vue 3最近进入发布候选阶段,是你尝试一下的绝佳时机。要马上开始,你需要使用...Vue3系列文章:迎接Vue3.0系列 | Vue3中的Vue Router初探 迎接Vue3.0系列 | 如何在Vue2与Vue3...
  • vue3.0发布已经有一段时间了,那么你现在对它的了解有多少呢? 激动又忐忑的你是不是在各大网站上看到各种关于vue3.0的介绍分析呢? “vue2.0我还一知半解,what? 3.0都有了?” ????小仙同学已经get到大家强烈的...
  • VUE3.0(0)

    2021-01-18 09:57:05
    一.VUE3.0的开始 1.为什么要开始学习Vue3.0? -因为正式版已经发版一段时间 逐渐趋于稳定 - 新年到来公司企业都会 有一些改革规划 新技术必不可少 - 当然学习也不是一蹴而就 对于新版本的 开发社区 正在逐步完善 ...
  • vue3.0生命周期详解

    2021-03-21 09:50:28
    VUE3.0发布有一段时间了,最近学习了下生命周期 与 2.x 版本相对应的生命周期钩子 Vue2.x vue3 beforeCreate setup() created setup() mounted onMounted beforeUpdate onBeforeUpdate ...
  • 还有几个月距离 vue2 的首次发布就满 3 年了,而 vue 的作者尤雨溪也在去年年末发布了关于 vue3.0 的计划,如果不出意外,我们将在今年的某个时间点见证 Vue3.0发布,虽然前几天在《StateOfJS: ...
  • 最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3.0 + Vant 3.0 搭建种子...
  • 关于在 vue3.0 版本中使用类似 vue2.0 中 vux的实践(ps: 因为vue3.0 已经可以选择取消...近期公司要做一个新项目,想着 vue3.0 发布也有一段时间了还没用过,不如就试试vue3.0特性如何,后经讨论,一致决定使用vue3.0
  • 但是,Vue3.0发布还是有点时间的,并且正式发布也不代表我们就马上就可以用于业务开发。它还需要完善相应的生态工具。不过正式使用是一码事,我们自己玩又是一码事(hh)。 Vue3.0特地准备了一个尝鲜版的项目供...
  • Vue 3.0 终于正正正正正式发布了!

    千次阅读 2020-09-19 17:36:33
    Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,...
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。原文:...
  • Vue3.0 终终终于要来了!

    千次阅读 2019-01-17 20:00:00
    距离尤雨溪大神在Vue.js 伦敦大会上介绍 Vue 3.0发布的内容,并在 medium 个人博客上发布Vue 3.0 的开发路线,已经有一段时间了,不出意外19年会...
  • 作者:Mingle转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ前言背景:2019年2月6号,React 发布 「16.8.0」 版本,vue紧随其后,发布了「vue3.0 RFC」Vue3.0受React16.0 推出的hook抄袭启发(咳咳......

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 154
精华内容 61
关键字:

vue3.0发布时间

vue 订阅