Vue.js 의 계산 속성,감시 속성 과 생명주기 상세 설명
이 장 에서 Vue 에서 매우 중요 한 계산 속성,감시 속성 과 생명 주 기 를 말 해 보 겠 습 니 다.쓸데없는 말 없 이 바로 건어물 에 올 립 니 다.
계산 속성
계산 속성 소개
템 플 릿 에서 플러그 인 문법 을 통 해 data 의 데 이 터 를 직접 표시 할 수 있 습 니 다.어떤 경우 에 우 리 는 데 이 터 를 전환 하거나 계산 한 후에 표시 해 야 합 니 다.우 리 는 coptute d 옵션 을 사용 하여 계산 할 수 있 습 니 다.이때 일부 동료 들 은 제 가 함 수 를 직접 정의 하고 다시 사용 하면 되 지 않 습 니까?왜 하나의 계산 속성 을 완성 해 야 합 니까?라 고 물 을 수 있 습 니 다.이 문 제 는 아래 에서 다시 설명 하 겠 습 니 다.우 리 는 먼저 계산 속성 을 어떻게 사용 하 는 지 봅 시다!
입문 사례
수요
사람의 성과 이름 을 한데 잇다
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- -->
<p>{{fastName}} {{lastName}}</p>
<!-- -->
<p>{{fastName + " " + lastName}}</p>
<!-- -->
<p v-text="fullName2()"></p>
<!-- -->
<p>{{fullName1}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
fastName: "Tracy",
lastName: "McGrady"
},
computed: {
fullName1: function(){
return this.fastName + " " + this.lastName
}
},
methods: {
fullName2: function(){
return this.fastName + " " + this.lastName
}
}
})
</script>
</html>
통계 가격 사례
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{totalPrice}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
bookes: [
{id: 100,name: 'Unix ',price: 119},
{id: 200,name: 'Java ',price: 105},
{id: 300,name: ' ',price: 98},
{id: 400,name: 'Spring5',price: 99},
]
},
computed: {
totalPrice: function(){
let result = 0;
//
/* for(let i = 0;i < this.bookes.length;i++){
result += this.bookes[i].price;
} */
// for ，i
/* for(let i in this.bookes){
result += this.bookes[i].price;
} */
// ES6 for
for(let book of this.bookes){
result += book.price
}
return result;
}
}
})
</script>
</html>
소개 하 다.
속성 을 계산 하 는 전체 쓰기 방법 은 getter 와 setter 방법 을 포함 하여 fullName 대상 을 설명 합 니 다.우 리 는 보통 값 만 얻 기 때문에 위의 사례 로 생략 합 니 다.우 리 는 데 이 터 를 얻 을 때 get 방법 을 호출 하고 데 이 터 를 설정 할 때 set 방법 을 사용 합 니 다.
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{fullName}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
firstName: "Tracy",
lastName: "McGrady"
},
//
computed: {
//
fullName:{
//
set: function(){
console.log('---');
},
//
get: function(){
return this.firstName + " " + this.lastName;
}
}
}
})
</script>
</html>
위의 methods 와 coptute d 의 차이 점 에 대한 질문 에 답 하 겠 습 니 다.아래 코드 는 각각 플러그 인 문법,methods,계산 속성 을 사용 하여 데이터 렌 더 링 을 합 니 다.
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- ， ， -->
<p> ：{{name}} ：{{job}}</p>
<!-- methods ， -->
<p>{{getInfo1()}}</p>
<p>{{getInfo1()}}</p>
<p>{{getInfo1()}}</p>
<p>{{getInfo1()}}</p>
<!-- computed ， ， ， -->
<p>{{getInfo2}}</p>
<p>{{getInfo2}}</p>
<p>{{getInfo2}}</p>
<p>{{getInfo2}}</p>
<p>{{getInfo2}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
name: " ",
job: "NBA "
},
methods: {
getInfo1: function(){
console.log("methods");
return " ：" + this.name + " ： " + this.job;
}
},
computed: {
getInfo2: function(){
console.log("computed");
return " ：" + this.name + " ： " + this.job;
}
}
})
</script>
</html>
결론.
감시 속성
개술
저 희 는 watch 를 사용 하여 지정 한 데이터 의 변환 을 감청 하고 해당 하 는 논리 적 처리 데 이 터 를 호출 할 수 있 습 니 다.
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
<input type="text" v-model="fullName" />
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
firstName: "A",
lastName: "B",
fullName: "AB"
},
//
watch: {
firstName(value) {
this.fullName = value + this.lastName
},
lastName(value) {
this.fullName = this.firstName + value
}
}
})
</script>
</html>
감청 속성 은 계산 속성 코드 보다 훨씬 많 습 니 다.계산 속성 은 데이터 만 계산 하면 되 고 감청 속성 은 모든 데이터 의 변 화 를 감청 해 야 합 니 다.
Vue 수명 주기
다음 그림 은 실례 적 인 생명주기 를 보 여 준다.너 는 즉시 모든 것 을 이해 할 필요 가 없 지만,너의 끊 임 없 는 학습 과 사용 에 따라,그것 의 참고 가 치 는 갈수 록 높 아 질 것 이다
생명주기 는 크게 세 단계 초기 화 단계,갱신 단계,사망 단계 로 나 뉜 다
초기 화 단계
이 단 계 는 new Vue 인 스 턴 스 에서 호출 되 며 한 번 만 호출 됩 니 다.
beforeCreate:생 성 전 호출 함수
created:생 성 후 호출 함수
이후 마 운 트 와 템 플 릿 렌 더 링 을 진행 합 니 다.
beforeMount:마 운 트 하기 전에 엘 이 선택 한 탭 을 교체 합 니 다.
mounted:마 운 트 완료,브 라 우 저 에 데이터 표시
업데이트 단계
데이터 가 변 할 때 이 단계 에 들 어가 면 이 단 계 는 자주 호출 된다.
beforeUpdate:데이터 가 수정 되 었 을 때 터치 합 니 다.
updated:가상 DOM 수정 후,즉 데이터 수정 후 호출
사망 단계
사망 단계 도 한 번 만 호출
beforeDestroy:소각 하기 전에
폐기
예제 코드 는 다음 과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-show="isShow">{{message}}</p>
<p>{{isShow}}</p>
<button type="button" @click="destroyVM"> </button>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
message: " ",
isShow: true
},
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("create");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
//
this.intervald = setInterval(()=>{
console.log("-------"+this.isShow);
this.isShow = !this.isShow;
},1000)
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
beforeDestroy() {
console.log("beforeDestroy");
//
clearInterval(this.intervald)
},
destroyed() {
console.log("destroyed");
},
methods: {
// vm
destroyVM() {
//
this.$destroy()
}
}
})
</script>
</html>
전체적으로 말 하면 created,mounted,beforeDestroy 가 자주 사용 된다.
총결산
Vue.js 에서 속성 을 계산 하고 속성 과 생명 주 기 를 감시 하 는 글 을 소개 합 니 다.더 많은 Vue 계산 속성,감시 속성 과 생명 주기 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 지 켜 주시 기 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue 의 방법 과 속성 사례 상세 설명vue 의 방법 과 속성 1.방법 methods 용법 methods：{ 방법 명:function(){}, 용법 methods：{ 방법 명(){} 주의 하 다. {{}}쓰기()호출 예시 {{aa()}} 이벤트 트리거 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
