Vue의 계산된 속성, 메서드 및 리스너에 대해 이야기해 보겠습니다.
이 글은 Vue를 배우는 데 도움이 될 것이며, Vue의 기본 이론과 실제 작동에 대해 이야기하고, Vue에서 계산된 속성, 메서드 및 리스너를 소개하는 것이 모든 분들께 도움이 되기를 바랍니다!
요구 사항: 데이터에는 firstName 및 lastName의 두 가지 콘텐츠가 있고 페이지에 "전체 이름 fullName"이 표시됩니다. . firstName 和 lastName 两个内容，页面显示“全名 fullName ”。
通过上一篇文章可以知道，我们直接使用插值表达式就能实现这个需求：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端一万小时-计算属性、方法与侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{firstName + ' ' + lastName}} <!-- 2️⃣使用插值表达式展示全名。 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: { // 1️⃣在 data 中定义一组数据，里面有 firstName 和 lastName 两个内容；
firstName: 'Oli',
lastName: 'Zhao'
}
})
</script>
</body>
</html>
但需求是实现了，可同时模板上就有了一些逻辑。而模板本身是用来显示就好，并不需要添加逻辑在里面！【相关推荐：vuejs视频教程、web前端开发】
理想的方式是在插值表达式中直接添加 fullName 变量来显示全名：
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
fullName: 'Oli Zhao' // ❗️data 中添加了 fullName！
}
})
</script>
可以看到，当代码这样写时也是没有问题的。
但实际上代码冗余了：原本 data 内已经有了 firstName 和 lastName ，可以用它们组合出全名，但又重新定义了一次 fullName 。
接下来，将介绍另外三种方法来解决这个需求。
1 计算属性 computed
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao'
},
computed: { // 1️⃣计算属性 computed 属于 Vue 实例的方法，直接定义在实例中；
fullName() { // 2️⃣计算属性的值 fullName 是一个函数；
return this.firstName + ' ' + this.lastName // ❗️一定要写上 return 把计算结果返回！
}
}
})
</script>使用计算属性后，代码完全不会冗余， fullName 是根据 firstName 和 lastName 计算出来的，页面上的效果也是一样。
计算属性还有一个非常重要的知识点：
计算属性会基于它们的响应式依赖进行缓存。
也就是说，当计算属性依赖的数据发生改变时，它会重新计算；若没有变化时，则不计算，会一直使用上一次计算的结果（这样也就提高了一些性能）。
在我们的代码中，当 firstName 或 lastName 改变时，fullName 会重新计算，不变时则用缓存的上次计算结果。
<div id="app">
{{fullName}}
{{age}} <!-- 2️⃣把 age 渲染到模板上； -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
age: 18 // 1️⃣data 中添加 age 为 18；
},
computed: {
fullName() {
console.log('计算了一次') // 3️⃣每当执行时 console.log 一次。
return this.firstName + ' ' + this.lastName
}
}
})
</script>保存刷新网页后，可以看到计算属性 计算了一次 。当在控制台输入 vm.age = 20 更改 age 后，页面重新渲染了，“18”变为了“20”，但控制台没有再次输出 计算了一次 ，即计算属性没有进行重新计算。
而当我们更改 lastName 后，会重新计算一次：
2 方法 methods
第二种是我们已经非常熟悉的方法 methods ：
<div id="app">
<!-- ❗️注意：在插值表达式内，计算属性通过属性的名字就可以用，但调用方法时，
一定要加上 () 来进行调用！ -->
{{fullName()}}
{{age}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
age: 18
},
methods: { // ❗️在 methods 中定义 fullName 方法，逻辑上与计算属性一样；
fullName() {
console.log('计算了一次')
return this.firstName + ' ' + this.lastName
}
}
})
</script>保存后，刷新页面查看效果时，它会进行一次计算。当我们更改 age 时，它会再计算一次，更改 lastName 时也会进行一次计算：
所以方法是没有缓存机制的，只要页面重新渲染， fullName 方法就会被重新执行一次。
3 侦听器 watch
当使用侦听器时，不可避免的会让代码冗余：
<div id="app">
{{fullName}} <!-- 1️⃣-②：插值表达式内不需要 ()； -->
{{age}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
fullName: 'Oli Zhao', // 1️⃣-①：data 中定义 fullName；
age: 18
},
watch: { // 2️⃣在实例中定义侦听器 watch；
firstName() { /*
2️⃣-①：定义 firstName 方法，对 firstName 进行侦听，
当它改变时，重新对 fullName 赋值；
*/
console.log('计算了一次')
this.fullName = this.firstName + ' ' + this.lastName
},
lastName() { /*
2️⃣-②：定义 lastName 方法，对 lastName 进行侦听，
当它改变时，重新对 fullName 赋值。
*/
console.log('计算了一次')
this.fullName = this.firstName + ' ' + this.lastName
}
}
})
</script>保存后回到页面刷新。当第一次进入页面时，因为我们重新定义过 fullName ，所以 watch 不会进行计算就会显示出来。在修改与 fullName 不想关的数据 age 后，由于我们只用 watch 侦听了 firstName 和 lastName ，所以也不会进行计算。当我们修改 lastName
이전 기사에서 알 수 있듯이 보간 표현식을 사용하여 이 요구 사항을 직접 달성할 수 있습니다. 
rrreee
하지만 수요는 실현되지만 동시에 템플릿에는 몇 가지 논리가 있습니다. 템플릿 자체는 단지 표시용이므로 거기에 논리를 추가할 필요가 없습니다! [관련 권장사항: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발]
이상적인 방법은 fullName 변수를 사용하여 전체 이름을 표시합니다: 🎜rrreee🎜🎜🎜 이렇게 코드를 작성하면 문제가 없는 것을 알 수 있습니다. 🎜🎜사실 코드는 중복됩니다. 데이터에 이미 firstName 및 lastName이 있어 전체 이름을 결합하는 데 사용할 수 있지만 전체 이름. 🎜🎜다음으로, 이러한 요구를 해결하기 위해 세 가지 다른 방법이 소개될 것입니다. 🎜🎜1 계산된 속성 computed🎜
rrreee🎜계산된 속성을 사용한 후에는 코드가 전혀 중복되지 않습니다. fullName은 firstName 및 lastName을 기반으로 계산되며 페이지에 미치는 영향은 동일합니다. 🎜🎜계산 속성에 대해 알아야 할 또 다른 매우 중요한 사항이 있습니다. 🎜🎜🎜계산된 속성은 반응형 종속성에 따라 캐시됩니다. 🎜🎜🎜즉, 🎜계산된 속성이 의존하는 데이터가 변경되면 변경 사항이 없으면 다시 계산되며 마지막 계산 결과는 항상 🎜 사용하세요(이렇게 하면 일부 성능도 향상됩니다). 🎜🎜우리 코드에서는
firstName 또는 lastName이 변경되면 fullName이 변경되지 않은 경우 캐시된 성이 사용됩니다. . 결과를 계산합니다. 🎜rrreee🎜웹페이지를 저장하고 새로고침하면 계산된 속성이 한 번만 계산되는 것을 확인할 수 있습니다. age를 변경하기 위해 콘솔에 vm.age = 20을 입력하면 페이지가 다시 렌더링되고 "18"이 "20"이 되지만 콘솔에서는 출력되지 않습니다. 한 번 계산됨, 즉 계산된 속성이 다시 계산되지 않습니다. 🎜🎜
🎜 🎜lastName을 변경하면 다시 계산됩니다: 🎜🎜
🎜🎜2 메서드methods🎜
🎜아니요. 두 번째는 우리에게 이미 매우 친숙한 🎜메서드입니다: 메서드🎜: 🎜rrreee🎜저장 후, 효과를 보기 위해 페이지를 새로 고칠 때 계산을 수행합니다. age를 변경하면 다시 계산되고 lastName을 변경하면 한 번도 계산됩니다. 
🎜🎜그래서 🎜 메소드에는 캐싱 메커니즘이 없습니다. 페이지가 다시 렌더링되면 fullName 메서드가 다시 실행됩니다🎜. 🎜🎜3 리스너 watch🎜
🎜리스너 사용 시 코드 중복화는 불가피합니다. 🎜rrreee 🎜저장 후 복귀 페이지로 이동하여 새로고침하세요. 처음 페이지에 진입할 때 fullName을 재정의했기 때문에 watch가 계산 없이 표시됩니다. fullName과 관련되지 않은 데이터 age를 수정한 후 watch만 사용하여 firstName와 lastName 이므로 계산되지 않습니다. lastName을 수정하면 계산이 수행됩니다. 🎜🎜🎜🎜🎜🎜요약: 🎜🎜-
methods는 페이지가 렌더링될 때마다 한 번씩 메서드를 실행합니다. -
watch和computed都具备缓存机制，但watch的语法比computed的语法复杂了很多。
methods 会在每次渲染页面都执行一次方法；所以一般情况下，当一个功能通过 watch 、 methods 和 computed 方法都可以实现时，首推“计算属性 computedwatch 및 computed에는 모두 캐싱 메커니즘이 있지만 watch의 구문은 computed의 구문보다 훨씬 더 복잡합니다. 일반적으로 함수가 watch, methods 및 computed 메서드를 전달하면 구현할 때 첫 번째 권장 사항은 "계산된 속성 계산"입니다.
(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상
)🎜위 내용은 Vue의 계산된 속성, 메서드 및 리스너에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7442
15
1371
52
76
11
38
19
9
6
PHP와 Vue: 프런트엔드 개발 도구의 완벽한 조합
Mar 16, 2024 pm 12:09 PM
PHP와 Vue: 프론트엔드 개발 도구의 완벽한 조합 오늘날 인터넷이 빠르게 발전하는 시대에 프론트엔드 개발은 점점 더 중요해지고 있습니다. 사용자가 웹 사이트 및 애플리케이션 경험에 대한 요구 사항이 점점 더 높아짐에 따라 프런트 엔드 개발자는 보다 효율적이고 유연한 도구를 사용하여 반응형 및 대화형 인터페이스를 만들어야 합니다. 프론트엔드 개발 분야의 두 가지 중요한 기술인 PHP와 Vue.js는 함께 사용하면 완벽한 도구라고 볼 수 있습니다. 이 기사에서는 독자가 이 두 가지를 더 잘 이해하고 적용할 수 있도록 PHP와 Vue의 조합과 자세한 코드 예제를 살펴보겠습니다.
프론트엔드 면접관이 자주 묻는 질문
Mar 19, 2024 pm 02:24 PM
프론트엔드 개발 인터뷰에서 일반적인 질문은 HTML/CSS 기초, JavaScript 기초, 프레임워크 및 라이브러리, 프로젝트 경험, 알고리즘 및 데이터 구조, 성능 최적화, 크로스 도메인 요청, 프론트엔드 엔지니어링, 디자인 패턴, 새로운 기술 및 트렌드. 면접관 질문은 후보자의 기술적 능력, 프로젝트 경험, 업계 동향에 대한 이해를 평가하기 위해 고안되었습니다. 따라서 지원자는 자신의 능력과 전문성을 입증할 수 있도록 해당 분야에 대한 충분한 준비를 갖추어야 합니다.
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
Django는 프론트엔드인가요, 백엔드인가요? 확인 해봐!
Jan 19, 2024 am 08:37 AM
Django는 빠른 개발과 깔끔한 방법을 강조하는 Python으로 작성된 웹 애플리케이션 프레임워크입니다. Django는 웹 프레임워크이지만 Django가 프런트엔드인지 백엔드인지에 대한 질문에 답하려면 프런트엔드와 백엔드의 개념에 대한 깊은 이해가 필요합니다. 프론트엔드는 사용자가 직접 상호작용하는 인터페이스를 의미하고, 백엔드는 HTTP 프로토콜을 통해 데이터와 상호작용하는 서버측 프로그램을 의미합니다. 프론트엔드와 백엔드가 분리되면 프론트엔드와 백엔드 프로그램을 독립적으로 개발하여 각각 비즈니스 로직과 인터랙티브 효과, 데이터 교환을 구현할 수 있습니다.
JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법
Jan 05, 2024 pm 01:37 PM
JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가
Go 언어 프런트엔드 기술 탐색: 프런트엔드 개발을 위한 새로운 비전
Mar 28, 2024 pm 01:06 PM
빠르고 효율적인 프로그래밍 언어인 Go 언어는 백엔드 개발 분야에서 널리 사용됩니다. 그러나 Go 언어를 프런트엔드 개발과 연관시키는 사람은 거의 없습니다. 실제로 프런트엔드 개발에 Go 언어를 사용하면 효율성이 향상될 뿐만 아니라 개발자에게 새로운 지평을 열어줄 수도 있습니다. 이 기사에서는 프런트엔드 개발에 Go 언어를 사용할 수 있는 가능성을 살펴보고 독자가 이 영역을 더 잘 이해할 수 있도록 구체적인 코드 예제를 제공합니다. 전통적인 프런트엔드 개발에서는 사용자 인터페이스를 구축하기 위해 JavaScript, HTML, CSS를 사용하는 경우가 많습니다.
Golang과 프런트엔드 기술의 결합: Golang이 프런트엔드 분야에서 어떤 역할을 하는지 살펴보세요.
Mar 19, 2024 pm 06:15 PM
Golang과 프런트엔드 기술의 결합: Golang이 프런트엔드 분야에서 어떤 역할을 하는지 살펴보려면 구체적인 코드 예제가 필요합니다. 인터넷과 모바일 애플리케이션의 급속한 발전으로 인해 프런트엔드 기술이 점점 더 중요해지고 있습니다. 이 분야에서는 강력한 백엔드 프로그래밍 언어인 Golang도 중요한 역할을 할 수 있습니다. 이 기사에서는 Golang이 프런트엔드 기술과 어떻게 결합되는지 살펴보고 특정 코드 예제를 통해 프런트엔드 분야에서의 잠재력을 보여줍니다. 프론트엔드 분야에서 Golang의 역할은 효율적이고 간결하며 배우기 쉬운 것입니다.
프런트엔드 모듈형 ESM이란 무엇입니까?
Feb 25, 2024 am 11:48 AM
프론트엔드 ESM이란 무엇입니까? 프론트엔드 개발에서 ESM은 ECMAScript 사양을 기반으로 한 모듈식 개발 방법인 ECMAScriptModules를 참조합니다. ESM은 더 나은 코드 구성, 모듈 간 격리, 재사용성과 같은 많은 이점을 제공합니다. 이 기사에서는 ESM의 기본 개념과 사용법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. ESM의 기본 개념 ESM에서는 코드를 여러 모듈로 나눌 수 있으며 각 모듈은 다른 모듈에 대한 일부 인터페이스를 노출합니다.
