vue如何利用defineProperty,watcher,compiler,observer 实现数据的双向绑定

Posted lvjingting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue如何利用defineProperty,watcher,compiler,observer 实现数据的双向绑定相关的知识,希望对你有一定的参考价值。

<div id="mvvm-app">
    <input type="text" v-model="word">
    <p>{{word}}</p>
    <button v-on:click="sayHi">change model</button>
</div>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/defineProperty.js"></script>
<script>
    var vm = new MVVM({
        el: ‘#mvvm-app‘,
        data: {
            word: ‘Hello World!‘
        },
        methods: {
            sayHi: function() {
                this.word = ‘Hi, everybody!‘;
            }
        }
    });
</script>

  

以上是关于vue如何利用defineProperty,watcher,compiler,observer 实现数据的双向绑定的主要内容,如果未能解决你的问题,请参考以下文章

Vue源码Object.defineProperty与Proxy

vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单

Vue3 双向绑定——Proxy

双向数据绑定实现之Object.defineProperty

defineProperty

vue --- object.defineProperty基本使用