Table des matières
La différence entre les calculs et les méthodes
Deux, regarder les propriétés de surveillance
La différence entre montre et calcul
1. propriété calculée
Nous espérons qu'une variable pourra être utilisée lorsqu'une variable est calculée puis sortie au lieu d'être directement sortie. Les propriétés calculées sont mises en cache en fonction de leurs dépendances réactives. Ils ne sont réévalués que lorsque les dépendances réactives pertinentes changent. Chaque appel à la fonction entraînera la réexécution de la fonction.
Une propriété calculée est une toute nouvelle propriété qui est calculée ou renvoyée après le traitement des propriétés existantes de l'instance de Vue , donc une propriété calculée est une propriété que nous pouvons utiliser directement dans la syntaxe d'interpolation.
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<!-- 直接使用插值语法读取计算属性 -->
{
{total}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0,
// 计算属性不能写在这里
// total:0
},
computed:{
// 重新返回属性 主要是处理data中需要计算/处理的属性
// 1.计算属性完整写法
// total:{
// // get作用：当有人读取total时，get就会被调用，且返回值就作为total的值
// // get什么时候调用？1.初次读取total时 2.所依赖的数据发生改变时(即a或b发生改变时)
// get(){
// console.log('get被调用');
// return this.a + this.b
// },
// // set什么时候调用？当total被修改时
// set(value){
// console.log('set',value);
// }
// }
//--------------------------------------------------
// 2.计算属性简写形式(只考虑读取get，不考虑修改set时才能简写)
total(){
console.log('这是computed');
return this.a + this.b
}
},
})
</script>
</body>
La différence entre les calculs et les méthodes
Les propriétés calculées ont un cache de dépendance, et si la valeur ne change pas, la propriété calculée ne sera pas appelée à nouveau ; les méthodes n'ont pas de cache et seront ré-exécutées/rendues à chaque fois qu'elles sont appelées.
<body>
<div id="app">
{
{total}}
{
{total}}
{
{total}}
{
{str()}}
{
{str()}}
{
{str()}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0
},
computed:{
total(){
console.log('这是computed');
return this.a + this.b
}
},
methods:{
str(){
console.log('这是methods');
}
}
})
</script>
</body>
Deux, regarder les propriétés de surveillance
La propriété listener est aussi appelée listener/listener
L'utilisation d'écouteurs est particulièrement utile lorsque vous devez effectuer des opérations asynchrones ou coûteuses lorsque les données changent.
Bien que les propriétés calculées soient plus appropriées dans la plupart des cas, un écouteur personnalisé est parfois requis. C'est pourquoi Vue fournit un moyen plus général de répondre aux changements de données via l'option de surveillance. Cette approche est particulièrement utile lorsque vous devez effectuer des opérations asynchrones ou coûteuses sur les modifications de données.
L'attribut de surveillance est utilisé pour surveiller l'attribut existant. Lorsque l'attribut de surveillance change, la fonction de rappel est automatiquement appelée pour effectuer les opérations associées.
Il existe deux manières d'écrire des attributs de surveillance :
(1) Écrivez dans l'élément de configuration watch de l'instance Vue
(2) Surveillance via vm.$watch()
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
{
{total}}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
a: 0,
b: 0,
total: 0
},
watch: {
// 我们需要监听a和b属性 (也可以监听计算属性)
//1.完整写法
// a: {
// // handler是固定配置
// // handler什么时候调用？当a发生改变时调用
// // handler有两个参数，一个是修改后的值，一个是修改前的值
// handler(newValue, oldValue) {
// console.log('a被修改了', newValue, oldValue);
// this.total = this.a + this.b
// },
// // 其他配置项
// immediate: true //初始化时让handler调用一下
// }
//-------------------------------------------
// 2.简写
a(newVal, oldVal) {
console.log(newVal,oldVal,'这是监听器');
this.total = this.a + this.b
},
b() {
this.total = this.a + this.b
}
},
})
// 3.也可以使用vm.$watch(需要监听的属性,{配置项})实现监听
// vm.$watch('a',{
// handler(newValue,oldValue){
// console.log('a被修改了',newValue,oldValue);
// }
// })
</script>
</body>
surveillance approfondie
La montre dans Vue ne surveille pas le changement de la valeur interne de l'objet par défaut. Nous pouvons réaliser une surveillance approfondie en configurant deep:true.
<body>
<div id="app">
<input type="number" v-model="a">
<input type="number" v-model="b">
<input type="text" v-model="obj.name">
</div>
<script>
new Vue({
el: "#app",
data: {
a: 0,
b: 0,
total: 0,
obj: {
name: "zhangsan",
age: 12
}
},
watch: {
// 监听基本数据类型
a() {
console.log('a被改变了');
},
b: {
handler() {
console.log('b被改变了');
}
},
// 监听引用数据类型
obj: {
// 浅监听
handler(newValue, oldValue) {
console.log(newValue.name, oldValue.name);
},
// 递归监听 深度监听
deep: true
}
},
})
</script>
</body>La différence entre montre et calcul
calculé
1. Avec la capacité de mise en cache, la valeur de re-rendu de la page ne change pas et la propriété calculée renverra immédiatement le résultat du calcul précédent sans avoir à exécuter à nouveau la fonction
2. La propriété calculée calcule le changement d'une certaine propriété. Si une certaine valeur change, la propriété calculée surveillera et retournera
montre
1. Surveiller les changements de valeur et exécuter des opérations asynchrones (requête axios)
2. Pas de mise en cache, exécution/réponse uniquement lorsque la valeur actuelle change