브라우저 콘솔에서 VueJs $watch 트리거가 작동하지 않음

브라우저 콘솔에서 VueJs $watch 트리거가 작동하지 않음

나는 이것을 가지고 있다.main.jsVue 어플리케이션을 부트스트랩하는 파일입니다.

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

var model = {
  a: 1,
  name: 'Abdullah'
}

var app = new Vue({
  el: '#app',
  data: model,
  router,
  template: '<App/>',
  components: {
    App
  },
  watch: {
    a: function(val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
});

app.a = 23; //This triggers the watch function

뷰 인스턴스 내에서 데이터의 변경을 감시하고 있습니다.a.

변경 사항a를 트리거합니다.watch콘솔에 씁니다.이것.watch값을 변경하여 트리거하면 정상적으로 동작합니다.a내부로부터main.js이렇게 줄서다app.a=23;하지만 브라우저 콘솔에서 트리거할 때도 동일하게 동작하지 않습니다.

트리거 방법watch언제든지 브라우저 콘솔에서a변경되었습니까?

PS: 저는 이제 막VueJS.

여기에는 몇 가지 문제가 있습니다.

우선은div와 함께id의app. 모든 브라우저는 html 요소를 만듭니다.id글로벌 변수로 사용할 수 있습니다.그러면 다음과 같은 글로벌 변수가 있습니다.app를 가리키다div와 함께id의app.

둘째, 다음 결과를 캡처합니다.new Vue()라는 변수로app다만, 빌드 시스템을 사용하고 있기 때문에(사용하고 있기 때문에)import)그것 app거의 모든 빌드 시스템이 컴파일된 Javascript를 클로징으로 래핑하기 때문에 글로벌 범위에서는 사용할 수 없습니다.

그 결과,app변경은 불가능하지만 변경은 완전히 다른 변수가 존재하기 때문인 것 같습니다.app글로벌 범위에서 이용하실 수 있습니다.

실행하려는 작업을 수행할 경우 스크립트를 다음과 같이 변경할 것을 권장합니다.

window.myApp = new Vue(...)

그러면 콘솔로 이동하여

myApp.a = 23

그리고 당신이 기대하는 결과를 보세요.

언급URL : https://stackoverflow.com/questions/44241347/triggering-vuejs-watch-from-browsers-console-not-working