Vue篇

1. Vue中的双向数据绑定是如何实现的?

Vue中的双向数据绑定是通过v-model指令实现的。当输入框中的值发生变化时,v-model指令会自动更新对应的数据模型上的属性值,反之亦然。
Vue中的双向数据绑定底层实现原理主要是利用了Object.defineProperty()方法来监听数据属性的变化。

具体地说,当我们在Vue实例中定义一个数据属性时,Vue会使用Object.defineProperty()方法将其转化为getter/setter形式,从而实现对该属性的监听。当数据属性发生变化时,setter方法会被触发,进而通知所有使用了该数据属性的组件更新视图。

需要注意:

vue2对于动态添加或删除的属性,Vue是无法实现双向绑定的。同时,由于Object.defineProperty()方法只能监听对象的属性变化,因此Vue无法监听数组中元素的变化,需要额外使用一些方法来实现对于数组的监听。
vue3可以ES6的Proxy方法
2. Vue中的虚拟DOM是什么?

在Vue2中,虚拟的DOM是一个真实DOM元素层次结构的js对象,当数据发生变化时,vue.js会重新渲染虚拟DOM并比较新旧2个虚拟DOM树之间的差异,然后只更新必要的部分到真实DOM上,从而最小化浏览器重绘和重排的开销。

vue2的虚拟DOM对象包含了标签名,属性,子节点等信息,并支持嵌套,即每个节点也是虚拟DOM对象。这种设计使得vue的数据响应式更新更加高效,灵活,并且方便扩展。同时,虚拟DOM提供了一些优化手段,如同步批量更新,异步更新,diff算法等,可以大幅度提高web应用的性能和用户体验。

3. Vue中的computed和watch有什么区别?

computed和watch都用于监听Vue实例中数据的变化,但它们的使用场景不同。
computed适用于计算公式,过滤器等数据进行转换,格式化等场景。不支持settimeout,支持缓存。
watched适用于异步或开销比较大的操作,并且在数据变化时立即执行的场景。支持settimeout,不支持缓存。

4. Vue中的生命周期函数有哪些?

生命周期函数共有8个

  1. 创建期
    beforeCreate
    created
  2. 挂载期
    beforeMount
    mounted
  3. 更新期
    beforeUpdate
    updated
  4. 销毁期
    beforeDestroy
    destroyed
5. Vue中的组件通信有哪些方式?

[参考链接]https://zhuanlan.zhihu.com/p/66189674
1.props和事件
父组件可以通过props向子组件传递数据,
子组件可以通过自定义事件将数据传回父组件。

2.attrs/listeners
attrs ,listeners 来传递数据与事件,跨级组件之间的通讯变得更简单。
简单来说:attrs与listeners 是两个对象,attrs 里存放的是父组件中绑定的非 Props 属性,listeners里存放的是父组件中绑定的非原生事件。

listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="listeners" 传入内部组件

3.parent/children与 ref
通过$parent$children属性可以访问父子组件的实例对象,从而进行数据的传递,但是这种方式耦合性过强,不建议。

4.provide 与 inject
允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。一言而蔽之:祖先组件中通过 provider 来提供变量,然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。

需要注意的是:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的

5.Vuex
Vuex是vue的官方状态管理库,可以解决组件间的数据共享问题。通过全局状态储存数据,各个组件都可以访问并修改数据,从而实现数据共享。

6.event bus
创建一个空的vue实例作为事件总线,在该实例上注册自定义事件,并在需要通信的组件上引入该实例,从而实现组件之间的通信。

父子通信: 父向子传递数据是通过 props,子向父是通过 events(emit);通过父链 / 子链也可以通信(parent / children);ref 也可以访问组件实例;provide / inject API;attrs/listeners 兄弟通信: Bus;Vuex 跨级通信: Bus;Vuex;provide / inject API、attrs/$listeners

6 Vue CLI的ref,props,mixin,plugin,scpred
  1. ref ,用于给元素或子组件注册应用信息。(类似于id)
  2. props,让组件接收外部传过来的数据
  3. mixin,可以把多个组件公用的配置提取成一个混入对象
  4. plugin,用于增强Vue。router,vuex
  5. scoped,让样式在局部生效,防止冲突
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容