Tabla de contenido
1_uso de propiedades calculadas calculadas
1.1_El método de procesamiento de datos complejos.
En la plantilla, algunos datos de los datos se pueden mostrar directamente mediante la sintaxis de interpolación, como el siguiente código
<body>
<div id="app">
<!-- 插值语法表达式直接进行拼接 -->
<!-- 1.拼接名字 -->
<h2>{
{ firstName + " " + lastName }}</h2>
<h2>{
{ firstName + " " + lastName }}</h2>
<h2>{
{ firstName + " " + lastName }}</h2>
<!-- 2.显示分数等级 -->
<h2>{
{ score >= 60 ? '及格': '不及格' }}</h2>
<!-- 3.反转单词显示文本 -->
<h2>{
{ message.split(" ").reverse().join(" ") }}</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
// 1.姓名
firstName: "kobe",
lastName: "bryant",
// 2.分数: 及格/不及格
score: 80,
// 3.一串文本: 对文本中的单词进行反转显示
message: "my name is hhh"
}
},
})
// 2.挂载app
app.mount("#app")
</script>
</body>
En algunos casos, es necesario realizar alguna conversión de los datos antes de mostrarlos, o combinar varios datos para mostrarlos;
- Por ejemplo, es necesario realizar operaciones en varios datos, utilizar un operador ternario para determinar el resultado y mostrar los datos después de alguna transformación;
- Es muy conveniente utilizar expresiones en plantillas, pero están diseñadas para operaciones simples;
- Poner demasiada lógica en la plantilla hará que ésta sea pesada y difícil de mantener;
- Y si se usa en varios lugares, habrá mucho código repetido;
¿Una forma de sacar la lógica?
- Una forma es extraer la lógica en un método y ponerla en las opciones de los métodos; sin embargo, este enfoque tiene un inconveniente intuitivo, es decir, todo el proceso de uso de datos se convertirá en una llamada a un método;
<body>
<div id="app">
<!-- 插值语法表达式直接进行拼接 -->
<!-- 1.拼接名字 -->
<h2>{
{ getFullname() }}</h2>
<h2>{
{ getFullname() }}</h2>
<h2>{
{ getFullname() }}</h2>
<!-- 2.显示分数等级 -->
<h2>{
{ getScoreLevel() }}</h2>
<!-- 3.反转单词显示文本 -->
<h2>{
{ reverseMessage() }}</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
// 1.姓名
firstName: "kobe",
lastName: "bryant",
// 2.分数: 及格/不及格
score: 80,
// 3.一串文本: 对文本中的单词进行反转显示
message: "my name is hhh"
}
},
methods: {
getFullname() {
return this.firstName + " " + this.lastName
},
getScoreLevel() {
return this.score >= 60 ? "及格": "不及格"
},
reverseMessage() {
return this.message.split(" ").reverse().join(" ")
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
- Otra forma es utilizar la propiedad calculada calculada;
1.2_ Atributo calculado calculado
¿Como entender?
- El funcionario no dio una explicación conceptual directa;
- En su lugar, debería utilizar propiedades calculadas para cualquier lógica compleja que incluya datos reactivos;
- Las propiedades calculadas se mezclarán en la instancia del componente: este contexto de todos los captadores y definidores se vincula automáticamente a la instancia del componente;
Uso de propiedad calculado:
- opción: calculado
- Ejemplo: { [clave: cadena]: Función | {obtener: Función, establecer: Función } }
Según el código de 1.1, utilice el atributo calculado
<body>
<div id="app">
<!-- 1.拼接名字 -->
<h2>{
{ fullname }}</h2>
<h2>{
{ fullname }}</h2>
<h2>{
{ fullname }}</h2>
<!-- 2.显示分数等级 -->
<h2>{
{ scoreLevel }}</h2>
<!-- 3.反转单词显示文本 -->
<h2>{
{ reverseMessage }}</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
// 1.姓名
firstName: "kobe",
lastName: "bryant",
// 2.分数: 及格/不及格
score: 80,
// 3.一串文本: 对文本中的单词进行反转显示
message: "my name is hhh"
}
},
computed: {
// 1.计算属性默认对应的是一个函数
fullname() {
return this.firstName + " " + this.lastName
},
scoreLevel() {
return this.score >= 60 ? "及格": "不及格"
},
reverseMessage() {
return this.message.split(" ").reverse().join(" ")
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
1.3_ Propiedades calculadas frente a métodos
Aunque los códigos de implementación de las propiedades y métodos calculados parecen tener poca diferencia, las propiedades calculadas se almacenan en caché.
Las propiedades calculadas se almacenan en caché según sus dependencias;
- Cuando los datos no cambian, no es necesario volver a calcular el atributo calculado, pero el método se llama una vez y se calcula una vez, por el contrario, consume rendimiento.
- Sin embargo, si los datos dependientes cambian, la propiedad calculada aún se volverá a calcular cuando se use;
Por lo tanto, se recomienda utilizar la propiedad calculada primero
1.4_ Establecedores y captadores de propiedades calculadas (comprender)
En la mayoría de los casos, una propiedad calculada solo necesita un método getter, por lo que la propiedad calculada se escribe directamente como una función.
<body>
<div id="app">
<h2>{
{ fullname }}</h2>
<button @click="setFullname">设置fullname</button>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
firstname: "coder",
lastname: "hhh"
}
},
computed: {
// 语法糖的写法
// fullname() {
// return this.firstname + " " + this.lastname
// },
// 完整的写法:
fullname: {
get: function() {
return this.firstname + " " + this.lastname
},
set: function(value) {
const names = value.split(" ")
this.firstname = names[0]
this.lastname = names[1]
}
}
},
methods: {
setFullname() {
this.fullname = "kobe bryant"
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
2_ reloj del oyente
2.1_Conocimiento
¿oyente?
- Durante el desarrollo, los datos se definen en el objeto devuelto por los datos y estos datos se vinculan a la plantilla mediante sintaxis de interpolación, etc.;
- Cuando los datos cambien, la plantilla se actualizará automáticamente para mostrar los datos más recientes;
- Pero en algunos casos, desea monitorear el cambio de ciertos datos en la lógica del código, entonces necesita que el oyente observe para completar;
El uso del oyente es el siguiente:
- opción: ver
- Ejemplo:{ [clave: cadena]: cadena | Función | Objeto | Formación}
caso:
- Por ejemplo, ahora desea que el usuario ingrese una pregunta en la entrada;
- Cada vez que el usuario ingresa el contenido más reciente, obtiene el contenido más reciente y utiliza la pregunta para consultar la respuesta del servidor;
- Luego, es necesario obtener los últimos cambios de datos en tiempo real;
<body>
<div id="app">
<h2>{
{message}}</h2>
<button @click="changeMessage">修改message</button>
</div>
<script src="../lib/vue.js"></script>
<script>
// Proxy -> Reflect
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
message: "Hello Vue",
info: {
name: "hhh", age: 18 }
}
},
methods: {
changeMessage() {
this.message = "你好啊, 李银河!"
this.info = {
name: "kobe" }
}
},
watch: {
// 1.默认有两个参数: newValue/oldValue
message(newValue, oldValue) {
console.log("message数据发生了变化:", newValue, oldValue)
},
info(newValue, oldValue) {
// 2.如果是对象类型, 那么拿到的是代理对象 Proxy
console.log("info数据发生了变化:", newValue, oldValue)
// Proxy(Object) {name: 'kobe'}
// Proxy(Object) {name: 'hhh', age: 18}
console.log(newValue.name, oldValue.name) //kobe hhh
// 3.获取原生对象
console.log({
...newValue }) //{name: 'kobe'}
console.log(Vue.toRaw(newValue)) //{name: 'kobe'}
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>
2.2_Opciones de configuración para la vigilancia del oyente
un ejemplo:
- Cuando se hace clic en el botón, se modificará el valor de info.name;
- En este momento, usa el reloj para escuchar información, ¿puedes escucharla? La respuesta es no.
Porque de forma predeterminada, el reloj solo escucha información.cambio de cita, no responderá a cambios en las propiedades internas:
- En este momento, puede utilizar una opción profunda para una escucha más profunda;
- Tenga en cuenta que la propiedad de escucha en el reloj también puede ser un Objeto;
El atributo inmediato se ejecutará inmediatamente al principio:
- Utilice la opción inmediata en este momento;
- En este momento, independientemente de si hay algún cambio en los datos posteriores, la función de escucha se ejecutará una vez;
<body>
<div id="app">
<h2>{
{ info.name }}</h2>
<button @click="changeInfo">修改info</button>
</div>
<script src="../lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data() {
return {
info: {
name: "hhh", age: 18 }
}
},
methods: {
changeInfo() {
// 1.创建一个新对象, 赋值给info
// this.info = { name: "kobe" }
// 2.直接修改原对象某一个属性
this.info.name = "kobe"
}
},
watch: {
// 默认watch监听不会进行深度监听
// info(newValue, oldValue) {
// console.log("侦听到info改变:", newValue, oldValue)
// }
// 修改代码，进行深度监听
info: {
handler(newValue, oldValue) {
console.log("侦听到info改变:", newValue, oldValue)
console.log(newValue === oldValue)
},
// 监听器选项:
// info进行深度监听
deep: true,
// 第一次渲染直接执行一次监听器
immediate: true
},
"info.name": function(newValue, oldValue) {
console.log("name发生改变:", newValue, oldValue)
}
}
})
// 2.挂载app
app.mount("#app")
</script>
</body>