Vue의 양방향 바인딩 원칙은 무엇입니까? Vue 양방향 바인딩 원칙 구현

이 기사에서 제공하는 내용은 Vue의 양방향 바인딩 원칙이 무엇입니까? Vue 양방향 바인딩의 원칙 구현에는 특정 참조 가치가 있습니다. 도움이 필요한 친구가 이를 참조할 수 있기를 바랍니다.

먼저 렌더링

데이터 양방향 바인딩의 간단한 구현
먼저 한 가지를 이해해 봅시다: Object.defineProperty()

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

여기에 MDN의 자세한 설명이 있습니다
간단히 말하면:

이 메소드는 기존 객체 속성의 값을 수정할 수 있습니다.
Object.defineProperty(obj, prop, descriptor)
매개변수 설명:
obj: 속성을 정의하는 객체
prop: 수정된 속성
descriptor: 수정된 속성 설명자

여기서는 가장 간단한 것인

get:

official: 속성에 대한 getter를 제공하는 메서드만 선택합니다. getter가 없으면 정의되지 않습니다. 속성에 액세스하면 메서드가 실행됩니다. 메서드가 실행될 때 매개 변수가 전달되지 않지만 this 객체가 전달됩니다(상속 관계로 인해 여기서는 반드시 속성을 정의하는 객체가 아닐 수도 있습니다). . 기본값은 정의되지 않았습니다.

**간단히 말하면: 객체의 속성 값을 가져와야 할 때 이 함수를 호출하여 값을 가져옵니다**

set:

Official: 속성에 대한 setter를 제공하는 메서드입니다. 세터가 없으면 정의되지 않습니다. 이 메서드는 속성 값이 수정될 때 트리거됩니다. 이 메서드는 속성의 새 매개변수 값인 유일한 매개변수를 허용합니다. 기본값은 정의되지 않았습니다.

**간단히 말하면: 객체의 속성 값을 설정(변경)해야 할 때 이 함수를 호출하여 수정하면 됩니다**

다음 단계는 코드

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>
    

관련 권장 사항:

Angular와 Vue 양방향 데이터 바인딩의 구현 원리(vue의 양방향 바인딩에 중점을 둡니다)

vue의 양방향 데이터 바인딩 원리 탐구

위 내용은 Vue의 양방향 바인딩 원칙은 무엇입니까? Vue 양방향 바인딩 원칙 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!