Tabla de contenido
La propiedad en el objeto escucha:
Dirección del sitio web oficial: Propiedades calculadas y oyentes: Vue.js (vuejs.org)
propiedad calculada calculada
- El nombre del método se puede utilizar directamente en el objeto. Esta propiedad se calcula mediante
- Cualquier cambio de propiedad en este método activará este método.
Escenario de uso
Ejemplo de nombre:
En este ejemplo, hay métodos y propiedades calculadas.
Se recomienda utilizar propiedades calculadas. Existe un mecanismo de almacenamiento en caché, y cuando la página se llama repetidamente varias veces, solo se ejecuta una vez.
<!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>Implementación del navegador:
Entrada de sexo y nombre:
Si se cambian el apellido y el nombre, se cambiarán juntos más adelante.
Entrada de solo lectura:
La implementación de solo lectura y otras no se cambiarán juntas y habrá casos en los que el navegador informará un error.
Leer y escribir entradas:
Las implementaciones de lectura y escritura también se pueden cambiar junto con otras, pero los atributos informáticos generalmente son solo de lectura y la lectura y la escritura no se usan mucho.
atributo de oyente mirar
- Cuando la propiedad monitoreada cambia, se llama a la función de devolución de llamada para realizar operaciones relacionadas
- El atributo de escucha debe existir para escuchar
Escenario de uso: este método es más útil cuando es necesario realizar operaciones asincrónicas o costosas cuando los datos cambian, por ejemplo: operaciones de datos antes y después de la modificación, modificación de nombre.
Ejemplo de ejercicio:
Este ejemplo no requiere demostración del código HTML, pero el código HTML debe escribir un cuadro div para vincular el; de lo contrario, el navegador informará un 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>Implementación del navegador:
Oyente de propiedad:
El tipo de interceptación más utilizado, puede obtener los datos antes y después de la modificación.
El objeto escucha:
atributo de inicialización inmediata: la actualización de la página web ejecuta automáticamente este monitoreo una vez.
Atributo de escucha profunda: se utiliza para escuchar el cambio de todo el objeto. Sin este atributo, el objeto no se puede escuchar.
Pero utilícelo con precaución, porque consume demasiado rendimiento; y el objeto antes de la modificación es el mismo que el objeto después de la modificación, debería ser un error y puede solucionarse en una versión futura de Vue.
La propiedad en el objeto escucha:
Si desea escuchar el objeto, se recomienda utilizar este método;
Dado que el nombre son los datos del objeto persona, también se ejecuta la escucha del objeto.
