What is the principle of two-way binding in Vue? Implementation of the principle of vue two-way binding

This article brings you what is the principle of vue two-way binding? The principle implementation of Vue two-way binding has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First the renderings

Simple implementation of two-way binding of data
First let’s understand one thing : Object.defineProperty()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Here is MDN’s detailed description of this
To put it simply:

This method can modify the value of the existing object property
Object.defineProperty (obj, prop, descriptor)
Parameter description:
obj: object defining attributes
prop: modified attribute
descriptor: modified attribute descriptor

Only select here To put it simply,

get:

Official: A method that provides a getter for a property. If there is no getter, it is undefined. When the property is accessed, the method will be executed. No parameters are passed in when the method is executed, but the this object will be passed in (due to the inheritance relationship, this here is not necessarily the object that defines the property). Default is undefined.

**Simply put: when you need to get the attribute value of an object, just call this function and get the value**

set:

Official: A method that provides a setter for a property, or undefined if there is no setter. This method is triggered when the property value is modified. This method will accept the only parameter, which is the new parameter value of the property. Default is undefined.

**Simply put: when you need to set (change) the attribute value of an object, just call this function to achieve the modified **

The next code

nbsp;html>

    
        <meta>
        <meta>
        <title></title>
    
    
        <div></div>
        <div>
            <input>
        </div>
        <script>
            var data = {};
            var dom_aa = document.getElementById("aa")
            
            function changedata(value){
                data.a = value
            }

            //直接使用Object.defineProperty里面的set方法进行视图改变
            Object.defineProperty(data,"a",{
                set:function(newValue){
                    dom_aa.innerHTML = newValue;
                },
                get:function(){
                    return a;
                }
            })
        </script>
    

Related recommendations:

The implementation principle of two-way data binding between Angular and Vue (the focus is on the two-way binding of vue)

vue Exploring the principles of two-way data binding

The above is the detailed content of What is the principle of two-way binding in Vue? Implementation of the principle of vue two-way binding. For more information, please follow other related articles on the PHP Chinese website!