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

最新推荐文章于 2025-03-12 13:40:29 发布

前端OnTheRun

最新推荐文章于 2025-03-12 13:40:29 发布

阅读量594

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/119479140

版权

vue 专栏收录该内容

41 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简答

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);
    }
});