撩课-Web大前端每天5道面试题-Day20
1.vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。2. 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实现简单的双向绑定:【撩课-Web大前端每天5道面试题-Day20】
3.vue-cli如何新增自定义指令？
1.创建局部指令var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
directives: {
// 指令名称
dir1: {
inserted(el) {
// 指令中第一个参数是当前使用指令的DOM
console.log(el);
console.log(arguments);
// 对DOM进行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})2.全局指令Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
3.指令的使用4.v-if 和 v-show 区别?
v-if按照条件是否渲染，v-show是display的block或none；5.mvvm和mvc区别？
mvc和mvvm其实区别并不大。
都是一种设计思想。
主要就是mvc中Controller演变成mvvm中的viewModel。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，
加载速度变慢，影响用户体验。
和当 Model 频繁发生变化，开发者需要主动更新到View 。推荐阅读
- 我要做大厨
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 知识
- 三十年后的广场舞大爷
- 奔向你的城市
- 村里的故事|村里的故事 --赵大头
- 期刊|期刊 | 国内核心期刊之（北大核心）
- 华为旁！大社区、地铁新盘，佳兆业城市广场五期！
- 汇讲-勇于突破
- 每日一话（49）——一位清华教授在朋友圈给大学生的9条建议