Advertisement

vue重点知识

阅读量:

1.为什么使用框架,框架到底解决了什么问题?

避免重复引用外部JS的情况下,在 jQuery 开发中发现一个问题:通常情况下难以单一完成一个项目,并且需要依赖大量的第三方插件和库;从而使得每个项目都会引入大量的外部 JS 文件。

这样不仅让代码变得杂乱,而且很影响打开速度。

采用框架时(如VUE),通常会与构建工具协同工作。从而只需要一个入口文件即可实现功能。在运行时仅需在入口处加载一次代码即可完成初始化任务。

采用组件化开发方式,在前端框架中具备极大的优势作用。该方法能够实现功能扩展,并将常用的代码片段进行封装处理, 例如轮播图展示、Tab切换操作, 以及页面顶部与底部区域的设计等

这种独立的组件具备了结构(html)、表现(css)和行为(js)完整的功能,在很大程度上减少了代码量,并提高了代码的复用性。特别在团队合作时能显著提高使用效率。

2.vue框架是什么?有什么特点?

vue是渐进式的JavaScript框架

特点:1.遵循MVVM模式(m->model(数据对象) v->view(视图) vm->view model)

2.编码简洁,体积小,运行效率高,适合移动端/PC端

3.它本身只关注UI,可以轻松引入Vue插件或其他第三方库开发项目

Vue扩展插件:

vue-cli:Vue脚手架

vue-resource(axios):ajax请求

vue-router:路由

vuex:状态管理

vue-lazyload:图片懒加载

vue-scroller:页面滑动相关

mint-ui:基于Vue的UI组件库(移动端)

element-ui:基于Vue的UI组件库(PC端)

3.vue的生命周期

从数据初始化阶段开始,在以下步骤依次执行:建立并配置基础数据源;生成模板代码;将DOM结构绑定到应用中;进行状态更新操作;重新生成并渲染DOM结构;最后释放DOM资源以完成整个流程

概述来说, 一个组件从其开始到最终退出所经历的各种状态, 就是该组件的生命周期

一个vue实例在创建过程中调用的几个生命周期钩子。

  • 在实例创建阶段完成后,在配置数据观察与事件监听之前调用此钩子(initiating instance creation)。此时无法访问到data中的数据或methods中的方法(注意)。
  • 这个生命周期阶段允许访问并调用methods中的方法以及修改data中的数据(created)。最典型的使用场景是通过AJAX发起请求来初始化已经构建完成的Vue组件的静态属性(这是一个常用的生命周期)。
  • 此钩子在组件挂载即将开始时被触发(beforeMount)。
  • 当组件成功挂载到页面后,在此阶段可对el元素进行DOM操作(mounted)。
  • 此钩子用于处理组件状态更新前的事务(beforeUpdate),发生在虚拟DOM重新生成和补丁应用前(in virtual DOM re-rendering and patching)。
  • 该阶段表示组件的DOM结构已更新完毕(updated)。
  • 实例销毁前会触发此钩子(beforeDestroy)。
  • 该钩子会在Vue实例完全销毁后被调用,在此时刻所有绑定关系将被解除,并终止所有事件监听器及子实例管理(destroyed).

4.v-if和v-show的差别

v-if 是一种动态机制,在其值为 false 的情况下会彻底删除对应的元素,则在 dom 树中不再包含该元素。

v-show 仅用于隐藏/显示DOM元素的显示状态,在设置为false时会使得该DOM元素仍然保留在DOM树中。当该DOM元素的现有样式设置为display: none时,则无法正常显示内容。

4.1相同点:

v-if与v-show两者都是在判断DOM节点是否要显示。

4.2不同点:

(1)实现方式

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

v-show仅用于调整元素的CSS样式信息,并非直接修改DOM结构中的显示属性;该元素始终位于DOM树中。

(2)编译过程

仅限于基于CSS的切换操作;

v-show无论条件如何均被编译并存储起来供后续使用,并且在之后的任何操作中持续存在;
(4)性能消耗方面 v-if由于其较高的切换消耗因此并不适合频繁地进行状态切换。

v-show有更高的初始渲染消耗,适合做频繁的额切换;

5.什么是Virtual DOM

如今网络速度日益加快,在家庭宽带普及的情况下,
许多家庭都配备了带宽达几十甚至上百兆比特/秒(Mbps)的光纤,
而手机通常从4G网络开始,
理论上而言,
一个网页的数据量通常在几百千字节(kB)左右,
然而,在传统开发模式下使用jQuery或原生JavaScript进行DOM操作时,
浏览器会不断渲染新的DOM树,
导致页面加载时出现明显的延迟效果。
这是因为浏览器内部处理DOM数据存在性能瓶颈,
尤其是在频繁更新内容时,
这种限制使得即使拥有宽广带宽也无法完全消除加载延迟的问题。

而Virtual DOM则是虚拟DOM的英文名称,在技术领域中被广泛使用的一种技术架构。它是一种在预处理阶段通过JavaScript进行各种复杂计算的技术,在完成所有计算后会将最终结果优化并存储起来以便后续使用。需要注意的是这一过程并不涉及实际修改文档对象模型(DOM),因此被称为"虚拟"DOM技术。一旦所有计算完成并确定最终结果时系统会将这些变化应用到实际的DOM结构中以保持数据的一致性和完整性

以Vue.js实现的虚拟DOM技术

6.Vue编写“Hello vue”

1.引入vue.js

2.创建vue对象

3.双向数据绑定

4.显示数据

代码展示:

复制代码
 <div id="app">

    
     //3.双向数据绑定
    
     <input type="text" v-model="username">
    
     //4.显示数据
    
     <p>Hello {{msg}}</p>
    
 </div>
    
 //1.引入vue.js
    
 <script type="text/javascript" src="../js/vue.js"></script>
    
 <script type="text/javascript">
    
     //2.创建vue对象
    
     var vm = new Vue({
    
     el:"#app",
    
     data:{
    
         msg:'vue'
    
     }
    
     })

持续更新中~~~~

7.created和mounted的区别

我们从图中看两个节点:

初始化会在模板生成为HTML之前执行,并通常用于初始化某些属性值;随后,在渲染视图时应用这些设置。

mounted表示一个变量,在生成HTML文件时被调用,并进一步对生成的HTML文档(DOM节点)执行必要的操作。

全部评论 (0)

还没有任何评论哟~