Vue
发布日期:2021-11-21 16:35:26 浏览次数:10 分类:技术文章

本文共 3120 字,大约阅读时间需要 10 分钟。

1.v-show和v-if的区别

v-if是真正的条件渲染,子组件会适当的被销毁和重建;
v-show不管初始条件是什么,元素总是会被渲染,他利用CSS的display属性进行切换。
因此v-if适用于运行时很少改变条件,不需要频繁切换条件的场景;v-show适用于需要频繁切换条件的场景。

2.Vue的单向数据流

所有的prop使父子prop之间形成了一个单向下行绑定,父级prop的更新会向下流动到子组件中,但是反过来不行。如果在子组件中更新prop的值,vue会在浏览器控制台中发出警告。子组件可以通过$emit自定义一个事件,父组件接收这个事件,由父级来更改。

3.computed和watch的区别

computed:是计算属性,依赖于其他属性,只有依赖的属性值发生改变,才会重新计算computed值;
watch:类似于数据的监听回调

4.Vue的生命周期

beforeCreate;created;beforeMount;mounted;beforeUpdate;updated;activated;deactivated;beforeDestory;destoryed

5.Vue的父组件和子组件生命周期钩子函数执行顺序

加载渲染过程
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父 mounted
子组件更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
父组件更新过程
父beforeUpdate -> 父updated
销毁过程
父beforeDestory -> 子beforeDestory -> 子destoryed -> 父destoryed

6.在哪个生命周期中调用异步请求

可以在created、beforeMount、mounted中进行调用,因为在这三个函数中,data已经创建。
推荐在created中调用异步请求,原因:
1. 能更快的获取到服务器数据,减少页面的loading时间
2. ssr不支持beforeMount、mounted函数,所以放在created中有助于一致性

7.在什么阶段可以访问操作DOM

在mounted之前,Vue已经将编译好的模板挂载到页面上,所以在mounted中可以访问操作DOM

8.组件中的data为什么是一个函数,return一个对象;在new Vue({})中,data可以直接是一个对象?

因为组件是用来复用的,JS里对象是引用关系,如果组件中的data是一个对象,这样的作用域没有隔离,子组件中data属性值会相互影响;如果组件中data是一个函数,每个实例可以维护一份被返回对象的独立的拷贝,组件实例之间的data属性值不会相互影响;而new Vue的实例,不会被复用,因此不存在引用哪个对象的问题。

9.Vue 3.0的特性

1. 监测机制的改变
使用Proxy实现Observer,取代Object.defineProperty
2. 模板: 把作用域插槽改成了函数的方式
3. 对象式组件的声明方式.

10.Vue组件间通信的方式

三类通信:父子通信、兄弟通信、隔代通信
1. props / $emit, 适用于父子间通信
2. $refs / $parent / $children 适用于父子间通信
3. $eventbus.$emit   /   $eventbus.$on   适用于父子、隔代、兄弟
4. $attrs / $listeners 适用于隔代通信
$attrs包含了prop 以外的父级绑定,可以使用v-bind=“$attrs”传入内部组件,设置inheritAttrs为false,可以让未被注册的属性不被渲染.
$listeners接收父级除了带.native的v-on事件,可以使用v-on=“$listeners”传入内部组件
5. provide(){}和inject:[]  适用于隔代通信
6. Vuex   适用于父子、隔代/兄弟通信
Vuex的核心是一个store,存放着很多的state;
this.$store.state.xxx 来获取数据
this.$store.commit('methodA', {nameA: valueOfA})

11.Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心是store,它包含着大部分的state
1. Vuex的存储是响应式的。store中改变,获取的地方也会改变。
2.改变store的唯一方法就是显示地提交commit mutation
主要包括以下几个模块:
Store:定义了初始的数据结构,相当于data
Getter:允许组件从Store中获取数据
Mutation: 改变store中值的唯一方法,必须是同步的
Action:用于提交mutation,可以异步
Module: 允许将单一的Store拆分为多个store,且同时保存在单一的状态树中

12.Vue的双向数据绑定原理是什么?

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

13.虚拟DOM

Vue通过建立一个虚拟DOM树来对真实DOM发生的变化保持追踪
实现原理:
1. 用JS对象模拟真实DOM树,对真实DOM进行抽象;
2. 使用Diff算法比较两个虚拟DOM树的差异
3. 再使用pach算法将两个虚拟DOM对象的差异应用到真正的DOM树中
优点:
1. 在不需要手动优化的情况下,可以提供不错的性能;
2. 无需手动操作DOM:只需要写好View-Model的代码逻辑,框架会根据虚拟DOM和数据双向绑定来更新视图,极大提高开发效率。
3. 跨平台:虚拟DOM本质上是JS对象,而DOM与平台强相关,相比之下虚拟DOM可以更方便的进行跨平台操作,例如服务器渲染等。
缺点:
无法进行极致优化

 

转载地址:https://blog.csdn.net/yyychocolate/article/details/108033174 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:CSRF攻击
下一篇:事件循环Event Loop

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2024年03月28日 10时25分49秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

斥候密报_斥候密报《最强王者》三国幕后巾帼之黄月英_吉吉建站手游网 2019-04-21
python的循环控制结构是什么_7.Python控制和循环结构 2019-04-21
python 死循环插曲变量_FishC03 讲:python小插曲之变量和字符串 2019-04-21
车型代号对照表_车型代号对照表_相关文章专题_写写帮文库 2019-04-21
arcgis符号方向_ArcGIS制图表达-河流渐变与符号旋转 2019-04-21
springboot 实现机器学习_SpringBoot架构浅谈 2019-04-21
oss批量上传工具_OssExplorer一OSS的专用客户端工具【最新版】_Windows_Windows server 2008-云市场-阿里云... 2019-04-21
login控件authenticate_ASP:Login控件(登录控件) 2019-04-21
drf 安装_drf 安装与配置 2019-04-21
c++ loadlibrary 初始化对象_C++构造函数和初始化表 2019-04-21
jmeter mysql driver_jmeter测试mysql数据库之JDBC请求 2019-04-21
mysql group by cube_SQL Server 之 GROUP BY、GROUPING SETS、ROLLUP、CUBE 2019-04-21
mysql mgr 5.6_mysql MGR高可用配置 2019-04-21
mysql备份是暂停进程吗_关于mysql备份说明 2019-04-21
xml mysql配置详解_mapper.xml配置文件详解 2019-04-21
oracle12c官方文档中文版_三分钟让你真正读懂oracle12c 中cdb pdb概念及原理 2019-04-21
windows tcp端口占满_TCP与UDP分析、三次握手四次断开、DDOS 2019-04-21
php70w mysql.x8664_LAMP环境的搭建(三)----PHP7的安装 2019-04-21
二分查找的平均查找长度_二分查找 2019-04-21
所有controller interceptor_阿里二面:filter、interceptor、aspect应如何选择?很多人中招... 2019-04-21