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没有问题
