VUE常见问题

对于MVVM的理解

  • MVVM 是 Model-View-ViewModel 的缩写

  • Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑

  • View 代表UI 组件,它负责将数据模型转化成UI 展现出来。

  • ViewModel 监听数据模型的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View

在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理

VUE的生命周期阶段(8个)

  • beforeCreate(创建前)

    在数据观测和初始化事件还未开始

  • created(创建后)

    完成数据观测,属性和方法的运算,初始化事件,el属性还没有显示出来

  • beforeMount(载入前)

    挂载开始之前被调用,相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂载html到页面上

  • mounted(载入后)

    挂载完成,也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次

  • beforeUpdate(更新前)

    在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程

  • updated(更新后)

    在由于数据更改导致的虚拟DOM重新渲染和打补丁时会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用

  • beforeDestroy(销毁前)

    在实例销毁之前调用,实例仍然完全可用,这一步还可以用this来获取实例,一般在这一步做一些重置的操作,比如清除掉组件中的定时器和监听的dom事件

  • destroyed(销毁后)

    在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

什么是vue生命周期

  • Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期

vue生命周期的作用是什么

  • 它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑

第一次页面加载会触发哪几个钩子

  • beforeCreate,
  • created
  • beforeMount
  • mounted

DOM 渲染在哪个周期中完成

  • mounted

v-for中key值的作用

  • 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素,key的作用主要是为了高效的更新虚拟DOM

v-if 与 v-for的优先级

  • v-for优先于v-if被解析

  • 如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能

  • 要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环

  • 如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项

v-if与v-show的区别

  • v-if 是真正的条件渲染,直到条件第一次变为真时,才会开始渲染

  • v-show 不管初始条件是什么会渲染,并且只是简单地基于 CSS 的 “display” 属性进行切换

  • v-if 适用于不需要频繁切换条件的场景;v-show 则适用于需要非常频繁切换条件的场景

VUE常用指令

  • v-model 在表单 <input><textarea><select> 元素上创建双向数据绑定
  • v-for 循环
  • v-if 判断
  • v-show 展示
  • v-on: click = 'function' 事件绑定

VUE常见问题的更多相关文章

  1. Vue 常见问题汇总

    Q:我给组件内的原生控件添加事件,怎么不生效了!!! <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--// 错误例子1--> <el- ...

  2. vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

    一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...

  3. Vue常见问题集中

    a.VScode保持vue语法高亮的方式: 1.安装插件:vetur.打开VScode,Ctrl + P 然后输入 ext install vetur 然后回车点安装即可. 2.在 VSCode中使用 ...

  4. vue常见问题随笔集

    1.vuex操作对应关系 设置          触发/获取 action <-> dispatch mutations <-> commit getters <-> ...

  5. 记录前端开发vue常见问题,不断更新

    1.点击刷新当天组件 1.可以在query中添加一个时间戳,缺点就是不好看 2.加一个重定向页面redirect页面,然后在beforecreate时this.$router.replace原路径 2 ...

  6. Vue刨坑

    vue常见问题 1.在自定义组件里,你可以像任何普通元素一样用v-for.eg1: <my-component v-for="item in items"></m ...

  7. 法门扫地僧总结vue面试题(部分来源网络)

    Front-End 前端开发工程师面试宝典!   (本文部分有转载,不定期更新!)             前言(README.md) 本仓库是我整理的前端常见面试题,大部分由我整理,其中个别部分参考 ...

  8. 史上最强vue总结~万字长文---面试开发全靠它了

    vue框架篇 vue的优点 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb: 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习: 双向数据绑定:保留了angular ...

  9. vs code 使用技巧整理

    快捷键 Ctrl + Shift + F:在文件夹中搜索; Ctrl + Shift + P:命令面板; Ctrl + Shift + T:重新打开 关闭的编辑页面; Ctrl+Shift+PgUp/ ...

随机推荐

  1. pytest(10)-常用执行参数说明

    pytest单元测试框架中可以使用命令行及代码pytest.main()两种方式执行测试,且可以加入各种参数来组织执行测试.接下来我们来了解常用的执行参数的含义及其用法. pytest中的执行参数根据 ...

  2. [LeetCode]13.罗马数字转整数(Java)

    原题地址: roman-to-integer 题目描述: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M ...

  3. JAVA8学习——Stream底层的实现二(学习过程)

    继续深入Stream的底层实现过程 2.spliterator() 接上 https://www.cnblogs.com/bigbaby/p/12159495.html 我们这次回到最开始源码分析的地 ...

  4. 大厂偏爱的Agent技术究竟是个啥

    搜索关注微信公众号"捉虫大师",后端技术分享,架构设计.性能优化.源码阅读.问题排查.踩坑实践. hello大家好,我是小楼,今天给大家分享一个关于Agent技术的话题,也是后端启 ...

  5. python3发微信脚本

    企业微信发微信脚本 #!/usr/bin/env python # -*- coding: utf-8 -*- #GuoYabin import requests,json,sys,imp imp.r ...

  6. [旧][Android] ButterKnife 浅析

    备注 原发表于2016.05.08,资料已过时,仅作备份,谨慎参考 前言 自上星期写 Retrofit 写吐之后 ... 我问大队长能不能换个其他什么东西写,大队长就说了个单词 ButterKnife ...

  7. Spring Cloud Gateway现高风险漏洞,建议采取措施加强防护

    大家好,我是DD 3月1日,Spring官方博客发布了一篇关于Spring Cloud Gateway的CVE报告. 其中包含一个高风险漏洞和一个中风险漏洞,建议有使用Spring Cloud Gat ...

  8. VUE学习笔记(李天禹老师版本)

    目录 VUE 一 脚手架文件结构 二 关于不同版本的Vue 三 vue.config.js配置文件 vue文件的基本结构 components 四 ref属性 TIPS 五 props配置项 Tips ...

  9. 这个数据分析工具秒杀Excel,可视化分析神器!

    ​入门Excel容易,想要精通就很难了,大部分人通过学习能掌握60%的基础操作,但是一些复杂数据可视化分析就需要用到各种技巧,操作理解难度加深 Excel作为一直是使用最广泛的数据表格工具,在数据量日 ...

  10. Dell服务器配置RAID1+RAID0磁盘阵列

    有台DELL R730的服务器,需要部署下公司的程序,这里记录下raid配置. 环境要求 两块硬盘做raid 1 一块硬盘做raid 0 服务器开机,开始配置raid 服务器开机,在出现下图提示时,同 ...