-
你知道 Vue 响应式数据原理吗？Proxy 与 Object.defineProperty 优劣对比？
- 响应式原理
- vue 的响应式实现主要是利用了 Object.defineProperty 的方法里面的 setter 与 getter 方法的观察者模式来实现。在组件初始化时会给每一个 data 属性注册 getter 和 setter，然后再 new 一个自己的 Watcher 对象，此时 watcher 会立即调用组件的 render 函数去生成虚拟 DOM。在调用 render 的时候，就会需要用到 data 的属性值，此时会触发 getter 函数，将当前的 Watcher 函数注册进 sub 里。当 data 属性发生改变之后，就会遍历 sub 里所有的 watcher 对象，通知它们去重新渲染组件。
- proxy 的优势如下：
- Proxy 可以直接监听对象而非属性，可以直接监听数组的变化；
- Proxy 有多达 13 种拦截方法,不限于 apply. ownKeys. deleteProperty. has 等等是 Object.defineProperty 不具备的；
- Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
- Object.defineProperty 的优势如下:
- 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill(垫片)来弥
- 响应式原理
-
解释单向数据流和双向数据绑定
- 对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性称为单向数据流，单向数据流（Unidirectional data flow）方式使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立，单向数据流指只能从一个方向来修改状态。
- 而双向数据绑定即为当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，两个数据流之间互为影响。
-
对比 jQuery，Vue 有什么不同
- jQuery 专注视图层，通过直接操作 DOM 去实现页面的一些逻辑渲染；
- Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作。Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发
-
Vue 中怎么自定义指令
- 通过 directive 来自定义指令，自定义指令分为全局指令和局部指令，自定义指令也有几个的钩子函数，常用的有 bind 和 update，当 bind 和 update 时触发相同行为，而不关心其它的钩子时可以简写。
Vue.directive("focus", {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus();
},
});
Vue.directive("color-swatch", function (el, binding) {
el.style.backgroundColor = binding.value;
});
- Vue 等单页面应用的优缺点 优点 单页应用的内容的改变不需要重新加载整个页面，web 应用更具响应性和更令人着迷.单页应用没有页面之间的切换，就不会出现“白屏现象”也不会出现假死并有“闪烁”现象 单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。 良好的前后端分离。后端不再负责模板渲染.输出页面工作，后端 API 通用化，即同一套后端程序代码，不用修改就可以用于 Web 界面.手机.平板等多种客户端。 缺点 首次加载耗时比较多. SEO 问题，不利于百度，360 等搜索引警收录。 容易造成 Css 命名冲突 前进,后退,地址栏,书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。
- 6.Vue 如何实现单页面应用 通常的 ud 地北由以下内容构成:协议名 域名 口号 路径 参数 哈希值，当哈希值改变，页面不会发生跳转，单页面应里就是利用了这一点给 window 注册 onhashchange 事件，当哈希值改变时通过 ocation.hash 就能获得相应的哈希值，然后就能跳到相应的页面，a.hash 通过监听浏览器的onhashchange()事件变化，查找对应的路由规则 b.history 原理: 利用 H5 的history 中新增的两 APl pushState() 和 replaceState()和一个事件 onpopstate 监听 URL变化
