vue2.0的基本特性

Posted 2021-01-27 lovellll

本文目前总结的特性如下
1.侦听属性和计算属性
2.class的绑定
3.条件渲染时的注意事项
4.v-if和v-for同时使用的注意事项
5.插槽
6.ref,父组件调用子组件的另一种方式
7.<keep-alive>标签

---

侦听属性和计算属性

计算属性computed
假设有A、B两个变量,B的值依赖于A,B=A的平方

<p>A的值：{{A}}</p>
<p>A的平方:{{B}}</p>
//B的值依赖于A，当A发生改变时B也会改变
computed:{
    B(){
        //这个方法在A发生改变时会触发,返回值传给B
        return A*A
    }
}

当计算很简单的时候,可以直接使用{{A*A}}来代替计算属性。
可是当计算变得逻辑变得复杂时,如果嵌套在template的表达式并不适用于这种方法，而且这样会使代码的可读性变差，难以维护
而且使用计算属性是有缓存的,只有当A发生改变时,才会再次触发

watch侦听属性
watch的功能computed类似,watch的方法在监听的属性改变时触发

watch:{
  A(){
    this.B = A*A;
  }
}

---

class的动态修改

当一个元素的样式需要根据数据来动态改变时，使用:class属性
<div :class="{类名:变量}"></div>，类名是否存在取决于变量值是否为真

当元素有多个样式时：
<div :class="[‘类1‘,{‘类名2‘:变量2}]">

类名也可以用计算属性来监听：
isEnoug为true,class="cartLeast unEmpty" 否则class="cartLeast"
<div :class="classObj"></div>
computed:{
classObj(){
let classArr = [‘cartLeast‘];

if(this.isEnough){
  classArr.push(‘unEmpty‘);
}
return classArr;

}
}

在引用组件的时候增加class,这是组件child的类名有a,b两个
<template><div class="a"></div></template>
<child class="b"></child>

---

条件渲染时的注意事项

vue为了高性能渲染,一般会复用已渲染过的标签。
假如有一个登录框，根据选择的登录方式切换input，一个是手机登录，一个是邮箱登录。因为vue会复用原来已有的input，所以当你切换到邮箱登录时，input里还会保存有手机登录时的内容，这显然是不符合条件的。
通过在input上添加key可以区别元素

<div class="" v-if="isSeen">
  <input type="text" name="" value="" placeholder="enter a" key="a">
</div>
<div class="" v-else>
  <input type="text" name="" value="" placeholder="enter b" key="b">
</div>
<div class="" @click="isSeen=!isSeen">
  toggle
</div>
data:{
isSeen:true
}

---

当同时使用v-for和v-if的注意事项

v-for的优先级是高于v-if的,当只需要渲染满足一些特点条件的元素时，是很有效的
但是当需要全部渲染时，把v-if放在外面

<div v-if="{{a}}"><div v-for="item in list"></div></div>

来源：https://segmentfault.com/a/1190000016679712