千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
单向数据流：
对于 vue 来说，组件之间的数据传递具有单向数据流这样的特性的，称为单向数据流
两个数据流之间相互独立，单向数据流指 只能从一个方向来修改状态
例：父子传值，父组件给子组件传递数据，子组件想给父组件传递数据的话，需要通过绑定事件，让父组件自己修改值，然后再将修改后的值传给子组件
双向数据绑定:
模型到视图，绑定input框的value属性
视图到模型：绑定input事件，通过视图改变数据
Object.defineProperty 的劣势：
1、无法监听es6的Set、Map变化
2、无法监听class类型的数据
3、属性的新加或者删除也无法监听
4、数组元素的增加或删除也无法监听
MVC：
把业务逻辑分离，模块化程度高，但由于View是强依赖特定的Model的，所以View无法组件化，无法复用
MVP：
View不依赖Model，View可以进行组件化，但Model-> View的手动同步逻辑 ，麻烦、维护困难
MVVM：
解决了MVP大量的手动View和Model同步的问题，提供双向数据机制，提高了代码的可维护性问题，对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高
生命周期：
vue2：
初始阶段：beforeCreate、created、beforeMount、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed
vue3：
初始阶段：setup、onBeforeMount、onMounted
更新阶段：onBeforeUpdate、onUpdated
销毁阶段：onBeforeUnmount、onUnmounted
常用的钩子：
发送请求：create、mounted
销毁定时器、清除绑定事件：beforeDestroy
vue的响应式原理：
vue的响应式主要是利用了Object.defineProperty的方法里面的setter、getter方法的观察者模式来实现。一旦属性发生了改变，我们的setter方法通知调用我们的watcher，watcher的话调用我们的render函数，render函数生成我们新的虚拟dom，虚拟dom对比老的虚拟dom发现有区别，通过最小的代价更新我们的dom节点，实现页面的更新操作。
Proxy 和 Object.defineProperty 优劣对比：
proxy的优势：
proxy 可以直接监听对象而非属性，可以直接监听数组的变化
proxy 有多达13中拦截方法，不限于 apply、ownKeys、deleteProperty、has 等是 Object.defineProperty 不具备的
proxy 返回的是一个新的对象，我们可以只操作新的对象达到目的，而 Object.defineProperty 只能遍历对象属性直接修改
Object.defineProperty 的优势：
兼容性好，支持IE9，而proxy存在浏览器兼容性问题，而且无法使用polyfill来弥补
兼容性问题：如果低版本不支持 proxy 的话，走的还 Object.defineProperty
Composition API :
1、在 Composition API 中根据逻辑相关组织代码，提高可读性和可维护性，类似react中的hook
2、更好的重用逻辑，在 option API 中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清
3、解决在生命周期函数经常包含不相关的逻辑，但又不得不把相关的逻辑分离到几个不同的方法中的问题
例：
在mounted设置定时器，但需要在destroyed中来清除定时器，将同一功能的代码拆分到不同的位置，造成后期代码维护困难
jQuery 和 vue 的区别：
jQuery 专注视图层，通过直接操作dom去实现页面的一些逻辑渲染
vue 专注于数据层，通过数据的双向绑定，最终表现在dom层，减少dom操作，vue使用组件化思想，提高开发效率，方便重复利用，便于协同开发
vue单文件组件定义全局css：
默认为全局 css 样式
独享样式：在style标签加上 scoped 属性，它是通过给标签 添加自定义属性实现，通过内容得到不同的哈希值，是标签唯一
$root、$parent、$refs：
$root、$parent，都能访问父组件的属性和方法，区别在于如果存在多级子组件，通过parent 访问得到的是他最近一级的父组件，通过root访问得到的是根父组件。通过在子组件标签定义 ref 属性，在父组件中可以使用$refs访问子组件实例
ref：
定义模型，获取dom节点，获取子组件实例，关联form表单
vue中的自定义指令：
通过directive来自定义指令，自定义指令分为全局抬令和局部指令，自定义指令也有几个的钩子函数，常用的有bind和update，当 bind 和 update 时触发相同行为，而不关心其它的钩子时可以简写。
Vue.directive('focus', {
inserted: (el) => {
el.focus
}
})
......
<input v-focus />
