今天的面试题 (2020.01.06) —— 第4天
- MVVM和MVC的区别
- Vue的生命周期
- Vue如何实现双向绑定
MVVM和MVC的区别
MVVM(model-view-viewModel)
- model：数据层，可以在这里修改数据和业务逻辑
- view： 视图层，也就是ui组件，通过将model转换成ui展示出来
- viewModel: 是一个负责将model和view相关联起来的一个对象，本身view和model之间并没有任何联系，使得view如果发生改变model也会改变，如果model发生改变view也会发生改变，这个过程是全自动的，不需要手动操作DOM修改，使得开发者能够专注于业务逻辑Vue的生命周期
一共有8个：
beforeCreate(创建前): 实例组件刚刚被创建，元素DOM和数据都还没有初始化
created(创建后)：数据初始化完成，方法也已经能够被调用，但是DOM未渲染，拿不到DOM
beforeMount（载入前）：DOM尚未挂载，数据初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑
mounted（载入后）：数据和DOM都已经完成挂载，在上一个周期占位的数据把值给渲染进去，可以在这里请求，但是在created请求会更好一些。
beforeUpdate：只要是页面数据改变了都会触发，页面数据还是原来的数据
update：只要是页面数据改变了都会触发，数据已经更新完成是最新的
beforeDestroy(销毁前)：这个周期是在组件被销毁之前执行，这个周期和路由钩子有点像，都是在路由离开的时候执行
destroy(销毁后)：说实在的我也不知道这个和beforeDestoroy有什么区别，我在这个周期里面调用data的数据和methods方法都能用。
如果你使用了keep-alive缓存组件，此时beforeDestroy和destroy会不存在，而是会多activated和deactivated
-
Vue如何实现双向绑定
-简单来说主要是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的getter、setter在数据变动时，触发相应的回调
用js实现一个简单的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
</style>
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
<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>
</body>
《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。
前端每日面试题，以面试题来驱动学习，每天进步一点！
让努力成为一种习惯，让奋斗成为一种享受！
- 学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天纯手工发布面试题（死磕自己）。
- 希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。
- 在这千变万化，类库层出不穷的前端，不建议大家等到要找工作时，才狂刷题，提倡每日学习！（不忘初心，后面会多出Vue、js的相关面试题）
- 欢迎大家加我QQ（2581229638）或者微信交流，大家有啥好的建议可以加我微信一起交流讨论！
作者：李永奇
链接：https://www.jianshu.com/p/3ac358c02e86
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
