vue2와 vue3 양방향 바인딩의 차이점은 무엇입니까?

vue2와 vue3의 양방향 바인딩의 차이점은 다음과 같습니다. vue2는 양방향 바인딩을 달성하기 위해 "Object.defineProperty" 객체와 객체 속성 하이재킹을 사용하는 반면, vue3의 응답성은 ES6의 "Proxy" 메서드를 사용합니다. 확실히 양방향 바인딩을 달성합니다.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue2와 vue3의 양방향 바인딩의 차이점은 무엇인가요?

Vue2 양방향 데이터 바인딩 문제:

                                              ~                                    .利 배열에 관하여 : 인덱스를 이용하여 배열 항목을 직접 설정할 수 없으며 배열의 길이를 수정할 수도 없습니다.

Vue2.0

원리: Object.defineProperty 개체와 개체 속성의 하이재킹 + 게시-구독 모드를 사용하면 데이터가 변경되는 한 변경 사항을 직접 알리고 뷰 업데이트를 구동합니다.

문법:

Object.defineProperty(obj, "name", { get:()=> {}, set:()=> {})

매개변수 1: obj: 개체 하이재킹, 매개변수 2: "name": 개체 속성 하이재킹, 매개변수 3: 속성에 set 및 get 메서드 추가

예:

 let obj = { name: "tom", age: 10 };
    Object.defineProperty(obj, "name", {
      get: () => {
        console.log("访问了name属性");
      },
      set: (newVule) => {
        console.log("设置了name属性");
      },
    });
    obj.name; //触发get
    obj.name = "jack";//触发set

Vue3.0

원칙: Vue3.0의 응답성은 ES6의 Proxy 메서드를 사용합니다. 프록시 객체는 기본 작업(속성 조회, 할당, 열거, 함수 호출 등)에 대한 사용자 정의 동작을 정의하는 데 사용됩니다.

구문:

let p =new Proxy(obj,{get:(target,prop,p)=>{},set:(target, prop, vaule, p)=>{}})

매개변수 1: 대상: 객체 하이재킹, 매개변수 2: prop: 객체 속성 하이재킹 , 매개변수 3: 진공: 새 속성 값, p: 자체

예:

   // vue3
    let p = new Proxy(obj, {
      get: (target, prop, p) => {
        console.log("获取");
        return prop in target ? target[prop] : "默认值";
      },
      set: (target, prop, vaule, p) => {
        console.log("设置");
        target[prop] = vaule;
      },
    });
    console.log(p.name); //访问了name属性
    console.log((p.name = "java")); //设置了name属性

요약:

vue2는 Object.defineProperty를 통해 객체의 모든 속성을 하이재킹합니다.

vue3은 프록시 속성을 통해 객체의 모든 속성을 하이재킹합니다

[관련 추천: "

vue.js tutorial

"]

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