vue가 객체를 들을 수 없는 이유는 무엇입니까-프런트엔드 Q&A-php.cn

vue가 객체를 들을 수 없는 이유는 무엇입니까

PHPz

풀어 주다： 2023-04-17 13:55:49

원래의

799명이 탐색했습니다.

머리말

Vue.js 개발에서는 Vue.js의 핵심 기능 중 하나인 양방향 데이터 바인딩이 자주 사용됩니다. 그러나 Vue 인스턴스에서 객체를 생성한 다음 객체에 새 속성을 추가하면 Vue가 속성 변경을 감지하지 못하는 경우가 있습니다. 이 기사에서는 이 문제를 자세히 살펴볼 것입니다.

이 기사에서는 다음 질문을 살펴볼 것입니다.

어떤 상황에서 Vue 객체가 속성 변경을 수신할 수 있나요?
어떤 상황에서 Vue가 객체의 변경 사항을 감지하지 못할 수 있나요?
Vue는 객체의 소리를 들을 수 없는 문제를 어떻게 해결하나요?

어떤 상황에서 Vue 객체가 속성 변경을 감지할 수 있나요?

Vue.js에서는 Vue 객체를 인스턴스화할 때 정의된 속성만 반응형입니다. 예:

var vm = new Vue({
  data: {
    message: 'Hello world'
  }
});

// 改变message属性，view会自动更新
vm.message = 'Changed message';

로그인 후 복사

Vue 인스턴스에 객체나 배열과 같은 복잡한 데이터 유형을 처음부터 정의하면 객체의 속성이나 배열의 항목이 자동으로 반응형 속성이 됩니다.

예:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    },
    arr: [1, 2, 3, 4, 5]
  }
});

// 对象的属性变化可以被侦听到
vm.obj.message = 'Changed message';

//数组的项目变化可以被侦听到
vm.arr.push(6);

로그인 후 복사

Vue.js는 Vue 인스턴스의 Object.defineProperty() 메서드를 사용하여 객체의 속성을 getter/setter로 변환하므로 객체 속성의 변경 사항을 감지할 수 있습니다.

어떤 상황에서 Vue가 객체의 변경 사항을 감지하지 못할 수 있나요?

위에서 Vue 인스턴스에 복잡한 데이터 유형이 정의되면 객체의 속성이나 배열의 항목이 자동으로 반응형 속성이 된다고 언급했습니다. 그러나 객체에 새 속성을 추가하면 Vue는 해당 속성의 변경 사항을 수신할 수 없습니다.

예:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 新添加属性，无法被侦听到
vm.obj.newProp = 'new value';

//改变新添加属性，仍然无法被侦听到
vm.obj.newProp = 'changed value';

로그인 후 복사

Vue.js는 Vue 객체를 인스턴스화할 때 나중에 추가된 속성이 아닌 이미 정의된 속성만 수신하기 때문에 새로 추가된 속성의 변경 사항을 수신할 수 없습니다. 즉, 런타임에 새 속성을 추가할 때 Vue.set() 메서드를 사용하여 새 속성을 추가하고 반응형으로 만들어야 합니다. 예:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 使用Vue.set()方法来添加新属性
Vue.set(vm.obj, 'newProp', 'new value');

//新属性可以被侦听到
vm.obj.newProp = 'changed value';

로그인 후 복사

Vue는 객체를 들을 수 없는 문제를 어떻게 해결합니까?

Vue.set() 메서드를 사용하여 새 속성을 추가하고 반응형으로 만드는 것 외에도 객체를 수신할 수 없는 문제를 해결하는 다른 방법이 있습니다.

Vue 인스턴스화에서 모든 속성 정의

Vue 인스턴스를 생성한 후 새 속성을 추가하지 않는 가장 좋은 방법은 Vue 인스턴스화에서 모든 속성을 정의하는 것입니다. 예:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world',
      newProp: ''
    }
  }
});

//新属性现在侦听到了
vm.obj.newProp = 'new value';

로그인 후 복사

Vue.observable() 메서드 사용

Vue.observable() 메서드는 반응형 개체를 매개변수로 사용하고 반응형 기능이 있는 개체를 반환합니다. (이 방법은 Vue 2.6.0 버전의 새로운 방법입니다.) 예:

import Vue from 'vue';

var obj = {
  message: 'Hello world'
};
//使用Vue.observable()方法
var observableObj = Vue.observable(obj);

//新属性现在侦听到了
observableObj.newProp = 'new value';

로그인 후 복사

Conclusion

Vue.js 개발에서는 양방향 데이터 바인딩 기능이 매우 중요합니다. 그러나 Vue 객체를 사용할 때는 다음 사항에 주의해야 합니다.