Vue系列

bbmmwin
76 阅读6分钟

原文链接

对Vue的理解

  1. vue是什么
  • Vue.js是一个创建单页面应用的Web应用框架，Vue所关注的核心是MVC模式中的视图层，同时，它能方便的获取数据更新，并通过组件内部方法实现视图与模型的交互。
  1. Vue核心特性
  • 数据驱动
    • MVVM
      • Model：模型层，负责处理业务逻辑以及和服务器端进行交互
      • View：视图层,负责将数据模型转化为UI展示
      • ViewModel:视图模型层，用来连接Model和View，是Model和View之间的通信桥梁
  • 组件化
    • 就是把图形和非图形的各种逻辑抽象为一个统一的概念来实现开发的模式，Vue中的每一个.vue文件都可以视为一个组件
    • 优势
      • 降低整个系统的耦合度
      • 方便调试，直接定位出现问题的组件
      • 提高可维护性，各个组件的职责单一，并且在系统中是被复用的，所以代码进行优化可获得整体的提升
  • 指令系统
    • 指令是带有v-前缀的特殊作用，当表达式的值发生改变时，将其产生的连带影响，响应式地作用于DOM
    • 常用的指令
      • v-if条件渲染
      • v-for列表渲染
      • v-bind属性绑定
      • v-on事件绑定
      • v-model双向绑定

对SPA单页面的理解

  1. 什么是SPA
  • SPA就是单页面应用是一种网络应用程序或者网站的模型，通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验，在单页面应用中，所有必要的代码都通过单页面的加载而检索，或者根据需要动态装载适当的资源并添加到页面，页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。我们熟知的js框架如 react、vue、angular都属于SPA
  1. SPA和MPA的区别
  • MPA是多页应用，在MPA中，每个页面都是一个主页面，当我们访问一个页面的时候，需要重新加载html、css、js文件
  • SPA优点
    • 具有桌面应用的即时性、网站的可移植性和访问性
    • 用户体验好、快，内容的改变不需要重新加载整个页面
    • 良好的前后端分离，分工更明确
  • 缺点
    • 不利于搜索引擎的抓取
    • 首次渲染速度相对较慢

v-show和v-if有什么区别，使用场景分别是什么

v-if和v-show的共同点

  1. 都能控制元素在页面是否显示
  2. 当表达式为true，会占据页面的位置
  3. 当表达式为false，不会占据页面的位置

v-show和v-if的区别

  • 控制手段不同
    • v-show隐藏——给该元素添加css-display:none,dom元素依旧存在
    • v-if是将整个dom添加或者删除
  • 编译过程不同
    • v-if切换有一个局部编译、卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
    • v-show只是简单的基于css切换
  • 编译条件不同
    • v-if是真正的条件渲染，确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建，只有渲染条件为假时，并不做操作，直到为真时才开始渲染
    • v-show由false转为true的时候不会触发组件的生命周期
    • v-if由false转为true时会触发组件的beforeCreate、created、beforeMount、mounted钩子，有true转为false时，会触发组件的beforeDestory、destroyed方法
    • v-if具有更高的切换消耗，v-show有更高的初始渲染消耗

v-show与v-if原理分析

  • 解析流程
  1. 将模板template转为ast结构的js对象
  2. 将ast得到的js对象拼装render和staticRenderFns函数
  3. render和staticRenderFns函数被调用后生成虚拟Vnode节点，该节点包含创建DOM节点所需信息
  4. vm.patch函数通过虚拟Dom算法利用Vnode节点创建真实dom节点
  • v-show原理
    • 设置display属性
  • v-if原理
    • 返回一个node节点，render函数通过表达式来决定是否生成DOM

使用场景

  • 都能控制DOM元素在页面的显示
  • v-if比v-show开销更大
  • 如果频繁的切换，用v-show
  • 如果在运行时条件很少改变，则使用v-if

Vue实例挂载的过程中发生了什么

  • new Vue的时候会调用_init方法
    • 定义setset get deletedelete watch等方法
    • 定义onon off $emit等事件
    • 定义——update forceUpdateforceUpdate destory生命周期
    • 调用$mount进行页面挂载
    • 挂载的时候主要通过mount Component方法
    • 定义updateComponent函数
    • 执行render生成虚拟DOM
    • _update将虚拟DOM生成真实DOM，并渲染到页面中

Vue生命周期

生命周期有哪些

  1. beforeCreate 组件实例被创建之初
  2. created 组件实例已经创建
  3. beforeMount 组件实例挂载之前
  4. mounted 组件挂载到实例上去之后
  5. beforeUpdate 组件数据发生变化，更新之前
  6. updated 组件数据更新之后
  7. beforeDestory 组件实例销毁之前
  8. destoryed 组件实例销毁之后
  9. activated keep-alive缓存的组件激活时
  10. deactivated keep-alive缓存的组件停用时
  11. errorCaptured 捕获一个来自子孙组件的错误时被调用
  • created和mounted的区别
    • created是实例一旦创建完成的时候立刻调用，这时候页面dom节点还未生成
    • mounted是在页面dom节点渲染完成后就立刻执行
    • 触发时机尚created是比mounted要更早
    • 相同点——都能拿到实例对象的属性和方法
    • 不同大
      • mounted请求可能会导致页面闪动，但是如果在页面加载前完成则不会出现此情况
      • created中不能拿到dom实例

v-if和v-for不建议一起使用为什么？

作用

  1. v-if用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true的时候被渲染
  2. v-for基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组或者对象，而item则是被迭代的数组元素的别名
  3. 在v-for的时候，设置key值，并且保证每个key是独一无二的，这便于diff算法进行优化

优先级

  1. v-for的优先级高于v-if
  2. 不要把v-if和v-for同时用在同一个元素上，带来性能的浪费（每次渲染都会先循环再进行判断）
  3. 在外层嵌套template，在这一层判断然后再在内部进行v-for循环
  4. 如果条件出现在循环内部，可通过计算属性computed提前过滤那些不需要的显示项目
avatar
文章
阅读
粉丝