[TOC] cookie localStorage SeeionStorage 区别
VUE基础知识
1、对于MVVM的理解？
为什么data是一个函数
组件如果用data对象表示的话，所有组件中的data会指向同一块内存，会造成互相干扰，如果写成一个函数，就不会出现这个问题，因为创建不同组件的时候，会return出不同地址的对象，不会互相干扰组件之间的数据。
2、VUE的生命周期
beforeCreate：是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。
created：在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。
beforeMount：发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
mounted：在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。
beforeUpdate：发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
updated：发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。
beforeDestroy：发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。
destroyed：发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
3、 Vue实现数据双向绑定的原理：Object.defineProperty（）
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。
js实现简单的双向绑定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
4、Vue组件间的参数传递
1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接收数据;
子组件传给父组件：$emit方法传递参数
2.非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。
还可以用VUEX来实现
4、Vue组件间的参数传递
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
5、在生命周期的什么阶段才能访问操作DOM
mounted
6、你的接口请求一般放在哪个生命周期中？
created 阶段的优势是：请求时间比较早，页面 loading 时间相对较短；
mounted 阶段的优势是：页面已经渲染完成，如果想请求之后进行 DOM 操作的话，必须在 mounted 阶段发起请求
7、VUE中computed和watch的使用场景（特点和区别）
1、watch擅长处理的场景：一个数据影响多个数据
2、computed擅长处理的场景：一个数据受多个数据影响
computed和methods相比，computed有缓存，性能开销小，什么是computed缓存呢？
在改变某一个数据时，整个应用会重新渲染，如果你使用method里面的方法，则这个方法会呗反复调用
而computed不会重新计算，只有依赖的值有变化时，才会重新计算，这就是computed的缓存。
特点和区别：
这两者都能达到同样的效果，但是基于各自的特点，场景会有一些区分。
computed主要用于同步对数据的处理，它可以缓存值，当依赖的值变化时，才会重新计算，适用于计算或者格式化数据，并且可以设置get和set
watch 用于监听数据，当监听到值发生变化就会执行回调（同步or异步执行）
8、vue数据双向绑定原理
在new Vue的时候，在Observer中通过Object.defineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图
而Compile通过Watcher订阅对应数据，绑定更新函数，通过Dep来添加订阅者，达到双向绑定
参考地址
vue的双向绑定是通过object.definePropety来将data的属性全部转化为getter和setter来实现的，当改变数据的某个属性时，会触发set函数，获取该属性值的时候会触发get函数，通过这个特性来实现数据改变的时候改变视图，也就是说只有当数据改变时才会触发视图的更新，反过来在操作视图时，只能通过触发dom上的事件来改变数据，再由此改变视图，以此实现双向绑定。
双向绑定是在同一个组件内，将数据和视图绑定起来。
地址
9、v-show和v-if的区别
v-show是dom渲染了，但是不可见，v-if 是dom不会渲染在页面上
10、keep-live
https://www.jianshu.com/p/7aa0d8c7503f
为什么v-for和v-if不建议一起使用
因为v-for的优先级比v-if要高，如果在循环里面使用if判断的话，那每次循环都要判断一次，比较浪费性能，可以在拿到数据之后把数据处理好，或者使用computed去代替if处理数据。
网友评论