ciclo vital
Las principales etapas del ciclo de vida de Vue : 4 antes, 4 ed, crear, cargar, actualizar, destruir
Recuerda decir las palabras:
Ejecutar las primeras 4 funciones de enlace del ciclo de vida por primera vez,
La plantilla se representa cuando se monta,
El orden del ciclo de vida de los componentes principales y secundarios (los primeros tres en el componente principal, los primeros cuatro en el componente secundario y el cuarto en el componente principal)
// 生命周期/* */
// 初始化阶段（不常用），拿不到data中的数据
beforeCreate() {
// 创建实例前
},
created() {
// 发送ajax请求，获取数据，赋值data，渲染
},
// 挂载阶段
beforeMount() {
},
// 可以拿到dom元素，进行性dom操作
mounted() {
},
// 更新阶段 （触发它的更新，数据变化，dom元素新增或者删除）
beforeUpdate() {
},
updated() {
},
// 销毁阶段
// vue2:::
// beforeDestroy(){
// },
// destroyed(){
// }
// vue3:::
// 这两个钩子函数需要 触发页面的才可以看到执行
// 可以在这个阶段，清除定时器，或者一些全局的函数
// 想看到效果，需要销毁这个组件， 可以在父组件中销毁这个组件
beforeUnmount() {
},
unmounted() {
}calculado:{} atributo calculado (precio total +-*/)
-
// Manejar lógica compleja para procesamiento de datos en datos (parece un método, usa como un atributo, calcula un atributo)
-
Las propiedades computadas almacenarán en caché los resultados procesados después de procesar los primeros datos. Siempre que los datos dependientes permanezcan sin cambios, se leerán de la caché para uso futuro.
-
Las propiedades calculadas se almacenan en caché y los métodos se ejecutan siempre que se llamen (las propiedades calculadas ahorran rendimiento)
-
Legible e inalterable, el conjunto se puede cambiar y leer
//1.只能读，不能写
computed:{
revserMsg(){
console.log('烦死了');
return this.msg.split('').reverse().join('')
}
}
//2.这样写，可读可写
get **必选**:会在计算属性再第一次被调用或者是在依赖的数据改变之后会自动执行
并且返回一个处理好的结果
set **可选**:set里面必须有一个形参 这个形参就是计算属性修改之后的值
什么时候被调用:就是再计算属性处理好的值 被修改的时候调用
computed: {
// 这样写，可读不可写
// fullName(){
// return
// }
// 这样写，可读可写
fullName:{
get(){
return this.first+this.las
},
set(val){
console.log(val);
this.first = val.split('')[0]
this.las = val.split('')[1]
}
}
}reloj: {} oyente: escuche los datos en los datos, y cuando los datos cambien, se activará para ejecutar alguna lógica
-
Escenario de uso: realice operaciones asincrónicas o costosas cuando cambien los datos.
-
Watch no admite el almacenamiento en caché. Cuando la propiedad correspondiente cambia, se ejecuta la respuesta.
-
Use el reloj para escuchar los cambios de datos en los datos. Los atributos en el reloj deben ser los datos que ya existen en los datos en esta etapa.
-
简写： watch:{ 你要监听的data数据(newval，oldval){ 你的逻辑 } }
1. La función de devolución de llamada se ejecuta cuando los datos monitoreados por el método del controlador cambian
2. El reloj no disparará en la primera carga, si queremos disparar, debemos usar el atributo immedate para habilitar el primer monitor de carga
3, y el reloj no monitoreará el cambio de la propiedad del objeto por defecto.Si queremos monitorear el cambio de la propiedad del objeto, podemos usar deep
//监听器watch使用
<div id="app">
<!-- <input type="text" v-model="firsttext">
+
<input type="text" v-model="secondtext">
=
{
{sumtext}} -->
<input type="text" v-model="user.firsttext">
+
<input type="text" v-model="user.secondtext">
=
{
{user.sumtext}}
</div>
</html>
<script src="./lib/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
// firsttext:'',
// secondtext:'',
// sumtext:''
user: {
firsttext: '哈',
secondtext: '黑',
sumtext: ''
}
}
},
watch: {
// // 简单写法（侦听器：侦听属性）
// 1.
// firsttext: function (newval,oldval) {
// this.sumtext = newval + this.secondtext
// console.log(this.newval);
// },
// secondtext: function(newval,oldval){
// this.sumtext = this.firsttext + newval
// }
// 2.打点写法，层次多麻烦
// 'user.firsttext':function(newval,oldval){
// this.user.sumtext = newval + this.user.secondtext
// },
// 'user.secondtext':function(newval , oldval){
// this.user.sumtext = this.user.firsttext + newval
// }
// 复杂写法（深层侦听器：懒执行，添加立即执行即可解决）
user: {
// 开启深层监听器
deep: true,
// 强制回调函数立即执行
immediate: true,
// handler监听的数据改变的时候执行的回调函数
handler(newval,oldval){
this.user.sumtext = newval.firsttext + newval.secondtext
}
}
}
}).mount('#app')
</script>filtro: {} filtro: procesar algunos datos (no en V3, las propiedades calculadas se pueden reemplazar)
Filtro parcial: formatee y muestre el contenido sin cambiar los datos originales, pero solo tendrá efecto en los datos dentro de su propio rango
<div id="app">
<!-- {
{ data数据 | 过滤器名}} -->
{
{time | newTime}}<br>
<!-- {
{ data数据 | 过滤器名(传递的值可以多个)}} -->
{
{msg | newMsg(' --- ','爱')}}<br>
<!-- {
{ data数据 | 过滤器名(传递的值可以多个) | 对前边的数据操作}} -->
{
{ msg | newMsg(' --- ','爱') | newNewMsg }}
</div>
<script src="./lib/vue.js"></script>
<!-- <script src="./lib/vue.global.js"></script> -->
<script>
let app = new Vue({
data() {//数据
return {
time: 1314521,
msg: 'hello world'
}
},
methods: {//方法
},
computed: {//计算属性
},
watch: {//侦听器
},
filters: {//过滤器
newTime(val) {// 传进的前一个值。默认值val
// 将时间戳转换成日期对象,转换成日期对象
return new Date(val).toLocaleString()
},
// newMsg(){
// return '哈哈哈哈哈'
// }，
newMsg(val) {
return val.split('').reverse().join('')
},
newMsg(val,x,y) {//val是默认的，是你处理的元素，x是reverseMsg的参数...val后可传递多个
return val.split('').reverse().join(x)+y
},
newNewMsg(){
return '哈哈哈哈哈'
}
},
compontent: {//全局组件
compontents: {//局部组件：带s
}
}
})
app.$mount("#app")
</script>Filtro global: el formato y la visualización de contenido sin cambiar los datos originales tendrá efecto para todos los datos de ubicación del proyecto actual.
// 全局过滤器filter
// Vue.filter("过滤器的名字",(你要过滤器的数据)=>{
// return 你的逻辑
// })
Vue.filter("xiaoming",(val)=>{
if(val.length>3){
return val.substr(0,3)+"..."
}else{
return val
}
})Algoritmo v-for y virtual dom y diff
-
v-forEl comportamiento predeterminado es intentar modificar el elemento en el lugar en lugar de volver a crearlo (actualización en el lugar)-
Cómo operar dom: cicle la nueva estructura DOM virtual, compárela con la antigua estructura DOM virtual, intente reutilizar etiquetas para actualizar el contenido en su lugar
-
-
dominio virtual
-
De hecho, es solo una capa de abstracción del DOM real. El árbol se basa en objetos de JavaScript (nodos VNode), y las propiedades de los objetos se utilizan para describir los nodos. Finalmente, el árbol se puede asignar al DOM real. ambiente a través de una serie de operaciones
-
Ventajas: mejore el rendimiento de la actualización de DOM, opere el DOM real con poca frecuencia, encuentre la parte modificada en la memoria y luego actualice el DOM real (parche)
DOM es muy lento, sus elementos son muy grandes y los problemas de rendimiento de la página son causados principalmente por nodos DOM reales causados por operaciones DOM Incluso el div más simple contiene muchos atributos
El costo de operar el DOM sigue siendo alto, y las operaciones frecuentes aún causarán bloqueos de la página, lo que afectará la experiencia del usuario, así que use el dominio virtual
-
Ideas de implementación: las opciones de contexto (significado de atributos) de todos los objetos en Vue apuntan a la instancia de Vue, por lo que en Vue, las etiquetas en la plantilla #app deben ser procesadas en objetos DOM virtuales por Vue antes de ser renderizados y mostrados en el real. página DOM
-
-
algoritmo diferencial
-
¿Cómo compara el algoritmo diff el antiguo y el nuevo DOM virtual?:
-
-
comparación entre pares
-
El elemento raíz ha cambiado: elimine y reconstruya el árbol DOM
-
El elemento raíz no ha cambiado, pero los atributos han cambiado: reutilización de DOM, solo actualización de atributos
-
Tiene v-for: key=" "
-
El identificador único del DOM virtual
-
Sin una clave, v-for maximizará las actualizaciones en el lugar y reutilizará elementos del mismo tipo
-
Con el atributo clave, el algoritmo de diferencias se comparará según el valor de su clave: es equivalente a la inserción directa, lo que mejora la eficiencia de la actualización
-
-