vue에서 데이터 변경을 자동으로 감지하도록 watch를 구현하는 방법
- 亚连원래의
- 2018-06-11 17:34:013714검색
이번 글에서는 Vue watch가 데이터 변화를 자동으로 감지하여 실시간으로 렌더링하는 방법을 주로 소개하고 참고용으로 올려드립니다.
이 글에서는 Vue watch가 데이터 변경 사항을 자동으로 감지하고 실시간으로 렌더링하는 방법을 소개합니다. 자세한 내용은 다음과 같습니다.
먼저 watch가 객체이며 반드시 객체로 사용되어야 하는지 확인하세요. 물체.
객체에는 키와 값이 있습니다.
Key: $route와 같이 모니터링하려는 녀석입니다. 이는 라우팅 변경을 모니터링하기 위한 것입니다. 또는 데이터의 변수입니다.
값은 함수일 수 있습니다. 모니터링 중인 항목이 변경될 때 실행해야 하는 함수입니다. 이 함수에는 두 가지 형식 매개변수가 있습니다. 첫 번째는 현재 값이고 두 번째는 변경된 값입니다.
값은 함수 이름일 수도 있습니다. 하지만 이 함수 이름은 작은따옴표로 묶어야 합니다.
세 번째 상황이 굉장하네요.
값은 옵션이 포함된 개체입니다. 세 가지 옵션이 있습니다.
첫 번째 핸들러: 해당 값은 콜백 함수입니다. 즉, 변경사항이 감지되었을 때 실행되어야 하는 함수입니다.
두 번째는 심층입니다. 해당 값은 심층 모니터링할지 여부를 확인합니다. (일반적으로 모니터링 중에는 객체 속성 값의 변화를 모니터링할 수 없지만 배열 값의 변화는 들을 수 있습니다.)
세 번째는 즉시: 해당 값이 true 또는 false인지 확인합니다. 현재 초기값 함수를 사용합니다.
watch 인스턴스
지난번에 this.$set 또는 vm.set를 사용하여 페이지에 렌더링된 데이터(추가, 삭제)를 동적으로 변경하여 다시 계산하고 다시 렌더링할 수 있다고 언급했습니다. .
때때로 특정 데이터나 값을 동적으로 변경한 후 다음 코드 예제와 같이 변경한 값을 기반으로 다른 처리 작업(예: 표시, 숨기기, 추가, 삭제)을 수행해야 합니다.
여기 Tab의 예입니다.
vue 프로젝트에서 새 Tab 구성 요소 페이지 만들기
<template>
{{index}}
<p>
<p @click="showFun(0)">Tab1</p>
<p @click="showFun(1)">Tab2</p>
<p @click="showFun(2)">Tab3</p>
</p>
<p>
<p v-if="index == 0">cont1</p>
<p v-if="index == 1">cont1</p>
<p v-if="index == 2">cont1</p>
</p>
</template>
<script>
export default {
data(){
return {
index: 0 // 索引
}
},
watch:{ // 实时检测
index(idx){ //实时监听index的变化
console.log(idx) //在这里你可以再根据idx的值，做出其它的操作
}
},
methods:{
showFun(idx){
this.index = idx
}
}
}
</script>watch를 사용하면 데이터 변경 시 비동기 또는 비용이 많이 드는 작업을 수행해야 하는 경우 이 방법이 가장 유용합니다.
다른 검색 예를 들어보겠습니다:<template>
<input v-model="value" /> // 搜索框
</template>
<script>
export default {
data(){
return {
value: '' // 值
}
},
watch:{
value(val){ // 实时监听数据变化
this.wat_fun(val)
}
}，
methods:{
wat_fun(val){ // 这里可以调用搜索api接口
console.log(val)
}
}
}
</script>위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:
cropper의 js를 통해 vue에서 이미지 자르기 및 업로드 기능을 구현하는 방법
vue에서 Cropperjs를 사용하는 방법(자세한 튜토리얼)
vue.js에서 이미지의 로컬 미리보기 구현 자르기, 압축, 업로드 등 일련의 기능
FastClick 소스 코드에 대한 자세한 설명(자세한 튜토리얼)
vue 및 element-ui를 사용하여 테이블 콘텐츠 페이징을 구현하는 방법
위 내용은 vue에서 데이터 변경을 자동으로 감지하도록 watch를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!