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如何新增自定义指令？
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.指令的使用 <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 。