本教程操作环境:windows7系统、vue3版,DELL G3电脑。 什么是Vue.js Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 ,Vue.js 也能驱动复杂的单页应用。 Vue.js的优点
其实抛开官方的一些不知所云的说法,简单来说,在传统web开发中,我们搭建项目都以html结构为基础,然后通过jquery或者js来添加各种特效功能,需要去选中每一个元素进行命令。 这些内容在简单的项目中或者不变的项目中还能应付得来,一旦项目改动或者项目工程较大,代码的修改将是复杂繁琐的。 而这时候用了vue,这些问题都不复存在。在比如一些单网页制作成的应用程序,一般涉及到数据交互的内容都很多,而应用了vue之后将大大缩减工作量。 vue在web开发,网站制作中有哪些显著优势? 1、数据绑定:vue会根据对应的元素,进行设置元素数据,通过输入框,以及get获取数据等多种方式进行数据的实时绑定,进行网页及应用的数据渲染 。 2、组件式开发:通过vue的模块封装,它可以将一个web开发中设计的各种模块进行拆分,变成单独的组件,然后通过数据绑定,调用对应模版组件,同时传入参数,即可完成对整个项目的开发。 使用vue有什么好处?
1、响应式性能提升 1)diff方法优化 diff 算法是虚拟 DOM 技术的必然产物,它会对新旧 DOM 进行比较,然后将变化的 DOM 更新在真实的 DOM 上。使用vue,在创建虚拟 DOM 的时候,会根据 DOM 中的内容添加一个静态标记,在数据发生改变的时候,就会带着静态标记的节点去对比,能够快速找到变化的 DOM 。 2)事件侦听器缓存 默认情况下onClick会被视为动态绑定,所以每次都会追踪它的变化,但是因为是同一个函数,所以不用追踪变化,直接缓存起来复用即可。 3)ssr渲染 当存在大量静态内容时,这些内容会被当做纯字符串推进一个 buffer 内,即使存在动态绑定,也会通过模板插值潜入进去,这样会比虚拟 DOM 渲染快得多。 2、代码体积减少 打包大小减少41%。 vue 移除了一些不常用的 API,如:inline-template、filter 等,使用 tree-shaking。 Tree Shaking 摇树优化,指的就是当我们引入一个模块的时候,不引入这个模块的所有代码,只引入我们需要的代码。 在vue 中,引入tree-shaking,所有的 API 都通过 ES6 模块化的方式引入,这样就能够让 webpack 或 rollup 等打包工具在打包时,就会自动对没有用到的 API 进行剔除,最小化 bundle 体积。 初次渲染快55%, 更新渲染快133%。组件选择了按需引入,使得打包后的体积也更小了,所以项目运行的时候速度更快,更顺畅了! 3、编译被优化 vue 使用静态提升后,对于不参与更新的元素,只会被创建一次,在渲染时直接复用就好了。 Fragment模板内不用再创建一个唯一根节点,可以直接放同级标签和内容。就相当于少了一个节点嵌套渲染。 4、组合式API vue 新增了组合式 api ,更有利于维护和封装。一个功能模块代码会集中到一起,实现高内聚,低耦合。提高代码的可读性和可维护性,基于函数组合的 api 更好地重用逻辑代码。 5、更好的 ts 支持 vue 新增了 defineComponent 函数,使组件在 ts 下,更好的利用参数类型推断。如:reactive 和 ref 很具有代表性。 6、更先进的组件
7、简单总结: vue 目前是国内最火的前端框架之一,vue 性能提升、运行速度也比其他框架好很多。 总之 vue 就是:
(学习视频分享:web前端开发、编程基础视频) |