Vue3(4)，2024最新前端大厂面试题来袭

最新推荐文章于 2024-05-16 23:53:56 发布

努力马斯克

最新推荐文章于 2024-05-16 23:53:56 发布

阅读量905

点赞数 20

分类专栏： 2024年程序员学习文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_60452293/article/details/137243480

版权

2024年程序员学习专栏收录该内容

331 篇文章 2 订阅

订阅专栏

说到重用，Compostion API的方式也比mixin的方式好很多，你可以清楚的看到组件使用的数据和方法来自哪个模块，而mixin进组件的功能，常常会让我们困惑此功能来自哪个mixin。

四、更好的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,

required: true

}

setup() {

const year = ref(2020)

const month = ref<string | number>(‘9’)

month.value = 9 // OK

const result = year.value.split(‘’) // => Property ‘split’ does not exist on type ‘number’

}

复制代码

五、自定义渲染API（Custom Renderer API）

vue2.x架构问题

vue2.x最开始支持运行在浏览器中，渲染到浏览器的dom上，随着vue的流行，出现了weex和myvue。

weex：移动端跨平台方案，需要渲染到移动设备。weex被写在vue原项目里，缺点是这使vue原项目更大了，也不是通用解决方案。
myvue：小程序上使用，需要渲染到小程序框架上。myvue是单独fork一份源代码进行更改，缺点也非常明显，myvue中vue的版本跟官方版本从fork的那一刻开始，就要开始不一致了。

vue2.x项目架构对于这种渲染到不同平台不太友好，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 渲染生成函数了。

// 你自己实现一个createApp，比如是渲染到canvas的。

import { createApp } from “./runtime-render”;

import App from “./src/App”; // 根组件

createApp(App).mount(‘#app’);

复制代码

有了Custom Renderer API，如weex和myvue这类方案的问题就得到了完美解决。只需重写createApp即可。

六，更先进的组件

Fragment组件

// vue2是不允许这样写的，组件必须有一个跟节点，现在可以这样写，vue将为我们创建一个虚拟的Fragment节点。

Hello

World

复制代码

这样写有何好处呢？一是如果根节点不是必要的，无需创建了，减少了节点数。二是Fragment节点是虚拟的，不会DOM树中呈现。

Suspense组件

Loading…

复制代码

在Suspended-component完全渲染之前，备用内容会被显示出来。如果是异步组件，Suspense可以等待组件被下载，或者在设置函数中执行一些异步操作。

七、更快的开发体验（vite开发构建工具）

在使用webpack作为开发构建工具时，npm run dev都要等一会，项目越大等的时间越长。热重载页有几秒的延迟，但是如果用vite来做vue3的开发构建工具，npm run dev 秒开，热重载也很快。这种开发体验真是很爽，拒绝等待。

vite的原理还是用了浏览器支持import关键字了，启动项目不用webpack构建工具先构建了，浏览器直接请求路由对应的代码文件，代理服务器针对单个文件进行编译并返回。如果请求的文件里还import了其他文件，同理浏览器继续发请求，代理服务器返回。就这样实现了npm run dev时无需编译，实时请求实时编译。

总结：

其他的，数据监听方式变成了Proxy，消除了Object.defineProperty现有的限制（例如无法检测新的属性添加），并提供更好的性能。

vue3解决了vue2的一些问题，大型应用的性能问题、ts支持不友好问题，自定义渲染API解决体系架构存在的问题，如果在vue3的基础上实现weex框架会好很多。也做出了很多优化，Compostion API让代码的组织形式更好。vite开发构建工具让开发体验更好，Tree shaking让包更小、性能更优。

总的来说vue3还是非常棒的，带来了很多非常好的新特性。