Vue03指令、set监视原理等

条件渲染：

1.v-if

            写法：

                （1）v-if="表达式"

                （2）v-else-if=“表达式

                （3）v-else="表达式"

  2.v-show

            写法：v-show="表达式"

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

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

      3.备注：（1）使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

列表渲染：

v-for指令

        1.用于展示列表数据

        2.语法：v-for="(item,index) in XXX" :key="yyy"

        3.可遍历：数组、对象、字符串（用的比较少）、指定次数（用的比较少）-->

Vue中key（面试常考）

1.虚拟DOM中key的作用：

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

            随后Vue【新虚拟DOM】与【旧虚拟DOM】的差异比较比较规则如下：

       

        2.对比规则：

            （1）.旧虚拟DOM中找到了与新虚拟DOM相同的key：

                若虚拟DOM中内容没有改变，直接使用之前的真实DOM（用户输入的值）

                若虚拟DOM中内容消失了，则产生新的真实DOM，随后替换页面之中的真实DOM

            （2）旧虚拟DOM中未找到与型虚拟DOM相同的key

                创建新的真实DOM，随后渲染到页面

        3.用index作为key可能会引发的问题：

            （1）若对数组进行：逆序添加，逆序删除等破坏顺序操作

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

            （2）如果结构中还包括输入类的DOM：

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

        4.开发中如何选择key？

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

            2.如果不存在对数据的逆序添加、删除等破坏顺序操作，仅用于渲染雷奥用于展示

                使用index作为key是没有问题的

知识点：列表渲染过程中，index和身份唯一绑定的流程

 

 

 

setter调用时一个简短的流程

_data.name改变时对应的调用setname后解析模板后形成新的DOM，新旧Dom对比，形成页面

Vue监视数据的原理：

1.Vue会监视data中所有层次的数据

2.如何监测对象中数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

（1）对象中后追加的属性，Vue默认不做响应式

（2）如需给后添加的属性做响应式，要用如下API

Vue.set(target,propertyName/index,value)或

vm.$set(target,propertyName/index,value)

 

3.如何监视数组中的数据？

通过包装数组搞笑元素的方法实现，绷直就是做了两件事：

（1）调用原生对应的方法对数组进行更新

（2）重新解析模板，进而更新页面

4.在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API

 

pop：在数组的后方删除一个元素

push：在数组后方新增元素

reverse：数组反转

shift：移除数组第一项

unshift:将新项添加到数组开头，并返回新的长度

sort：将数组排序

var points = [40,100,1,5,25,10]; #降序

points.sort(function(a,b){return b-a});

splice：删除、修改元素

 

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2,1,"Lemon","Kiwi");

2.Vue.set()或vm.$set()

注意！Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

做一个表单数据时

若：<input type="text"/>,则v-model收集的是value值，用户要输入的就是value值

若：<input type='radio'/>，单选项则v-model收集的是value值，且要给标签配置value值

 若：<input type='checkbox'/>多选项

            1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）

            2.配置input的value属性：

                （1）v-model的初始值是非数组， 那么收集的就是checked（勾选or未勾选，是布尔值）

                （2）v-model的初始值就是数组，那么收集的就是value组成的数组//d对应60行

            备注：v-model的三个修饰符：

                lazy：失去焦点在收集数据（延迟收集）

                number：输入字符出纳转为有效的数字

                trim：输入首尾空格过滤

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

        语法：

            1.注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}

            2.使用过滤器：{{XXX | 过滤器名}} 或 v-bind:属性='xxx | 过滤器名'

        备注：

            1.过滤器也可以接收额外参数，多个过滤器也可以串取

            2.并没有改变原本的数据，是产生新的对应的数据

内置指令：

v-text 

1.作用：向其所在的节点中渲染文本内容

            2.与插值语法的区别：v-text会替换掉节点中的内容{{XX}}不会

 v-html指令：

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

        2.于插值语法的区别是：

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

            （2）v-html可以识别html结构

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

            （1）在网站上动态渲染容易HTML是非常危险的，容易到欧式XSS攻击（冒充用户之手）

            （2）一定要在可以的内容上使用v-html，用不要再用户提交的内容

            在控制台里点击Application-->查看cookie-->使用Cookie Editor导入和导出cookie可直接登录

补充cookie（类似于json有key，value）大致知识

 

 

v-once指令(没有值)：

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

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

v-cloak指令(没有值)：

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

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

v-pre指令(没有值)：

            1.跳过所在节点的编译过程

            2.可利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译