2024年前端最新Vue3(37)，头条面试后几天有结果

最新推荐文章于 2024-10-18 18:45:22 发布

2401_84620191

最新推荐文章于 2024-10-18 18:45:22 发布

阅读量899

点赞数 21

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84620191/article/details/138811056

版权

程序员专栏收录该内容

88 篇文章 0 订阅

订阅专栏

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在vue3中，对于不参与更新的vnode，会做静态提升，只会被创建一次，在re-render时直接复用。

静态提升可以理解为第一次render不参与更新的vnode节点的时候，保存它们的引用。re-render新vdom树时，直接拿它们的引用过来即可，无需重新创建。

事件侦听缓存

在vue2中，我们写的@click="onClick"也是被当作动态属性，diff的时候也要对比。但我们知道它不会变化，比如变成@click=“onClick2”，绑定别的值。

在vue3中，如果事件是不会变化的，会将onClick缓存起来（跟静态提升达到的效果类似），该节点也不会被标记上PatchFlag（也就是无需更新的节点）。这样在render和diff两个阶段，事件侦听属性都节约了不必要的性能消耗。

我曾经维护过一个拥有很庞大dom树的页面。由于节点非常多，无需参与更新的节点也很多，使用vue2的情况下，在render和diff两个阶段，消费了很多性能，如果当时有vue3的话，我想性能会被优化很多。

减少创建组件实例的开销

vue2.x每创建一个实例，在this上要暴露data、props、computed这些，都是靠Object.defineProperty去定义的。这部分操作还是挺费时的。

vue3.0中基于Proxy，减少了创建组件实例的性能开销。

二、按需编译，体积比Vue2.x更小（Tree shaking）

在vue3中，可以如下面这样引用vue的功能函数，如果你的项目没有用到watch，那编译时就会把tree shaking掉。

import { computed, watch, nextTick } from “vue”;

复制代码

利用的就是 ES6 模块系统import/export。

三、Compostion API: 组合API/注入API

这里要说到代码的组织方式，传统的网页是html/css/javascript（结构/样式/逻辑）分离。vue/react通过组件化的方式，将联系紧密的结构/样式/逻辑放在一起，有利于代码的维护。

compostion api更进一步，着力于JavaScript（逻辑）部分，将逻辑相关的代码放在一起，近而有利于代码的维护。

在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,

}

复制代码

在我看来这就是Compostion API最大的特点，以功能为单位的代码组织方式。同时它可以让代码更易重用。

说到重用，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 渲染生成函数了。