今天的内容书是上一章的延续。也是vue的核心基础部分。今天比较理论化，尤其是vue对数据对象的监控部分。刚开始想了很久，现在比较容易理解了。10.比较watch和computed的Computational属性情况（watch来做）添加一个要求输入姓氏后，需要响应一秒后才响应computed==difference==:computed可以完成的功能，watch能完成watch能完成的功能，computed不一定能完成，比如这里watch可以异步操作，computed不能，因为我们是依赖computed中的返回值让其getter返回值会等于fullname的计算属性，所以如果把返回值给定时器，那么我的fullname是拿不到返回值的，但是watch不一样，watch是对值进行操作的，已经赋值了在timer中完成操作不需要你返回给我==注意==：据说vue管理的函数最好不要写箭头函数，但是这里的timer一定要写成箭头函数，因为如果它是普通函数，那么它的this就是window，而定时器本身的this就是window，但是如果是箭头函数，我们都知道箭头函数的this就是定义它的位置的地方的this，所以monitoring属性中的this是vue管理的vm实例的函数最好写成普通函数，==非vue管理的函数（timer，ajax回调，promise回调）最好写成箭头函数==11.绑定类风格字符串写法，适用于：==风格类名不确定，需要动态指定==注意这里随机整数的写法数组写法：==适用于：当number不确定类名也不确定==,number我以后可能有一百个或者几个，名字可能叫这个对象或者那个对象写法：==适用于确定数量，类名也确定了==，我只有这两个，而且我只调用这个Namebindingstylestyle（理解）这个是对象写法，还有数组写法，就是fontsize写在这个对象里，背景写在那个对象里。数组的写法是将两个对象[obj1,obj2]组合在一起12.条件渲染控制新的隐藏和显示元素的指令语法：==v-show,v-if==两者都可以显示和隐藏。v-show的底层实现是display:none，v-if直接放元素都删掉了，所以当我们需要频繁切换显示和隐藏时，建议v-showcase:==v-else-if==和v-if是一组判断。如果满足前面的条件，后面就不做判断了==v-else==注意v-else不会跟在条件后面直接写v-else，其他的条件都会显示出来==注意==v-if判断是一个整体，包括elseif,else,中间不能写其他的东西打断==v-if是和template结合使用==我想完成这样一个界面，当点击到达1，会显示。这种做法是不是有点多余，每个都要判断，所以有一个标签模板，==只能和v-if一起使用==，它最大的好处是不会影响页面标签的布局多少数据我们在v-for中，会自动遍历多少个li，然后v-for中的每个li都要配置key的动态属性，我们遍历可以写多个参数，写多少个参数，前面说明了这个对象，后面表示这个对象在数组中的索引号，我们的key可以配置为p.id或者index的索引号来遍历这个对象。遍历对象，注意==traverse的值，我们的数据是颠倒过来的，前面就是我们的数据，后面就变成了一个值，而遍历对象的时候，key就是属性名，====v-for除了usingof之外还可以用in，一样的效果==就是possibleto遍历字符串string遍历每个字符，前面是值，后面是下标遍历指定次数（不常用）13.1关键函数及原理（面试）首先要知道的是我们动态生成的key并没有显示在页面上，可以看到最终生成的真实DOM是没有这个属性的，是vue使用的。当我们使用index作为key的值时，会出现一个问题：有一个需求，当我们点击按钮的时候，会在上面添加一条新的数据。第六是不是有问题。分析下图就知道问题出在哪里了。这是我们前面提到的vue的一大优势。虚拟DOM加上Diff算法就体现在这里。首先，我们初始化数据。当我们打开网页的时候，vue会先在内存中生成一个虚拟DOM，key就是我们的索引，然后正常的把虚拟DOM转换成真实DOM。我们在进入页面的时候，一般都是在输入框中输入内容。这个时候我们点击添加老六的按钮，相当于把数据换成我们新的数据样式，然后在内存中生成虚拟DOM。这个时候因为是第二次生成，Diff算法就来了。Vue会比较我们新的虚拟dom和旧的虚拟dom，比较的依据是==key==。我们比较第一条数据的时候，匹配到key之后，先比较文本，发现文本不一样，那么就不能复用了，会基于新的虚拟dom，然后再回去比较输入标签。请注意，此时输入标签是相同的。为什么呢，因为都是input标签，都是文本格式，我们在真实dom中输入的内容和虚拟dom是没有关系的，所以比较起来是一样的。既然一样，那我就可以去key=0了。真正的dom之前已经生成了，所以我就直接复用了，所以最后的结果是新添加的文本会添加到我们的旧输入中，等等，导致我们最终的渲染效果出现问题。这就是使用索引作为键的问题。还有一个问题。效率变低了，为什么，因为我们本来可以复用的数据，他给我重新生成了真实的dom，效率肯定很低。当我们用id作为key时，先比较key=004，发现不是。如果没有，那就直接添加吧。,后面发现是有的，而且数据是正确的，那么开发中如何选择关键，最好使用每条数据的唯一标识（id，手机号，身份证号，学号等）如果不存在逆序添加、逆序删除、渲染列表仅供显示（不新增、删除）等破坏数据顺序的操作，使用是没有问题的索引作为键，仍然可以使用它进行顺序增删改查。13.2列表过滤是为了模糊搜索，首先完成过滤功能（==注意数组和字符串的方法==）。如果这样做，原始数据将被损坏。我们原来的数据是不能动的，因为我们要保证不用查找就可以回去。定义一个新数组，让新数组接收搜索到的值。同时，原数组没有改变，可以一直查找。不会像原来搜索的越多，数据越少的情况。同时需要修改遍历的v-for为新的。数组，但是现在有个问题就是新数组是空的，所以我们看不到开头的list==这里有一个很重要的概念，空的查找可以找到字符串的indexOf方法string，表示任何string.indundefined总结就是：Vue对对象数据的监控是通过一个构造函数，目的是处理数据给\_data赋值。真正的逻辑在于里面的defineProperty方法。真正的监听原理是通过里面的getter和setter读取读取。写我们的数据，然后用setter做进一步的逻辑。既然是setter，值变了，我们回去重新解析template，diff对比virtualDOM，看哪些可以复用，然后render我们修改后的值，一句话总结：==vue监控的原理依赖于这个setter==13.4.2vue.set()的使用在这种情况下，首先要注意一点。在vue中，如果==值为undefined，则不会报错，但不会显示文字。这里的年龄没有赋值，所以是undefined，页面不会报错，就是一片空白，没有数据==一个要求，如果我想直接赋值让页面显示他的性别：你可以看到页面没有显示，而且我们也有数据，但是它是硬编码的，没有响应。我们之前研究过vue的监控原理。这取决于二传手。这里没有她的setter，自然不会映射到页面==Vue.set()==vue提供的api可以让我们后期添加数据，也可以完成响应式数据。它也有自己的getter和setter的三个参数：第一个参数where添加这个属性，第二个第一个参数属性名，第三个参数值第二种写法：==vm.$set（同理三个参数同上)====局限性==该方法不能直接给data和vm添加属性13.4.3vue数组监控原理vue不能直接使用数组索引修改值。可以看到我们数组的值发生了变化，但是vue无法监听到，所以页面是不会变化的。==不能通过数组索引直接修改值==invue中的数组只能通过七个可以修改数组本身的方法来监听，所以现在可以响应我们的13.4案例了。问题：为什么vue知道我们使用这些方法？因为vue对这些方法做了改动包装不是Array原来的7个方法。实现逻辑肯定还是原来的，只是增加了一些逻辑（方法完成后，会重新解析模板，重新diff虚拟DOM）==让数组监听到方法2==:Vue.set这个api也可以13.4.4汇总vue数据监控看汇总案例（如何实现性别在添加前隐藏，修改数组中的对象不需要数组方法）vue会监控所有层级在数据数据对象中通通过setter实现监控，在定义数据的时候传入数据。如果后面添加数据，需要Vue.set或者vm.$set来监听数组中的数据。通过七种方式包装数组实现vue数组中的大部分元素都是通过七种方法或者set的七种方法修改的两个API都是change方法，但是也有非改变方法如(==filter,concat,slice,里面返回一个新的数组，可以让返回的新数组替换旧数组，这样也可以监听，页面也会发生变化==）最后要注意的是set这两个api不能添加属性vm与data和data对象==数据劫持==：就是上面说的对象监听原理，把一个完整的data数据变成setter方法。如果我要修改student的值，瞬间就会被setter劫持，自己去做解析模板等其他操作。这称为数据劫持
