집 > 기사 > 웹 프론트엔드 > Vue.js의 리스너 사용 사례 분석

Vue.js의 리스너 사용 사례 분석

php中世界最好的语言원래의: 2018-05-14 14:03:031978검색

이번에는 Vue.js의 리스너 사용 사례에 대한 분석을 가져오겠습니다. Vue.js에서 리스너를 사용할 때 주의사항은 무엇인가요?

Vue Listener watch

대부분의 경우 계산된 속성이 더 적합하지만 때로는 사용자 정의 리스너가 필요할 때도 있습니다. 이것이 바로 Vue가 watch 옵션을 통해 데이터 변경에 응답하는 보다 일반적인 방법을 제공하는 이유입니다. 이 접근 방식은 데이터가 변경될 때 비동기식 또는 비용이 많이 드는 작업을 수행해야 할 때 가장 유용합니다. 예:

<p id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</p>

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
// 请参考：https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this // this重定向
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 这是我们为判定用户停止输入等待的毫秒数
500
)
}
})
</script>

고급 사용 리스너(watch)

다음 코드가 있다고 가정합니다.

<p>
  <p>FullName: {{fullName}}</p>
  <p>FirstName: <input type="text" v-model="firstName"></p>
</p>
new Vue({
 el: '#root',
 data: {
 firstName: 'Dawei',
 lastName: 'Lou',
 fullName: ''
 },
 watch: {
 firstName(newName, oldName) {
  this.fullName = newName + ' ' + this.lastName;
 }
 } 
})

위 코드의 효과는 firstName을 입력할 때 wacth가 각 수정 사항의 새 값을 모니터링한다는 것입니다. . 를 입력한 다음 fullName을 계산하여 출력합니다.

핸들러 메소드 및 즉시속성

여기서 watch의 특징은 처음 바인딩할 때 실행되지 않고, firstName이 변경될 때까지 모니터링 계산이 실행되지 않는다는 것입니다. 그렇다면 처음 바인딩될 때 변경 사항을 실행하려면 어떻게 해야 할까요? watch 작성 방법을 수정해야 합니다. 수정된 watch 코드는 다음과 같습니다.

watch: {
 firstName: {
 handler(newName, oldName) {
  this.fullName = newName + ' ' + this.lastName;
 },
 // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
 immediate: true
 }
}

핸들러를 확인하셨나요? 이전에 작성한 watch 메소드는 실제로 이 핸들러를 기본적으로 작성합니다. Node.js는 이 로직을 처리할 것이며 최종 컴파일된 버전은 실제로 이 핸들러입니다.

그리고 instant: true는 wacth에서 firstName이 선언되면 내부의 핸들러 메소드가 즉시 실행된다는 의미입니다. false인 경우 효과는 이전과 동일하며 바인딩 시 실행되지 않습니다.

deep attribute

watch에는 깊은 속성도 있습니다. 기본값은 false이며, 이는 깊이 모니터링할지 여부를 나타냅니다. 예를 들어 데이터에

<p>
  <p>obj.a: {{obj.a}}</p>
  <p>obj.a: <input type="text" v-model="obj.a"></p>
</p>
new Vue({
 el: '#root',
 data: {
 obj: {
  a: 123
 }
 },
 watch: {
 obj: {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true
 }
 } 
})

라는 속성이 있습니다. 입력 상자에 데이터 보기를 입력합니다. obj.a의 값을 변경했을 때 유효하지 않은 것으로 나타났습니다. 최신 JavaScript(및 Object.observe 지원 중단)의 제한으로 인해 Vue는 객체 속성의 추가 또는 제거를 감지할 수 없습니다. Vue는 인스턴스를 초기화할 때 속성에 대해 getter/setter 변환 프로세스를 수행하므로 Vue가 응답할 수 있도록 변환하려면 속성이 데이터 객체에 존재해야 합니다.

기본적으로 핸들러는 obj 속성 참조의 변경 사항만 모니터링합니다. 예를 들어, 마운트된 이벤트 후크 함수에서 obj를 다시 할당합니다.

mounted: {
 this.obj = {
 a: '456'
 }
}

이 방법은 다음과 같습니다. 우리는 그것을 합니다. 핸들러가 실행되고 변경된 obj.a가 인쇄됩니다.

반대로, obj에서 속성 a의 값을 모니터링해야 한다면 어떻게 될까요? 이럴 때 deep 속성이 유용하게 쓰입니다!

watch: {
 obj: {
 handler(newName, oldName) {
  console.log('obj.a changed');
 },
 immediate: true,
 deep: true
 }
}

deep은 리스너가 레이어별로 탐색하고 이 리스너를 객체의 모든 속성에 추가한다는 것을 의미합니다. 그러나 obj의 모든 속성을 수정하면 이 리스너의 핸들러가 매우 커집니다. 트리거되었습니다.

최적화, 문자열양식 모니터링을 사용할 수 있습니다.

watch: {
 'obj.a': {
 handler(newName, oldName) {
  console.log('obj.a changed');
 },
 immediate: true,
 // deep: true
 }
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!