vue学习（三）

14.监视属性watch

• 当被监视的属性发生变化时，回调函数立即调用，进行操作

• 监视的两种写法：直接配置或者通过vm添加

watch:{
                isHot:{
                    immediate:true, //首次用到执行
                    handler(newValue,oldValue){
                        console.log("isHot 被修改了",newValue,oldValue)
                    }
                }
            }

vm.$watch("isHot",{
            immediate:true,
            handler(newValue,oldValue){
                console.log("isHot 被修改了",newValue,oldValue)
            }
        })

• 深度监视：

        watch默认不监测对象内部值的改变，配置deep:ture则可以

• 简写形式（不需要 deep 这些配置的时候 用简写）：

 

• 计算属性和监视属性在选择的时候，优先计算属性，但是如果代码涉及到线程，比如setTimeout,则选择watch，然后要使用箭头函数（这样this往上级找的时候，就是vm）

15.绑定样式

样式 .class1  .class2  .class3         :class="str"

• 绑定字符串变量：适用于样式类名不确定，动态指定

• 绑定数组变量：适用于绑定样式个数不确定，名字也不确定

• 绑定对象变量：适用于个数确定，名字确定，但动态决定用不用

data:{
    str:'class1',
    arr:['class1','class2'],
    obj:{
        class1:ture,
        class2:false
    }
}

• vue控制style写法，关键词中间的-去掉，用驼峰命名   :style="styleObj"  @style="{fontsize:xxx}"

styleObj:{
    fontSize:'20px',
    color:'blue',
    backgroundColor:'gray'
}

16.条件渲染

• v-if:适用于切换频率较低场景，不展示的dom会被移除，下图中的结构要一起使用，不能被断      

  

• v-show 适用于切换频率高，不展示dom未被移除，仅仅是样式隐藏          

17.列表渲染

• v-for 用于展示列表，语法：

• v-for="(item,index) in xxx" :key="yyy" 

• 可遍历 数组 对象  字符串 指定次数 

• key作用：key是虚拟dom的标识，数据变化时，生成新的虚拟dom，然后vue通过diff算法，对新旧虚拟dom进行比较，

• key比较规则：找到相同的key，key中对应的内容没变直接使用之前的真实dom，如果变了则生成新的真实dom，没找到相同的key则创建新的

• 用index作为key，可能引发问题，对数据比如数组进行逆序添加删除破坏顺序的操作，会产生没有必要的真实dom更新，效率差，如果还包含输入类dom，界面还有问题（操作过的输入，虚拟dom还是原始值）。如果没有这些操作，只有只有用index没有问题