vue3新特性

时间:?2021-10-06阅读:?17标签:?特性

vue3.0的设计目标可以概括为体积更小,速度更快,加强TypeScript支持,加强API设计一致性,提高自身可维护性,开放更多底层功能。

描述

vue2到Vue3在一些比较重要的方面的详细对比。

生命周期的变化

  • Vue2 -> Vue3
  • beforeCreate -> setup
  • created -> setup
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • activated -> onActivated
  • deactivated -> onDeactivated
  • errorCaptured -> onErrorCaptured
  • renderTracked -> onRenderTracked
  • renderTriggered -> onRenderTriggered

在这里主要是增加了setup这个生命周期,而其他的生命周期都是以API的形式调用,实际上随着Composition API的引入,我们访问这些钩子函数的方式已经改变,我们所有的生命周期都应该写在setup中,此方法我们应该实现大多数组件代码,并处理响应式,生命周期钩子函数等。

Copy
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured, onRenderTracked, onRenderTriggered } from "vue"; export default { setup() { onBeforeMount(() => { // ... }) onMounted(() => { // ... }) onBeforeUpdate(() => { // ... }) onUpdated(() => { // ... }) onBeforeUnmount(() => { // ... }) onUnmounted(() => { // ... }) onActivated(() => { // ... }) onDeactivated(() => { // ... }) onErrorCaptured(() => { // ... }) onRenderTracked(() => { // ... }) onRenderTriggered(() => { // ... }) } }

使用proxy代替defineProperty

Vue2是通过数据劫持的方式来实现响应式的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,该方法允许精确地添加或修改对象的属性,对数据添加属性描述符中的getter与setter存取描述符实现劫持。Vue2之所以只能兼容到IE8主要就是因为defineProperty无法兼容IE8,其他浏览器也会存在轻微兼容问题。

Copy
var obj = { __x: 1 }; Object.defineProperty(obj, "x", { set: function(x){ console.log("watch"); this.__x = x; }, get: function(){ return this.__x; } }); obj.x = 11; // watch console.log(obj.x); // 11

Vue3使用Proxy实现数据劫持,Object.defineProperty只能监听属性,而Proxy能监听整个对象,通过调用new Proxy(),可以创建一个代理用来替代另一个对象被称为目标,这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当作同一个对象来对待。代理允许拦截在目标对象上的底层操作,而这原本是js引擎的内部能力,拦截行为使用了一个能够响应特定操作的函数,即通过Proxy去对一个对象进行代理之后,我们将得到一个和被代理对象几乎完全一样的对象,并且可以从底层实现对这个对象进行完全的监控。Proxy对象是ES6引入的新特性,Vue3放弃使用了Object.defineProperty,而选择了使用更快的原生Proxy,即是在兼容性方面更偏向于现代浏览器

Copy
var target = {a: 1}; var proxy = new Proxy(target, { set: function(target, key, value, receiver){ console.log("watch"); return Reflect.set(target, key, value, receiver); }, get: function(target, key, receiver){ return target[key]; } }); proxy.a = 11; // watch console.log(target); // { a: 11 }

diff算法的提升

diff算法的基础是Virtual DOM,Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这棵树映射到真实环境上,简单来说Virtual DOM就是一个js对象,用以描述整个文档。
Vue2框架通过深度递归遍历新旧两个虚拟DOM树,并比较每个节点上的每个属性,来确定实际DOM的哪些部分需要更新,由于现代JavaScript引擎执行的高级优化,这种有点暴力的算法通常非常快速,但是DOM的更新仍然涉及许多不必要的CPU工作。
在这里引用尤大的描述,为了实现这一点,编译器和运行时需要协同工作:编译器分析模板并生成带有优化提示的代码,而运行时尽可能获取提示并采用快速路径,这里有三个主要的优化:

  • 首先,在DOM树级别,我们注意到,在没有动态改变节点结构的模板指令(例如v-if和v-for)的情况下,节点结构保持完全静态,如果我们将一个模板分成由这些结构指令分隔的嵌套块,则每个块中的节点结构将再次完全静态,当我们更新块中的节点时,我们不再需要递归遍历DOM树,该块内的动态绑定可以在一个平面数组中跟踪,这种优化通过将需要执行的树遍历量减少一个数量级来规避虚拟DOM的大部分开销。
  • 其次,编译器积极地检测模板中的静态节点,子树甚至数据对象,并在生成的代码中将它们提升到渲染函数之外,这样可以避免在每次渲染时重新创建这些对象,从而大大提高内存使用率并减少垃圾回收的频率。
  • 第三,在元素级别,编译器还根据需要执行的更新类型,为每个具有动态绑定的元素生成一个优化标志,例如具有动态类绑定和许多静态属性的元素将收到一个标志,提示只需要进行类检查,运行时将获取这些提示并采用专用的快速路径。

TypeScript的支持

Vue2中使用的都是Js,其本身并没有类型系统这个概念,现如今TypeScript异常火爆,对于规模很大的项目,没有类型声明,后期维护和代码的阅读都是头疼的事情,虽然Vue2实际上也是可以使用TS的,但是支持并不算特别完美,此外Vue2的源码也是使用Facebook的Flow做类型检查。
最终Vue3借鉴了react Hook实现了更自由的编程方式,提出了Composition API,Composition API不需要通过指定一长串选项来定义组件,而是允许用户像编写函数一样自由地表达,组合和重用有状态的组件逻辑,同时提供出色的TypeScript支持。

打包体积变化

Vue2官方说明运行时打包23k,但这只是没安装依赖的时候,随着依赖包和框架特性的增多,有时候不必要的,未使用的代码文件都被打包了进去,所以后期项目大了,打包文件会特别多还很大。
在Vue3中,通过将大多数全局API和内部帮助程序移动到JavaScript的module.exports属性上实现这一点,这允许现代模式下的module bundler能够静态地分析模块依赖关系,并删除与未使用的module.exports属性相关的代码,模板编译器还生成了对Tree Shaking摇树优化友好的代码,只有在模板中实际使用某个特性时,该代码才导入该特性的帮助程序,尽管增加了许多新特性,但Vue3被压缩后的基线大小约为10KB,不到Vue2的一半。

非兼容变更

Vue3相对于Vue2的非兼容的变更概括,详情可以查阅https://v3.cn.vuejs.org/guide/migration/introduction.html

全局API

  • 全局Vue API已更改为使用应用程序实例。
  • 全局和内部API已经被重构为可tree-shakable。

模板指令

  • 组件上v-model用法已更改,替换v-bind.sync。
  • <template v-for>和非v-for节点上key用法已更改。
  • 在同一元素上使用的v-if和v-for优先级已更改。
  • v-bind="object"现在排序敏感。
  • v-on:event.native修饰符已移除。
  • v-for中的ref不再注册ref数组。

组件

  • 只能使用普通函数创建功能组件。
  • functional属性在SFC单文件组件<template>和functional组件选项被抛弃。
  • 异步组件现在需要defineAsyncComponent方法来创建。
  • 组件事件现在需要在emits选项中声明。

渲染函数

  • 渲染函数API改变。
  • $scopedSlots property已删除,所有插槽都通过$slots作为函数暴露。
  • $listeners被移除或整合到$attrs。
  • $attrs现在包含class and style attribute。

自定义元素

  • 自定义元素白名单现在已经在编译时执行。
  • 对特殊的is prop的使用只严格限制在被保留的<component>标记中。

其他小改变

  • destroyed生命周期选项被重命名为unmounted。
  • beforeDestroy生命周期选项被重命名为beforeUnmount。
  • default prop工厂函数不再可以访问this上下文。
  • 自定义指令API已更改为与组件生命周期一致。
  • data选项应始终被声明为一个函数。
  • 来自mixin的data选项现在为浅合并。
  • Attribute强制策略已更改。
  • 一些过渡class被重命名。
  • <TransitionGroup>不再默认渲染包裹元素。
  • 当侦听一个数组时,只有当数组被替换时,回调才会触发,如果需要在变更时触发,则需要指定deep选项。
  • 没有特殊指令的标记v-if/else-if/else,v-for,v-slot的<template>现在被视为普通元素,并将生成原生的<template>元素,而不是渲染其内部内容。
  • 在Vue2中,应用根容器的outerhtml将替换为根组件模板,如果根组件没有模板/渲染选项,则最终编译为模板,Vue3现在使用应用容器的innerHTML,这意味着容器本身不再被视为模板的一部分。

移除API

  • keyCode支持作为v-on的修饰符。
  • $on,$off和$once实例方法
  • 过滤器方法,建议用计算属性或方法代替过滤器。
  • 内联模板attribute。
  • $children实例property。
  • $destroy实例方法,用户不应再手动管理单个Vue组件的生命周期。

示例

Vue3的组件简单示例,可查看在线示例https://codesandbox.io/s/c1437?file=/src/App.vue。

Copy
<template> <div> <div>{{ msg }}</div> <div>count: {{ count }}</div> <div>double-count: {{ doubleCount }}</div> <button @click="multCount(3)">count => count*3</button> </div> </template> <script> import { onMounted, reactive, computed } from "vue"; export default { name: "App", components: {}, setup: () => { /* 定义data */ const data = reactive({ msg: "Hello World", count: 1, }); /* 处理生命周期 */ onMounted(() => { console.log("Mounted"); }); /* 处理computed */ const computeds = { doubleCount: computed(() => data.count * 2), }; /* 定义methods */ const methods = { multCount: function (n) { data.count = data.count * n; }, }; /* 返回数据 */ return Object.assign(data, computeds, methods); }, }; </script> <style> </style>

来自:https://www.cnblogs.com/WindrunnerMax/p/14394440.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10692

Html5,Css3,ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

h5和css3的新特性有哪些?

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准。CSS3是CSS(层叠样式表)技术的升级版本。下面我们来看一下HTML5余css3的新特性有哪些。

ES12(2021)新特性: replaceAll,Promise.any,WeakRefs,数字分隔符,逻辑运算符和赋值表达式

2021年3月13日,ES2021 候选提案发布了其最终功能集的版本。如果它能够在今年6月的ECMA 大会上通过,就会成为官方的标准!这个候选提案提及到ECMAScript新特性如下所示:

盘点ECMAScript 2021(ES12)中有新特性!

今天主要介绍一下 ECMAScript 2021(ES12)的一部分的 JS 功能。逻辑赋值操作符,数字分隔符(1_000),Promise.any 与 AggregateError,String.prototype.replaceAll,WeakRefs 与 FinalizationRegistry 对象

ES7(2016)新特性:Array.prototype.includes(),指数操作符

ES7(2016)新增了两个新特性:数组includes()方法,用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false。a ** b指数运算符,它与 Math.pow(a, b)相同。

CSS 特性和值

CSS 声明可以为空,或者由 CSS 特性( property ),后加一个冒号 :,跟着是一个特性的值构成。中间可以有空格将它们隔开。

ECMAScript 11 新特性

matchAll 用于字符串批量匹配正则, 返回一个 可迭代对象;类的私有属性;Promise.allSettled()不管参数中的promise是fulfilled还是rejected,都会等参数中的实例都返回结果,包装实例才会结束。

解密HTTP/2与HTTP/3 的新特性

HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

ES6(2015)新特性:类,模块化,箭头,函数参数默认值,模板字符串

ES6带来了特别多的新特性,新方法。对我们旺球体育在线工作人员的编码习惯和编码模式都带来了翻天覆地的变化。ES6是ECMA Script的第六个大版本,从ES2015开始,ECMA Script不再使用版本号作为更新标志,而是改成年份来标记,但是大家还是愿意用ES6来称呼ES2015

使用 React 要懂的 Js特性

与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

点击更多...

内容以共享,参考,研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu