撩课-Web大前端每天5道面试题-Day17

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 。

推荐阅读更多精彩内容