条件渲染v-if v-show v-cloak指令 v-once指令 指令 react Vue 中的key有什么作用

                                指令

       v-bind   单项数据解析表达式  可简写为 :xxx

        v-model   双向数据绑定

        v-for   遍历数组/对象/字符串

        v-on  绑定事件监听  可简写为 @

        v-if 条件渲染  切换频率较低的场景  不展示的DOM元素直接被移除

        v-else 条件渲染 

        v-show 条件渲染    切换频率较高的场景

       v-text    不支持结构的解析

        v-html  指令

        1.作用 向指定节点中渲染包含html结构的内容

        2.与插值语法的区别

                 (1)v-html会替换掉节点中所有的内容  {{xxx}}则不会

                  (2)v-html可以识别html结构

        3.严重注意 v-html有安全性问题

                (1)在网站上动态渲染任意HTML是非常危险的 容易导致xss攻击

                (2)一定要在可信的内容上使用v-html 永不要在用户提交的内容上

 v-cloak指令

  1.本质是一个特殊属性 Vue实例创建完毕并接管容器后 会删掉v-cloak属性

  2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

 

v-once指令

 1.v-once所在的节点在初次渲染后 就视为静态内容了

 2.以后数据的改变不会引起v-once所在结构的更新 可以用于优化性能

 

初始化的n值是{{n}}

1 .   v-if

        写法：

        (1)v-if="表达式"

        (2)v-else-if="表达式"

        (3)v-else="表达式"

        适用于:切换频率较低的场景

        特点：不展示的DOM元素直接被移除

        注意：v-if可以和:v-else-if   v-else一起使用 但要求结构不能被打断

  2.v-show

        写法 v-show="表达式"

        适用于:切换频率较高的场景

        特点：不展示的DOM元素未被移除 仅仅是使用样式隐藏掉

 3.备注

 使用v-if时 元素可能无法获取到  而使用v-show一定可以获取到

               react  Vue 中的key有什么作用

 1.虚拟DOM中key的作用

        key是虚拟DOM对象的标识 当数据发生变化时Vue会根据   新数据 生成 新的虚拟

DOM随后Vue进行 新虚拟DOM 与 旧虚拟DOM 的差异比较 比较规则如下

  2.对比规则

        (1)旧虚拟DOM中找到了与新虚拟DOM相同的key

                  1.若虚拟DOM中的内容没变 直接使用之前的真实DOM

                 2.若虚拟DOM中的内容变了 则直接生成新的真实DOM 随后替换掉页面中之

前的真实DOM用index作为key可能会引发问题

        1.若对数据进行  逆序添加 逆序删除等会破坏顺序操作

        会产生没有必要的真实DOM更新 ==> 界面效果没问题 但效率低

        2.如果结构中还包含输入类的DOM

        会产生错误DOM更新 ==> 界面有问题

        4.开发中如何选择key

        1.最好使用每条数据的唯一标识作为key 比如id，手机号，身份证号，学号等唯一值

        2.如果不存在对每条数据的逆序添加，逆序删除操作 仅用于渲染列表用于展示

        使用index是没有问题的