VUE常见问题
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常见问题的更多相关文章
- Vue 常见问题汇总
Q:我给组件内的原生控件添加事件,怎么不生效了!!! <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--// 错误例子1--> <el- ...
- vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息
一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...
- Vue常见问题集中
a.VScode保持vue语法高亮的方式: 1.安装插件:vetur.打开VScode,Ctrl + P 然后输入 ext install vetur 然后回车点安装即可. 2.在 VSCode中使用 ...
- vue常见问题随笔集
1.vuex操作对应关系 设置 触发/获取 action <-> dispatch mutations <-> commit getters <-> ...
- 记录前端开发vue常见问题,不断更新
1.点击刷新当天组件 1.可以在query中添加一个时间戳,缺点就是不好看 2.加一个重定向页面redirect页面,然后在beforecreate时this.$router.replace原路径 2 ...
- Vue刨坑
vue常见问题 1.在自定义组件里,你可以像任何普通元素一样用v-for.eg1: <my-component v-for="item in items"></m ...
- 法门扫地僧总结vue面试题(部分来源网络)
Front-End 前端开发工程师面试宝典! (本文部分有转载,不定期更新!) 前言(README.md) 本仓库是我整理的前端常见面试题,大部分由我整理,其中个别部分参考 ...
- 史上最强vue总结~万字长文---面试开发全靠它了
vue框架篇 vue的优点 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb: 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习: 双向数据绑定:保留了angular ...
- vs code 使用技巧整理
快捷键 Ctrl + Shift + F:在文件夹中搜索; Ctrl + Shift + P:命令面板; Ctrl + Shift + T:重新打开 关闭的编辑页面; Ctrl+Shift+PgUp/ ...
随机推荐
- pytest(10)-常用执行参数说明
pytest单元测试框架中可以使用命令行及代码pytest.main()两种方式执行测试,且可以加入各种参数来组织执行测试.接下来我们来了解常用的执行参数的含义及其用法. pytest中的执行参数根据 ...
- [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 ...
- JAVA8学习——Stream底层的实现二(学习过程)
继续深入Stream的底层实现过程 2.spliterator() 接上 https://www.cnblogs.com/bigbaby/p/12159495.html 我们这次回到最开始源码分析的地 ...
- 大厂偏爱的Agent技术究竟是个啥
搜索关注微信公众号"捉虫大师",后端技术分享,架构设计.性能优化.源码阅读.问题排查.踩坑实践. hello大家好,我是小楼,今天给大家分享一个关于Agent技术的话题,也是后端启 ...
- python3发微信脚本
企业微信发微信脚本 #!/usr/bin/env python # -*- coding: utf-8 -*- #GuoYabin import requests,json,sys,imp imp.r ...
- [旧][Android] ButterKnife 浅析
备注 原发表于2016.05.08,资料已过时,仅作备份,谨慎参考 前言 自上星期写 Retrofit 写吐之后 ... 我问大队长能不能换个其他什么东西写,大队长就说了个单词 ButterKnife ...
- Spring Cloud Gateway现高风险漏洞,建议采取措施加强防护
大家好,我是DD 3月1日,Spring官方博客发布了一篇关于Spring Cloud Gateway的CVE报告. 其中包含一个高风险漏洞和一个中风险漏洞,建议有使用Spring Cloud Gat ...
- VUE学习笔记(李天禹老师版本)
目录 VUE 一 脚手架文件结构 二 关于不同版本的Vue 三 vue.config.js配置文件 vue文件的基本结构 components 四 ref属性 TIPS 五 props配置项 Tips ...
- 这个数据分析工具秒杀Excel,可视化分析神器!
入门Excel容易,想要精通就很难了,大部分人通过学习能掌握60%的基础操作,但是一些复杂数据可视化分析就需要用到各种技巧,操作理解难度加深 Excel作为一直是使用最广泛的数据表格工具,在数据量日 ...
- Dell服务器配置RAID1+RAID0磁盘阵列
有台DELL R730的服务器,需要部署下公司的程序,这里记录下raid配置. 环境要求 两块硬盘做raid 1 一块硬盘做raid 0 服务器开机,开始配置raid 服务器开机,在出现下图提示时,同 ...