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实现简单的双向绑定:
<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>
3.vue-cli如何新增自定义指令？
.创建局部指令
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';
}
}
}
})
.全局指令
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
.指令的使用
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
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 。