01vue基础总结

Wbin
77 阅读2分钟

mvc和mvvm

  • 都是软件架构思想
  • mvc: model, view, Controller
  • mvvm: model, view, viewmodel
  • 数据流向
    • mvc: view -> controller -> model -> view
    • mvvm: view <-> viewmodel -><- model

vue中常见的指令

  • v-for
  • v-if
  • v-show
  • v-bind
  • v-on
  • v-else
  • v-else-if
  • v-model
  • v-html
  • v-text
  • v-once
  • v-slot
  • v-pre

v-if和v-show的区别和场景，v-html和v-text的区别

​ v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-show不能用template标签，以及v-else和v-else-if

vue生命周期

    初始化事件，生命周期

beforeCreate 注入数据，初始化响应式数据 cteated 是否有el和template选项 beforeMount 将数据挂载到模板中，将虚拟DOM转成真实dom mounted 数据改变时触发，dom的更新前后 beforeUpdate updated 组件销毁的时候触发 beforeDestroy destroyed

activated 缓存组件被激活时调用 deactivated 缓存组件被停用时调用

errorCaptured 子孙组件出错时调用

计算属性，方法，侦听器的区别

计算属性 vs 方法

- 计算属性是被动的，只有依赖的响应式数据改变的时候才会重新求值，而不能主动更改。

- 计算属性可能同时依赖多个响应式数据，其中一个改变就会重新求值

- 计算属性也能依赖于其他的计算属性

- 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

计算属性 vs 侦听属性

- 计算属性是被动，别人改变我才改变

- 可以依赖多个

- 侦听属性是主动，我改变了再让别人改变，或者执行一些方法

- 只能侦听一个

- 优先考虑计算属性

描述一下插槽，过滤器和混入

什么是前端路由，传统的路由实现？

vue-router

  • vue路由有哪几种模式，有什么区别
    • hash history 模式
  • 什么是嵌套路由，动态路由和路由重定向
    • 嵌套路由 使用children 属性
    • 动态路由
    • 路由重定向
  • 路由传参怎么做？
    • 通过动态路由做

  • 描述一下路由守卫

描述一下vuex（从下面几个方向回答）

  • 是做什么的？
    • Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件
  • 有哪几个部分
    • state mutation action getter module

  • 每个部分都做什么

  • 状态的流向（流程图）

  • 辅助函数
    • 1.mapState:把state属性映射到computed身上
    • 2.mapAcions：把actions里面的方法映射到methods中
    • 3.mapMutations：把mutations里面的方法映射到methods中
      • 只是做简单的数据修改（例如n++），它没有涉及到数据的处理，没有用到业务逻辑或者异步函数，可以直接调用mutations里的方法修改数据。
    • mapGetters:把getters属性映射到computed身上

组件传参怎么做

  • 父子传参

    父传子

    1.在父组件里面自定义一个属性

    在子组件里面用props接收

    2.插槽

    3.使用this.root或者this.root或者this.parent

    1. 依赖注入(穿透性)

      父组件使用 provide() {return {xxxx数据}}

      子组件 inject: ['xxxx']

    - 子传父

    1.在父组件里面定义一个自定义的方法

    ​ 在子组件里面调用this.$emit()

    this.$emit()的第一个参数是自定义方法的名字，后面是参数

    2.作用域插槽

    3.使用this.$refs

  • 非父子传参

你常用的git命令有哪些

  • init
  • config
  • add
  • commit
  • push
  • pull
  • log
  • branch
  • checkout
  • merge
  • clone
  • fetch
  • status
  • reset
  • remote

如果前端已经开发完成了，后端接口还没有给到，你是怎么做的

  • 使用mock数据

TypeScript

typescript它不是一门新的语言，它是一门用来规范js的语言 js依旧是一门弱类型的语言 ts是js的一个超集，广义的js是es，dom，bom，ts是es的超集 比方说强类型，面对对象的开发体系 ts常用在大型项目中，使得代码更加规范，协作更加友好，维护更加方便

特点： 增加了静态类型检查，增加了代码的健壮性 是编写时报错，js是执行时报错 使得重构更加的安全与便捷 多人协作的时候，提高生产力，降低维护成本

常用的类型 string, number, boolean, any, void, never, Array / string[], 枚举, 元组 string | number, interface

在vue里面使用ts 类组件，扩展组件， 函数组件 修饰器

服务端渲染

优势： 更好的SEO 更快的到达时间 劣势： 更高的开发要求 更高的服务器的要求 nuxt.js

vue响应式原理

vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的getter，setter，当属性发生改变的时候，将变动发布给订阅者，触发监听回调 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化

vue3.0使用了proxy

浏览器的渲染原理和流程

  1. 浏览器将获取的HTML文档解析成DOM Tree(DOM树)。
  2. 将CSS样式表，解析成CSSOM Tree(CSS树)。
  3. 将DOM和CSSOM合并为渲染树(rendering tree)，attachment
  4. 渲染树的每个元素经过精确的计算后，给出坐标，laylout。
  5. 将渲染树的各个节点绘制到屏幕上，painting。

为什么要使用虚拟DOM

  • 虚拟DOM是为了解决浏览器性能问题而被设计出来的。
  • 比如有10次循环，虚拟DOM不会立即操作DOM，而是将10次的diff内容保存在一个js对象里面，然后一次性的操作，避免大量无谓的计算
  • 操作内存中的js对象的速度显然更快，等更新完后，再将最终的js对象映射成真实的DOM，交由浏览器绘制。

diff操作

数据改变，虚拟DOM也会改变 我们不想重新渲染vdom，我们只想渲染改变的部分，就需要用到diff算法 两个树如果完全比较，时间复杂度是O(n^3),Vue的Diff算法的时间复杂度是O(n),意味着只能平层的比较两棵树的节点，放弃了深度遍历。似乎牺牲了一定的精准性来换取速度，但考虑到前端页面通常不会跨层移动DOM元素，这样做是优先的

  采用了同级比较，只有count相同的children进行比较
  比较他们的key，进行增加，删除，替换，换位等操作
avatar
文章
阅读
粉丝