Table of contents
The property in the object listens:
Official website address: Computed properties and listeners - Vue.js (vuejs.org)
Computed property computed
- The method name can be used directly in the object. This property is calculated by
- Any property change in this method will trigger this method
Usage scenario: I want to put some calculation business logic in the method, such as: full name calculation, address calculation, shopping cart total
Name example:
In this example, there are methods and computed properties.
It is recommended to use computed properties. There is a caching mechanism, and when the page is repeatedly called multiple times, it is only executed once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<form>
姓：<input type="text" v-model="firstName">
名：<input type="text" v-model="lastName"><br>
方法只读实现：<input type="text" v-model="getFullName()"><br>
计算属性只读实现：<input type="text" v-model="fullName"><br><!--计算属性直接使用不用带括号-->
计算属性读写实现：<input type="text" v-model="funName"><!--计算属性直接使用不用带括号-->
</form>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
firstName:'史蒂芬',
lastName:'库里',
}
},
methods:{
//只读方式-方法中
getFullName(){
return this.firstName+"-"+this.lastName;
},
},
computed:{
//只读方式-计算属性中
fullName(){
return this.firstName+"-"+this.lastName;
},
//读写方式
funName:{
get(){
return this.firstName+"-"+this.lastName;
},
set(value){
this.firstName=value.split("-")[0];
this.lastName=value.split("-")[1];
}
},
},
});
</script>
</html>Browser implementation:
Sex and name input:
If the surname and first name are changed, they will be changed together later.
Read-only input:
The read-only implementation and others will not be changed together, and there will be cases where the browser reports an error
Read and write input:
Read and write implementations can also be changed along with others, but computing attributes are generally only read-only, and reading and writing are not used much
listener attribute watch
- When the monitored property changes, the callback function is called to perform related operations
- Listen attribute must exist for listening
Usage scenario: This method is most useful when asynchronous or expensive operations need to be performed when data changes, for example: data operations before and after modification, name modification
Exercise example:
This example does not require HTML code demonstration, but the HTML code needs to write a div box to bind el, otherwise the browser will report an error
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
isSunny:true,
person:{
name:"小明",
age:18
}
}
},
watch:{
//表示要对isSunny这个属性进行侦听
isSunny(newVal,oldVal){
console.log("改变了","修改前的数据：",oldVal,"修改后的数据：",newVal);
},
//深度侦听可以用来监听整个对象的改变，但要慎重使用，因为消耗性能
person:{
immediate:true, //开启初始化调用
deep:true, //开启深度侦听
handler(newVal,oldVal){
console.log("改变了","修改前的数据：",oldVal,"修改后的数据：",newVal);
}
},
// 侦听复杂数据的某个属性，这也是一种简写方式
"person.name"(newVal,oldVal){
console.log("改变了","修改前的数据：",oldVal,"修改后的数据：",newVal);
}
}
});
</script>Browser implementation:
Property listener:
The most commonly used type of interception, you can get the data before and after modification
Object listens:
immediate initialization attribute: the web page refresh automatically executes this monitoring once.
deep deep listening attribute: used to listen to the change of the entire object, without this attribute, the object cannot be listened to.
But use it with caution, because it consumes too much performance; and the object before modification is the same as the object after modification, it should be a bug and it may be fixed in a future Vue version.
The property in the object listens:
If you want to listen to the object, it is recommended to use this method;
Because name is the data in the person object, object listening is also executed
