1 장 검토
머리말
이전 지침을 소개 한 후 다음은 일부 계산 개체에 대한 소개입니다. 물론 Vue ()의 methods객체 는 앞에서 언급 한 바 있는데, 이것은 메소드 객체입니다. 대부분의 로직을 처리 할 수 있지만 Vue는 우리가 선택할 수있는 계산 방법도 제공합니다.
계산 된 속성
템플릿의 표현식은 합법적 인 자바 스크립트 구문 인 한 매우 편리하지만 Vue는 간단한 계산을 위해이를 설계했습니다. 템플릿에 너무 많은 논리를 넣으면 템플릿이 너무 무거워지고 유지 관리가 어려워집니다. 예를 들어, 문자열을 반대로하려면 :
<div id="example">
{
{ message.split('').reverse().join('') }}
</div>
여기서 템플릿은 더 이상 단순한 선언적 논리가 아닙니다. 여기에 변수 메시지를 표시하려는 플립 문자열이 있음을 깨닫기 위해 잠시 지켜봐야합니다. 이 뒤집힌 문자열을 템플릿의 여러 위치에 포함하려면 처리하기가 더 어려워집니다. 따라서 복잡한 논리의 경우 메서드를 사용하여 작업을 수행하는 것 외에도 계산 된 특성을 사용할 수 있습니다.
예는 다음과 같습니다.
<body>
<div id="app">
<p>{
{reverString}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
bool:false,
mse:"欲与天公试比高"
},
computed:{
/*
reverString:function () {
return this.mse.split(" ").reverse().join(" ")
},
*/
reverString() {
return this.mse.split("").reverse().join("")
}
}
})
</script>
</body>
<!--
显示结果
高比试公天与欲
-->
다음은 문자열을 뒤집기의 작업이. 계산 된처럼 방법은, 이러한 두 가지 방법이 올바르게 식별 할 수있다, 그러나 계산 된 속성이 방법은 아니라는 것을 주목해야 및 매개 변수를 전달 될 수 없습니다. 때 {
{}}그냥에서 참조 쓰기 메소드 이름을 직접 입력하고 괄호를 추가하지 마십시오. 그렇지 않으면 오류가보고됩니다.
app.mse="长风破浪会有时"
console.log(app.reverString)
위의 예에 따라 일반 속성과 마찬가지로 템플릿에서 계산 된 속성을 바인딩 할 수 있습니다. Vue는 app.reverString이 app.mse에 의존한다는 것을 알고 있으므로 app.mse가 변경되면 app.reverString에 의존하는 모든 바인딩도 업데이트됩니다. 그리고 무엇보다도이 종속성을 선언적으로 생성해야합니다. 속성 getter함수 의 계산은 부작용이 아닙니다.
계산 된 속성과 메서드의 차이점
소개하기 전에 예제를 실행하고 콘솔 출력을 관찰하십시오.
<body>
<div id="app">
<p>{
{reverString}}</p>
<p>{
{reverString}}</p>
<p>{
{reverString}}</p>
<hr>
<p>{
{reverStr()}}</p>
<p>{
{reverStr()}}</p>
<p>{
{reverStr()}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
bool:false,
mse:"高比试公天与欲"
},
methods:{
reverStr() {
console.log("这里是methods")
return this.mse.split("").reverse().join("")
}
},
computed:{
reverString() {
console.log("这里是computed")
return this.mse.split("").reverse().join("")
}
}
})
</script>
</body>
<!--
输出结果:
这里是computed
这里是methods
这里是methods
这里是methods
-->
methods및 computed에 대한 메서드는 세 번 호출됩니다. 콘솔의 인쇄 상황을 관찰합니다. 결과에 따르면 계산 된 속성이 캐시에 따라 달라짐을 나타내며 계산 된 속성이 한 번 인쇄되고 메서드가 세 번 인쇄되는 것을 확인할 수 있습니다. 속성은 관련 반응 종속성에서만 변경됩니다. 동시에 재평가됩니다. 즉, 다음 계산 된 속성이 더 이상 캐시에 입력되지 않고 계산 된 속성이 더 이상 업데이트되지 않습니다. )는 반응 종속성이 아닙니다.
computed: {
now() {
return Date.now()
}
}
반대로 다시 렌더링이 트리거 될 때마다 호출 메서드는 항상 함수를 다시 실행합니다.
캐싱이 필요한 이유는 무엇입니까? 상대적으로 성능 오버 헤드가 큰 계산 속성 목록이 있고 거대한 배열을 탐색하고 많은 계산을 수행해야한다고 가정합니다. 그러면 목록에 따라 다른 계산 된 속성이있을 수 있습니다. 캐시가 없으면 필연적으로 목록 게터를 여러 번 실행합니다! 캐시를 원하지 않는 경우 대신 메소드를 사용하십시오.
계산 된 속성 getter
계산 된 속성에는 기본적으로 getter 만 있지만 필요한 경우 setter를 제공 할 수도 있습니다.
<body>
<div id="app">
<p>{
{fullName}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
firstName:"Liu",
lastName:"Xiang"
},
computed:{
// 简写形式
// fullName () {
// return this.firstName + " " + this.lastName
// }
fullName:{
set:function (newValue) {
const names = newValue.split(" ")
this.firstName = names[0]
this.lastName = names[1]
},
get:function () {
return this.firstName + " " + this.lastName
}
}
}
// app.fullName = "English Name"
})
</script>
</body>
계산 된 속성을 사용할 때는 일반적으로 읽기 전용 인 get 메서드 만 사용하기 때문에 실제로 속기를 사용합니다. 수정하려면 set 메서드를 사용자 지정해야합니다. 설정 방법에서 데이터의 데이터에 값을 할당합니다. 설정 및 설정 방법을 실행 한 후 app.fullName = 'John Doe'때, 세터가 호출 될 것이다, app.firstName그리고 app.lastName그에 따라 업데이트됩니다.