2021-08-10 面试题:vue实现双向绑定的原理

最新推荐文章于 2024-10-16 12:27:58 发布

原创最新推荐文章于 2024-10-16 12:27:58 发布 · 621 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

46 篇文章

订阅专栏

本文深入探讨Vue.js中双向绑定的工作机制，通过数据劫持和发布-订阅者模式，利用Object.defineProperty()监听数据变化，并触发视图更新。详细解释了从属性记录依赖到setter触发更新的具体流程。

简答

vue.js通过数据劫持结合发布者-订阅者模式,通过Object.defineProperty()劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发相应的监听回调函数

具体流程

*每个组件都有相应的watch实例对象,它会在组件渲染的过程中把属性记录为依赖
之后,当依赖项的setter被调用时,会通知watch重新计算,从而使其关联组件得以更新

双向绑定例子

<div id="app">
    <input v-model="msg">
    <p>{{msg}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello"
        }
    });
</script>

双向绑定原理分析

代码

new Vue({
    el: "#app",
    data: {
        obj: {
            num: 5
        }
    },
    created: function() {
        console.log(this.obj);
    }
});