笔记摘自:https://vue3js.cn (opens new window)的前端面试题库
Web是World Wide Web的简称,中文译为万维网我们可以将它规划成如下的几个时代来进行理解
石器时代指的就是我们的静态网页,可以欣赏一下1997的Apple官网
最早的网页是没有数据库的,可以理解成就是一张可以在网络上浏览的报纸,直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互,如当时的Google(1998年)
ASP,JSP大家应该都不会太陌生,最早出现于 2005 年左右,先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ,增强了 WEB 与服务端的交互的安全性,类似于下面这样,其实就是Java + HTML
JSP有一个很大的缺点,就是不太灵活,因为JSP是在服务器端执行的,通常返回该客户端的就是一个HTML文本。我们每次的请求:获取的数据、内容的加载,都是服务器为我们返回渲染完成之后的 DOM,这也就使得我们开发网站的灵活度大打折扣在这种情况下,同年:Ajax火了(小细节,这里为什么说火了,因为 Ajax 技术并不是 2005 年出现的,他的雏形是 1999 年),现在看来很常见的技术手段,在当时可是珍贵无比
到这里大家就更熟悉了,移动设备的普及,Jquery的出现,以及SPA(Single Page Application 单页面应用)的雏形,Backbone EmberJS AngularJS 这样一批前端框架随之出现,但当时SPA的路不好走,例如SEO问题,SPA 过多的页面、复杂场景下 View 的绑定等,都没有很好的处理经过这几年的飞速发展,节约了开发人员大量的精力、降低了开发者和开发过程的门槛,极大提升了开发效率和迭代速度,我们可以称之其为工业时代。
这里没有文字,放一张图感受一下
PS:这里为什么要说这么多Web的历史,我们可以看到Web技术的变化之大与快,每一种新的技术出现都是一些特定场景的解决方案,那我们今天的主角Vue又是为了解决什么呢?我们接着往下看
Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明,Vue有着89%的开发者满意度。在GitHub上,该项目平均每天能收获95颗星,为Github有史以来星标数第3多的项目同时也是一款流行的JavaScript前端框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互PS: Vue作者尤雨溪是在为AngularJS工作之后开发出了这一框架。 他声称自己的思路是提取Angular中为自己所喜欢的部分,构建出一款相当轻量的框架最早发布于2014年2月。
MVVM
表示的是 Model-View-ViewModel
这时候需要一张直观的关系图,如下
1.什么是组件化一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue
中每一个.vue
文件都可以视为一个组件2.组件化的优势
解释:指令 (Directives) 是带有 v- 前缀的特殊属性作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
v-if
v-for
v-bind
v-on
v-model
没有指令之前我们是怎么做的?是不是先要获取到DOM然后在....干点啥
没有落地使用场景的革命不是好革命,就以一个高频的应用场景来示意吧注册账号这个需求大家应该很熟悉了,如下
用jquery
来实现大概的思路就是选择流程dom对象,点击按钮隐藏当前活动流程dom对象,显示下一流程dom对象如下图(代码就不上了,上了就篇文章就没了..)
用vue
来实现,我们知道vue
基本不操作dom
节点, 双向绑定使dom
节点跟视图绑定后,通过修改变量的值控制dom
节点的各类属性。所以其实现思路为:视图层使用一变量控制dom节点显示与否,点击按钮则改变该变量,如下图
总结就是:
这里就做几个简单的类比吧,当然没有好坏之分,只是使用场景不同
Vue
的weex
、React
的React native
Vue
的vue-cli
、React
的Create React App
react
从诞生开始就推崇单向数据流,而Vue
是双向数据流react
使用的是不可变数据,而Vue
使用的是可变的数据react
中我们通过使用回调函数来进行通信的,而Vue
中子组件向父组件传递消息有两种方式:事件和回调函数react
主要使用diff队列保存需要更新哪些DOM,得到patch树,再统一操作批量更新DOM。Vue
使用双向指针,边对比,边更新DOM关于vue3
的重构背景,尤大是这样说的:
「Vue 新版本的理念成型于 2018 年末,当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久,但在这段时期,前端世界已经今昔非比了
在我们更新(和重写)Vue 的主要版本时,主要考虑两点因素:首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平;其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」
简要就是:
从上图中,我们可以概览Vue3
的新特性,如下:
vue3
相比vue2
Dom
实现undate
性能提高1.3~2倍SSR
速度提高了2~3倍通过webpack
的tree-shaking
功能,可以将无用模块“剪辑”,仅打包需要的
能够tree-shaking
,有两大好处:
vue
实现更多其他的功能,而不必担忧整体体积过大vue
可以开发出更多其他的功能,而不必担忧vue
打包出来的整体体积过多
Options API
一起使用Vue3
模块可以和其他框架搭配使用VUE3
是基于typescipt
编写的,可以享受到自动的类型定义提示
可以自定义渲染 API
响应式 Api
暴露出来
轻松识别组件重新渲染原因
Vue 3 中需要关注的一些新功能包括:
在 Vue3.x
中,组件现在支持有多个根节点
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
Teleport
是一种能够将我们的模板移动到 DOM
中 Vue app
之外的其他位置的技术,就有点像哆啦A梦的“任意门”
在vue2
中,像 modals
,toast
等这样的元素,如果我们嵌套在 Vue
的某个组件内部,那么处理嵌套组件的定位、z-index
和样式就会变得很困难
通过Teleport
,我们可以在组件的逻辑位置写模板代码,然后在 Vue
应用范围之外渲染它
<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
<div v-if="visible" class="toast-wrap">
<div class="toast-msg">我是一个 Toast 文案</div>
</div>
</teleport>
通过createRenderer
,我们能够构建自定义渲染器,我们能够将 vue
的开发模型扩展到其他平台
我们可以将其生成在canvas
画布上
关于createRenderer
,我们了解下基本使用,就不展开讲述了
import { createRenderer } from '@vue/runtime-core'
const { render, createApp } = createRenderer({
patchProp,
insert,
remove,
createElement,
// ...
})
export { render, createApp }
export * from '@vue/runtime-core'
composition Api,也就是组合式api
,通过这种形式,我们能够更加容易维护我们的代码,将相同功能的变量进行一个集中式的管理
关于compositon api
的使用,这里以下图展开
简单使用:
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
onMounted(() => console.log('component mounted!'))
return {
count,
double,
increment
}
}
}
Vue API
已更改为使用应用程序实例API
已经被重构为可 tree-shakable
v-model
用法已更改<template v-for>
和 非 v-for
节点上key
用法已更改v-if
和 v-for
优先级已更改v-bind="object"
现在排序敏感v-for
中的 ref
不再注册 ref
数组functional
属性在单文件组件 (SFC)
defineAsyncComponent
方法来创建API
改变class
被重命名了: v-enter
-> v-enter-from
v-leave
-> v-leave-from
watch
选项和实例方法 $watch
不再支持点分隔字符串路径,请改用计算函数作为参数Vue 2.x
中,应用根容器的 outerHTML
将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。VUE3.x
现在使用应用程序容器的 innerHTML
。destroyed
生命周期选项被重命名为 unmounted
beforeDestroy
生命周期选项被重命名为 beforeUnmount
[prop default
工厂函数不再有权访问 this
是上下文data
应始终声明为函数mixin
的 data
选项现在可简单地合并attribute
强制策略已更改class
被重命名$watch
不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。<template>
没有特殊指令的标记 (v-if/else-if/else
、v-for
或 v-slot
) 现在被视为普通元素,并将生成原生的 <template>
元素,而不是渲染其内部内容。Vue 2.x
中,应用根容器的 outerHTML
将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。Vue 3.x
现在使用应用容器的 innerHTML
,这意味着容器本身不再被视为模板的一部分。keyCode
支持作为 v-on
的修饰符filter
attribute
$destroy
实例方法。用户不应再手动管理单个Vue
组件的生命周期。