Vue面试准备

（1）vue的三要素

image.png

模板，

---

image.png

---

（2）vue是如何实现双向绑定的？

基本原理：数据驱动页面，页面映射数据

---

核心API：Object.defineProperty()

设计模式：观察者模式

监听者Observer监听Data变化，Data变化会触发Object.defineProperty()的set函数，通知观察者列表Dep，Wather订阅Dep，Dep接到通知后回调Watcher执行update函数，更新View

---

（3）vue实例或组件中的data为什么必须是函数，并用返回对象的方式存储数据

最根本的原因还是为了利用函数的作用域，并且对象是引用传值，多个组件会保持对一个data对象的引用，一处修改，多个组件变化，造成混乱

---

image.png

---

使用函数返回对象来形成各个实例的独立作用域

---

image.png

（4）data属性的声明

image.png

（5）props

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。

image.png

---

image.png

---

image.png

（5）

常规的组件使用方式，只能在自定义组件名标签的位置渲染组件

（6）组件通信

image.png

（7）

• 可以在class中使用过滤器
• 不能在data里使用计算属性