이 글은 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는 페이지가 렌더링될 때마다 한 번씩 메서드를 실행합니다.
methods 会在每次渲染页面都执行一次方法；-
watch 和 computed 都具备缓存机制，但 watch 的语法比 computed 的语法复杂了很多。
所以一般情况下，当一个功能通过 watch 、 methods 和 computed 方法都可以实现时，首推“计算属性 computedwatch 및 computed에는 모두 캐싱 메커니즘이 있지만 watch의 구문은 computed의 구문보다 훨씬 더 복잡합니다. 일반적으로 함수가 watch, methods 및 computed 메서드를 전달하면 구현할 때 첫 번째 권장 사항은 "계산된 속성 계산"입니다.
(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상
)🎜
위 내용은 Vue의 계산된 속성, 메서드 및 리스너에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
