目录
一、Vue3的计算属性
1. 插值语法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插值语法</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 阅读性不好，维护不方便 -->
<h2>{{firstName + " " + lastName}}</h2>
<h2>{{score >= 60 ? '及格': '不及格'}}</h2>
<h2>{{message.split(" ").reverse().join(" ")}}</h2>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
firstName: "Kobe",
lastName: "Bryant",
score: 80,
message: "Hello world"
}
},
methods: {
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
2. 调用methods方法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>调用methods方法</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 阅读性不好，维护不方便 -->
<h2>{{firstName + " " + lastName}}</h2>
<h2>{{score >= 60 ? '及格': '不及格'}}</h2>
<h2>{{message.split(" ").reverse().join(" ")}}</h2>
<!-- 调用methods方法,methods无缓存，多次调用会浪费性能 -->
<h2>{{getFullName()}}</h2>
<h2>{{getResult()}}</h2>
<h2>{{getReverseMessage()}}</h2>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
firstName: "Kobe",
lastName: "Bryant",
score: 80,
message: "Hello world"
}
},
methods: {
getFullName() {
return this.firstName + " " + this.lastName;
},
getResult() {
return this.score >= 60 ? '及格': '不及格';
},
getReverseMessage() {
return this.message.split(" ").reverse().join(" ")
}
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
3. 调用computed方法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>调用computed方法</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 阅读性不好，维护不方便 -->
<h2>{{firstName + " " + lastName}}</h2>
<h2>{{score >= 60 ? '及格': '不及格'}}</h2>
<h2>{{message.split(" ").reverse().join(" ")}}</h2>
<h2>{{fullName}}</h2>
<h2>{{result}}</h2>
<h2>{{reverseMessage}}</h2>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
firstName: "Kobe",
lastName: "Bryant",
score: 80,
message: "Hello world"
}
},
methods: {
// methods无缓存，多次调用会执行多次
},
computed: {
// 定义计算属性，计算属性有缓存，多次调用只会执行一次
fullName() {
return this.firstName + " " + this.lastName;
},
result() {
return this.score >= 60 ? '及格': '不及格';
},
reverseMessage() {
return this.message.split(" ").reverse().join(" ");
}
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
4. methods和computed的区别
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>methods和computed的区别</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<button @click="ChengeFirstName">修改</button>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
firstName: "Kobe",
lastName: "Bryant",
score: 80,
message: "Hello world"
}
},
methods: {
// methods无缓存，多次调用会执行多次
getFullName() {
console.log("methods")
return this.firstName + " " + this.lastName;
},
ChengeFirstName() {
this.firstName = 'test'
}
},
computed: {
// 定义计算属性，计算属性有缓存，多次调用只会执行一次
// 数据发生改变的时候还是会再次执行一次
fullName() {
console.log("computed")
return this.firstName + " " + this.lastName;
}
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
5. computed的setter和getter
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>computed的setter和getter</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<button @click="changeFulltName">修改数据</button>
<h2>{{fullName}}</h2>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
firstName: "Kobe",
lastName: "Bryant",
score: 80,
message: "Hello world"
}
},
methods: {
changeFulltName() {
this.fullName = 'kang rui';
}
},
computed: {
fullName: {
get: function() {
return this.firstName + " " + this.lastName;
},
set: function(newValue) {
console.log(newValue);
const names = newValue.split(" ").reverse();
this.firstName = names[0];
this.lastName = names[1];
}
}
}
}
const app = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
本文作者:ruiwiki
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
目录
