标签：vue Vue 计算 var fullName 监听 属性
一、计算属性
1、什么是计算属性--computed
计算属性是Vue中的⼀种特殊属性，⽤于对已有的数据进⾏计算和衍⽣，以⽣
成新的数据。计算属性的值是根据依赖的数据动态计算得出的，当依赖的数据
发⽣变化时，计算属性会⾃动重新计算。
2、计算属性的作用
计算属性的主要作⽤是对数据进⾏处理和转换，以便在模板中进⾏展示或其他逻辑
操作。相⽐于在模板中直接使⽤⽅法来处理数据，计算属性具有以下优势：
缓存结果： 计算属性的值会被缓存起来，只有在依赖的数据发⽣变化时才会重
新计算。这样可以避免不必要的重复计算，提⾼性能。
响应式更新： 计算属性会⾃动追踪依赖的数据，当依赖的数据发⽣变化时，计
算属性会⾃动重新计算，保持数据的实时性。
简化模板逻辑： 通过使⽤计算属性，可以将复杂的逻辑处理和转换操作放在计
算属性中，简化模板中的代码，使模板更加清晰和易读
3、计算属性的定义方式
· 基础定义方式
computed: {
// 计算属性的名称
propertyName: function() {
// 计算属性的逻辑处理
// 返回计算结果
return result;
}
}
· 默认只有getter计算属性
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {},
computed: { // 计算属性； 特点：当计算属性中所以来的任何⼀个 data 属性改变之
后，都会重新触发 本计算属性 的重新计算，从⽽更新 fullName 的值
fullName() {
return this.firstName + ' - ' + this.lastName;
}
}
});
</script>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<!-- 点击按钮重新为 计算属性 fullName 赋值 -->
<input type="button" value="修改fullName" @click="changeName">
<span>{{fullName}}</span>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {
changeName() {
this.fullName = 'TOM - chen2';
}
},
computed: {
fullName: {
get: function () {
return this.firstName + ' - ' + this.lastName;
},
set: function (newVal) {
var parts = newVal.split(' - ');
this.firstName = parts[0];
this.lastName = parts[1];
}
}
}
});
</script>
4、通过计算属性实现名字首字母大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name">--》》{{newName}}
<hr>
<input type="text" v-model="name1">---》{{name1}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
name1: ''
},
methods: {
// 普通函数形式
handleToUpper() {
console.log('函数我执行了')
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
},
computed:{
newName(){
console.log('计算属性我执行了')
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
}
})
</script>
</html>
5、计算属性写过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>过滤案例</h1>
<input type="text" v-model="myText">
<hr>
<ul>
<li v-for="item in newdataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'],
},
computed:{
newdataList(){
return this.dataList.filter(item=> item.indexOf(this.myText) >= 0)
}
}
})
</script>
</html>
二、监听属性
1、什么是监听属性---watch
监听属性是Vue中的⼀种特殊属性，⽤于监测数据的变化并触发相应的回调函
数。通过监听属性，我们可以在数据发⽣改变时执⾏⼀些额外的逻辑操作。
2、监听属性的作用
监听属性的作⽤是在数据发⽣变化时，执⾏⼀些副作⽤操作或触发其他的逻辑。它可以⽤于响应数据的变化并进⾏相应的处理，⽐如数据的验证、异步操作、触发其他组件的更新等。
3、监听属性的定义方式
在watch对象中，可以定义多个属性的监听器，每个属性对应⼀个回调函数。当被监听的属性发⽣变化时，Vue会⾃动调⽤对应的回调函数，并传递新值和旧值作为参数。
// 被监听的属性名
propertyName: function(newVal, oldVal) {
// 在属性变化时执⾏的逻辑操作
}
}
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen',
fullName: 'jack - chen'
},
methods: {},
watch: {
'firstName': function (newVal, oldVal) { // 第⼀个参数是新数据，第⼆个参
数是旧数据
this.fullName = newVal + ' - ' + this.lastName;
},
'lastName': function (newVal, oldVal) {
this.fullName = this.firstName + ' - ' + newVal;
}
}
});
</script>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = Vue.extend({
template: '<h1>登录组件</h1>'
});
var register = Vue.extend({
template: '<h1>注册组件</h1>'
});
var router = new VueRouter({
routes: [
{ path: "/login", component: login },
{ path: "/register", component: register }
]
});
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router,
watch: {
'$route': function (newVal, oldVal) {
if (newVal.path === '/login') {
console.log('这是登录组件');
}
}
}
});
</script>
三、计算属性和监听属性的区别
computed属性的结果会被缓存，除⾮依赖的响应式属性变化才会重新计算。主要当作属性来使⽤,使⽤的时候不加（）；
methods⽅法表示⼀个具体的操作，主要书写业务逻辑；
watch⼀个对象，键是需要观察的表达式，值是对应回调函数。主要⽤来监听某些特定数据的变化，从⽽进⾏某些具体的业务逻辑操作；可以看作是computed和methods的结合体
总结来说，计算属性⽤于对已有的数据进⾏处理和转换，⽣成新的数据；⽽监听属性⽤于监测数据的变化并执⾏相应的副作⽤操作。它们在Vue开发中都有各⾃的应⽤场景，根据实际需求选择使⽤。
标签：vue,
Vue,
计算,
var,
fullName,
监听,
属性
From： https://www.cnblogs.com/queryH/p/18164435