Inhaltsverzeichnis
4. Vergleich von Eigenschaften und Methoden
1. Berechnete Eigenschaften
1. Grundlegende Verwendung
Jetzt gibt es noch die Variablen Nachname und Vorname, um den vollständigen Namen zu erhalten.
<div id="app">
<h2>您的firstname:{
{firstName}}</h2>
<h2>您的lastname:{
{lastName}}</h2>
<h2>您的fullname是从计算属性中得到:{
{fullName}}</h2>
<h2>您的fullname是从方法中得到:{
{getFullName()}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#app',
data(){
return{
firstName:'zhang',
lastName:'san'
}
},
methods: {
getFullName(){
return this.firstName + this.lastName
}
},
computed:{//计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
fullName(){
return this.firstName + this.lastName
}
}
})
</script>Spleißen mit Mastache-Syntax
<h2>{ {firstName}}{ {lastName}}</h2>Wie man Methoden verwendet
<h2>{ {getFullName()}}</h2>Unter Verwendung der berechneten Eigenschaft berechnet
<h2>{ {fullName}}</h2>
Im Beispiel sieht das berechnete Attribut genauso aus wie die Methode, außer dass Methodenaufrufe () verwenden müssen, während berechnete Attribute dies nicht tun. Der Name der Methode ist im Allgemeinen ein Verb und der Name des berechneten Attributs ist ein Substantiv , aber das ist nur eine grundlegende Verwendung.
2. Komplizierte Verwendung
Jetzt gibt es ein Array von Datenbüchern, das viele Buchobjekte enthält. Die Datenstruktur ist wie folgt:
Bücher:[
{id:110,name:"JavaScript von Eintrag zu Eintrag",Preis:119},
{id:111,name:"Java von Eintrag zu Eintrag",Preis:80},
{id:112,name: „The Art of Coding“,Preis:99},
{id:113,name:“Code Encyclopedia“,Preis:150},
]
Es ist erforderlich, den Gesamtpreis aller Bücher zu berechnen totalPrice.
<div id="app">
<h2>您的总价:{
{totalPrice}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
books: [{
id: 110,
name: "JavaScript从入门到入土",
price: 119
},
{
id: 111,
name: "Java从入门到放弃",
price: 80
},
{
id: 112,
name: "编码艺术",
price: 99
},
{
id: 113,
name: "代码大全",
price: 150
},
]
}
},
computed: {
/* totalPrice() {
let total = 0
for (let i = 0; i < this.books.length; i++) {
total += this.books[i].price
}
return total
} */
/* totalPrice() {
let total = 0
for (let index in this.books) {
total += this.books[index].price
}
return total
} */
/* totalPrice() {
let total = 0;
for(let item of this.books){
total += item.price
}
return total
} */
/* totalPrice() {
let total = 0;
this.books.forEach(item=>{
total += item.price
})
return total
} */
/* map */
/* totalPrice() {
let total = 0;
this.books.map(item=>{
total += item.price
})
return total
} */
/* filter */
/* totalPrice() {
let total = 0;
this.books.filter(item=>{
total += item.price
})
return total
} */
/* reduce */
/* totalPrice() {
return this.books.reduce((total,item)=>{
return total + item.price
},0)
} */
/* totalPrice() {
return this.books.reduce((total,item)=>total + item.price,0)
} */
/* some */
totalPrice() {
let total = 0;
this.books.some(item=>{
total += item.price
})
return total
}
}
})
</script> Ermitteln Sie die Preisakkumulation für jedes Buchobjekt. Wenn sich der Preis eines der Bücher ändert, ändert sich der Gesamtpreis entsprechend.
3.Getter und Setter
In der berechneten Eigenschaft gibt es tatsächlich zwei Methoden, Setter und Getter.
Berechnete Eigenschaften haben jedoch im Allgemeinen keine Set-Methode, schreibgeschützte Eigenschaften haben nur eine Get-Methode, aber im obigen Fall ist newValue ein neuer Wert. Sie können den Wert auch mit der Set-Methode festlegen, im Allgemeinen jedoch nicht.
<div id="app">
<input type="text" v-model="firstName"/><br>
<input type="text" v-model="lastName"/><br>
<input type="text" v-model="fullName"/>
<!-- v-model实现数据的双向绑定 -->
<!-- 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就
是value值。 -->
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
firstName: 'zhang',
lastName: 'san'
}
},
computed: { //计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
/* fullName(){
return this.firstName + this.lastName
} */
fullName: {
get: function() {
return this.firstName +','+ this.lastName
},
set:function(val){
var list = val.split(',')
console.log(list);
this.firstName = list[0]
this.lastName = list[1]
}
}
}
})
</script> 
Auf diese Weise können wir den mit der berechneten Eigenschaft verknüpften Eigenschaftswert ändern und gleichzeitig den Wert der berechneten Eigenschaft ändern.
4. Vergleich von Eigenschaften und Methoden
<div id="app">
<h2>您的fullname是从计算属性中得到:{
{fullName}}</h2>
<h2>您的fullname是从计算属性中得到:{
{fullName}}</h2>
<h2>您的fullname是从计算属性中得到:{
{fullName}}</h2>
<h2>您的fullname是从计算属性中得到:{
{fullName}}</h2>
<h2>您的fullname是从方法中得到:{
{getFullName()}}</h2>
<h2>您的fullname是从方法中得到:{
{getFullName()}}</h2>
<h2>您的fullname是从方法中得到:{
{getFullName()}}</h2>
<h2>您的fullname是从方法中得到:{
{getFullName()}}</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
firstName:'zhang',
lastName:'san'
}
},
methods:{
getFullName(){
console.log('这里调用了方法getFullName');
return this.firstName + this.lastName
}
},
computed:{//计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
fullName(){
console.log('这里调用了计算属性fullName');
return this.firstName + this.lastName
}
}
})
/* 总结:计算属性的性能是优于方法的 因为计算属性是具有缓存特性的 */
</script>
Es ist ersichtlich, dass das berechnete Attribut über einen Cache verfügt. Bei
this.firstName + " " + this.lastNamedemselben Attribut werden Methoden viermal aufgerufen, während berechnete Attribute nur einmal aufgerufen werden. Die Leistung berechneter Attribute ist offensichtlich besser als die von Methoden. Und im Falle einer Änderung von „firstName“ wird die berechnete Eigenschaft nur einmal aufgerufen, und die Methoden müssen immer noch viermal aufgerufen werden.
Zweitens, der Zuhörer
1. Verwendung der Uhr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue计算属性/侦听器/方法比较</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>计算属性：computed</h1>
{
{fullName}}
<h1>方法：methods</h1>
{
{fullName2()}}
<h1>侦听器：watch</h1>
{
{watchFullName}}
<h1>年龄</h1>
{
{age}}
</div>
<script>
var other = 'This is other';
var app = new Vue({
el:"#app",
data:{
firstName:"zhang",
lastName:"san",
watchFullName:"zhangsan",
age:18,
},
watch: {
firstName:function(newFirstName, oldFirstName){
console.log("firstName触发了watch,newFirstName="+newFirstName+",oldFirstName="+oldFirstName)
this.watchFullName = this.firstName+this.lastName+","+other
},
lastName:function(newLastName, oldLastName){
console.log("lastName触发了watch,newLastName="+newLastName+",oldLastName="+oldLastName)
this.watchFullName = this.firstName+this.lastName+","+other
}
},
computed: {
fullName:function(){
console.log("调用了fullName,计算了一次属性")
return this.firstName+this.lastName+","+other;
}
},
methods: {
fullName2:function(){
console.log("调用了fullName,执行了一次方法")
fullName2 = this.firstName+this.lastName+","+other;
return fullName2;
}
}
});
</script>
</body>
</html>Initialisierung:
Ändern Sie Vorname/Nachname/beide
Ändern Sie das nicht berechnete Alter
Ändern Sie Objekte außerhalb der Vue-Instanz
Nachdem Sie das Objekt außerhalb der Vue-Instanz geändert haben, ändern Sie das Objekt innerhalb der Vue-Instanz
Testfazit:
- Das Attribut „fullName“ wird mithilfe von „computed“ berechnet und der Wert ist „firstName+lastName“. Recheneigenschaften haben
缓存功能: Wenn sich Vorname und Nachname nicht ändern, wird fullName nicht neu berechnet. Wenn wir beispielsweise den Wert von age ändern, muss der Wert von fullName nicht neu berechnet werden.- Methoden verfügen nicht über Caching-Funktionen. Wenn wir beispielsweise den Wert von age ändern, wird die Methode fullName2() erneut ausgeführt.
- Wenn eine Funktion mit den oben genannten drei Methoden realisiert werden kann, ist es offensichtlich angemessener, eine berechnete Funktion zu verwenden. Der Code ist einfach und verfügt über Caching-Funktionen.
- Der Umfang des berechneten Attributs liegt innerhalb der Vue-Instanz. Durch Ändern des externen Objekts der Vue-Instanz wird das Rendering nicht neu berechnet. Wenn jedoch zuerst das Objekt außerhalb der Vue-Instanz und dann das Objekt des berechneten Vue-Attributs geändert wird, Der Wert des externen Objekts wird ebenfalls neu gerendert.
Berechnete Eigenschaft: berechnet
Der durch den berechneten Attributbereich im vollständigen Namen der Vue-Instanz verwaltete Vorname und Nachname überwacht normalerweise mehrere Variablen 1111
Zuhörer: Schauen Sie zu
Überwachen Sie Datenänderungen. Überwachen Sie im Allgemeinen nur eine Variable oder ein Array
Szenen, die verwendet werden sollen
watch( 异步场景), berechnet( 数据联动) watch kann den Methodennamen direkt in Stringform nach den überwachten Daten hinzufügen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue计算属性/侦听器/方法比较</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>计算属性：computed</h1>
{
{fullName}}
<h1>方法：methods</h1>
{
{fullName2()}}
<h1>侦听器：watch</h1>
{
{watchFullName}}
<h1>年龄</h1>
{
{age}}
</div>
<script>
var other = 'This is other';
var app = new Vue({
el:"#app",
data:{
firstName:"zhang",
lastName:"san",
watchFullName:"zhangsan",
age:18,
},
watch: {
firstName:function(newFirstName, oldFirstName){
console.log("firstName触发了watch,newFirstName="+newFirstName+",oldFirstName="+oldFirstName)
this.watchFullName = this.firstName+this.lastName+","+other
},
lastName:function(newLastName, oldLastName){
console.log("lastName触发了watch,newLastName="+newLastName+",oldLastName="+oldLastName)
this.watchFullName = this.firstName+this.lastName+","+other
},
watchFullName:"change"
},
computed: {
fullName:function(){
console.log("调用了fullName,计算了一次属性")
return this.firstName+this.lastName+","+other;
}
},
methods: {
fullName2:function(){
console.log("调用了fullName,执行了一次方法")
fullName2 = this.firstName+this.lastName+","+other;
return fullName2;
},
change(){
console.log("调用了change,触发了watch")
return this.watchFullName='111'
}
}
});
</script>
</body>
</html>Die Handler-Methode entspricht einem von einem normalen Listener ausgelösten Ereignis. Aus den Ergebnissen können wir ersehen, dass der Listener bei der Initialisierung der Komponente keine Handler-Methode hat, sodass fullName keinen Wert hat.
Wenn Sie den obigen Code ändern, fügen Sie „immediate: true“ hinzu. „immediate: true“ bedeutet, dass die Funktion im Handler nach der Deklaration der Uhr sofort ausgeführt wird. Führen Sie die entsprechende Logik aus. Wenn die Komponente initialisiert wird, löst der Listener sofort die Handler-Methode aus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue计算属性/侦听器/方法比较</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<p>FullName: {
{person.fullname}}</p>
<p>FirstName: <input type="text" v-model="person.firstname"></p>
</div>
</div>
<script>
var other = 'This is other';
var app = new Vue({
el: '#app',
data(){
return {
person: {
firstname: 'Menghui',
lastname: 'Jin',
fullname: ''
}
}
},
watch: {
person: {
handler(n,o){
this.person.fullname = n.firstname + '' + this.person.lastname;
},
immediate: true, //刷新加载 立马触发一次handler
deep: true // 可以深度检测到 person 对象的属性值的变化
}
}
})
</script>
</body>
</html>Bei der Eingabe von Daten in das Eingabefeld kann festgestellt werden, dass sich der Wert von fullName nicht geändert hat. Dies liegt daran, dass Vue die Änderung des internen Eigenschaftswerts des Objekts, beispielsweise die Änderung von person.firstname, nicht erkennen kann
Zu diesem Zeitpunkt müssen Sie also die Tiefenüberwachung (tief) von vue verwenden.
Fügen Sie zu diesem Zeitpunkt den Code deep: true hinzu
Es kann festgestellt werden, dass sich der vollständige Name jedes Mal ändert, wenn sich die Daten des Eingabefelds ändern
Aus dem oben Gesagten kann festgestellt werden, dass der vom Handler überwachte neue Wert mit dem alten Wert übereinstimmt. Dies wird durch das Zögern und die Homologie der Vue2.0-Pits verursacht, die mit der Berechnung repariert werden können
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>FullName: {
{person.fullname}}</p>
<p>FirstName: <input type="text" v-model="person.firstname"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
person: {
firstname: 'Menghui',
lastname: 'Jin',
fullname: ''
}
}
},
methods: {
},
computed: {
person2(){
return JSON.parse(JSON.stringify(this.person));
}//解决深度监听新老值同源问题
},
watch:{
person2:{
handler(n,o){
console.log(this.person);
console.log(n.firstname);
console.log(o.firstname);
/* this.person.fullname = this.person.firstname + this.person.lastname */
},
/* immediate: true, */
deep: true // 可以深度检测到 person 对象的属性值的变化
}
}
})
</script>
</body>
</html>