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个
- 创建期
beforeCreate
created - 挂载期
beforeMount
mounted - 更新期
beforeUpdate
updated - 销毁期
beforeDestroy
destroyed
5. Vue中的组件通信有哪些方式?
[参考链接]https://zhuanlan.zhihu.com/p/66189674
1.props和事件
父组件可以通过props向子组件传递数据,
子组件可以通过自定义事件将数据传回父组件。
2.listeners
listeners 来传递数据与事件,跨级组件之间的通讯变得更简单。
简单来说:listeners 是两个对象,listeners里存放的是父组件中绑定的非原生事件。
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(parent / attrs/attrs/$listeners
6 Vue CLI的ref,props,mixin,plugin,scpred
- ref ,用于给元素或子组件注册应用信息。(类似于id)
- props,让组件接收外部传过来的数据
- mixin,可以把多个组件公用的配置提取成一个混入对象
- plugin,用于增强Vue。router,vuex
- scoped,让样式在局部生效,防止冲突