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;destoryed5.Vue的父组件和子组件生命周期钩子函数执行顺序
加载渲染过程 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父 mounted 子组件更新过程 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 父组件更新过程 父beforeUpdate -> 父updated 销毁过程 父beforeDestory -> 子beforeDestory -> 子destoryed -> 父destoryed6.在哪个生命周期中调用异步请求
可以在created、beforeMount、mounted中进行调用,因为在这三个函数中,data已经创建。 推荐在created中调用异步请求,原因: 1. 能更快的获取到服务器数据,减少页面的loading时间 2. ssr不支持beforeMount、mounted函数,所以放在created中有助于一致性7.在什么阶段可以访问操作DOM
在mounted之前,Vue已经将编译好的模板挂载到页面上,所以在mounted中可以访问操作DOM8.组件中的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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
能坚持,总会有不一样的收获!
[***.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
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 mgr 5.6_mysql MGR高可用配置
2019-04-21
mysql备份是暂停进程吗_关于mysql备份说明
2019-04-21
xml mysql配置详解_mapper.xml配置文件详解
2019-04-21
windows tcp端口占满_TCP与UDP分析、三次握手四次断开、DDOS
2019-04-21
php70w mysql.x8664_LAMP环境的搭建(三)----PHP7的安装
2019-04-21
二分查找的平均查找长度_二分查找
2019-04-21