江苏龙网

  1. 主页 > 生活百科 > >

vue3，对比 vue2 有什么优点？( 二 )

vue


当静态内容大到一个量级的时候，会用_createStaticVNode 方法在客户端去生成一个 static node，这些静态 node，会被直接 innerHtml，就不需要再创建对象，然后根据对象渲染 。
优点5：更好的Ts支持vue2不适合使用ts，原因在于vue2的Option API风格 。options是个简单对象，而ts是一种类型系统、面向对象的语法 。两者有点不匹配 。
在vue2结合ts的具体实践中，要用 vue-class-component 强化 vue 组件，让 Script 支持 TypeScript 装饰器，用 vue-property-decorator 来增加更多结合 Vue 特性的装饰器，最终搞的ts的组件写法和js的组件写法差别挺大 。
在vue3中，量身打造了defineComponent函数，使组件在ts下，更好的利用参数类型推断。Composition API 代码风格中，比较有代表性的api就是 ref 和 reactive，也很好的支持了类型声明 。
import { defineComponent, ref } from 'vue'const Component = defineComponent({props: {success: { type: String },student: {type: Object as PropType<Student>,required: true}},setup() {const year = ref(2020)const month = ref<string | number>('9')month.value = https://www.isolves.com/it/cxkf/bk/2021-09-16/9 // OKconst result = year.value.split('')}优点6：Compostion API: 组合API/注入API传统的网页是html/css/JAVAscript（结构/样式/逻辑）分离 。vue通过组件化的方式，将联系紧密的结构/样式/逻辑放在一起，有利于代码的维护 。compostionapi更进一步，着力于JS（逻辑）部分，将逻辑相关的代码放在一起，这样更有利于代码的维护 。
在vue2的组件内使用的是Option API风格(data/methods/mounted)来组织的代码，这样会让逻辑分散，举个例子就是我们完成一个计数器功能，要在data里声明变量，在methods定义响应函数，在mounted里初始化变量，如果在一个功能比较多、代码量比较大的组件里，你要维护这样一个功能，就需要在data/methods/mounted反复的切换到对应位置，然后进行代码的更改 。
而在vue3中，使用setup函数 。如下所示跟count相关的逻辑，都放到counter.js文件里，跟todo相关的逻辑放到todos.js里 。
import useCounter from './counter'import useTodo from './todos'setup(){let { val, todos, addTodo } = useTodo()let {count,add} = useCounter() return {val, todos, addTodo,count,add,}优点7：更先进的组件vue2是不允许这样写的，组件必须有一个跟节点，现在可以这样写，vue将为我们创建一个虚拟的Fragment节点 。
<template><div>华为云享专家</div><div>全栈领域博主</div></template>在Suspended-component完全渲染之前，备用内容会被显示出来 。如果是异步组件，Suspense可以等待组件被下载，或者在设置函数中执行一些异步操作 。
优点8：自定义渲染APIvue2.x项目架构对于weex（移动端跨平台方案）和myvue（小程序上使用）等渲染到不同平台不太友好，vue3.0推出了自定义渲染API解决了该问题 。下面我们先看vue2和vue3的入口写法有哪些不同 。
vue2
import Vue from 'vue'import App from './App.vue'new Vue({ => h(App)}).$mount('#app')vue3
const { createApp } from 'vue'import App from "./src/App"createApp(App).mount(('#app')vue官方实现的 createApp 会给我们的 template 映射生成 html 代码，但是要是你不想渲染生成到 html，而是要渲染生成到 canvas 之类的不是html的代码的时候，那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了 。
import { createApp } from "./runtime-render";import App from "./src/App"; // 根组件createApp(App).mount('#app');使用自定义渲染API，如weex和myvue这类方案的问题就得到了完美解决 。只需重写createApp即可 。
优点9：按需编译，体积比vue2.x更小框架的大小也会影响其性能 。这是 Web 应用程序的唯一关注点，因为需要即时下载资源，在浏览器解析必要的JavaScript 之前该应用程序是不可交互的 。对于单页应用程序尤其如此 。尽管 Vue 一直是相对轻量级的（Vue 2 的运行时大小压缩为 23 KB） 。
在 Vue 3 中，通过将大多数全局 API 和内部帮助程序移至 ES 模块导出来，实现了这一目标 。这使现代的打包工具可以静态分析模块依赖性并删除未使用的导出相关的代码 。模板编译器还会生成友好的 Tree-shaking 代码，在模板中实际使用了该功能时才导入该功能的帮助程序 。
框架的某些部分永远不会 Tree-shaking，因为它们对于任何类型的应用都是必不可少的 。我们将这些必不可少的部分的度量标准称为基准尺寸 。尽管增加了许多新功能，但 Vue 3 的基准大小压缩后约为 10 KB，还不到 Vue 2 的一半 。


推荐阅读


上一篇：中国白茶十大知名品牌,中国五大茶叶排行榜

下一篇：草籽花图片,草籽拼音