vue复习-2---条件渲染和列表渲染

v-if和v-show 的区别

首先我们介绍的是条件渲染，v-if会通过判断条件，来决定dom元素是否该存在于文档中，这也是它与v-show的区别之一，v-show改变的是样式display:none即使隐藏了，dom还是会存在。

我们想要控制一个组件的显示隐藏，例如

<div v-if='show'> -->
	<div class="box red"></div>
	<div class="box blue"></div>
</div> -->

要注意，这样做可以实现我们想要的效果，但是由于使用了一个div元素还没有什么实际的意义，相当于增加了额外的开销（要知道js操作dom是有开销的），所以我们要避免这样的情况，使用vue提供的template标签，这样做template并不会插入到文档上下文中，依然实现了效果

<template v-if='show'>
    <div class="box red"></div>
    <div class="box blue"></div>
</template>

那么v-show是否可以放在template标签上呢？答案是不能的，由于v-show控制的是样式，然而template并不会生成dom，更不用说添加样式了，这也是他们的区别之一

v-for和key搭配

我们知道在vue中，想要实现循环的将数据渲染到页面中需要使用v-for，使用v-for的时候绑定key，可以提高页面的性能

key = number/string 唯一值

例如遍历数组的时候 如果每一个元素都是唯一的，可以使用元素绑定key,但是不建议使用index，
例如做一个页面加载两秒钟后数组反转，反转的时候会比对，两次key值对应的元素是否相同，
如果相同那么，就是将dom元素交换位置
如果不同，会重新创建dom元素
可见，使用index并不是最好的选择
但是如果我们正常的数组是不可能去重的
我们可以使用对象，真实的api中，拿到的也是对象，每个对象中会对应有id
那么我们可以使用id来绑定key

key 的用途

key并不是为了v-for存在的
key在开发过程中起着区分dom元素的用途
例如 有两个输入框，点击按钮后，输入框会切换
如果不加key
第一个输入框中输入的内容，点击切换后，会出现在第二个输入框上
因为vue在更新dom的时候，对两个input标签做了比对，发现没什么不同，就直接迁移了过来
我们可以加key 来解决这个问题 加别的属性不好使

<button @click='handle'>click</button>
<div v-if='show'>
    name: <input type="text" key='name'>
</div>
<div v-else>
    password: <input type="text" key='password'>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            handle() {
                this.show = !this.show
            }
        }
    })
</script>

更改数组

1. 不能通过索引的方式更改数组，这样不会渲染
2. 不能通过更改长度的方式去更改数组，这样不会渲染
3. vue提供了数组的变异方法：pop push shift unshift reverse splice sort

更改对象

1.向对象内添加或删除属性，不会渲染页面

可以使用app.$set 来弥补

为什么会出现这样的情况，是因为vue在内部对使用数组和对象做了劫持
Object.defineProperty,对何时进行渲染做出了判断
对象添加或删除属性，不会被defineProperty检测到
这就是为什么对象中添加或删除属性不会渲染页面的原因
而数组中，vue对7个方法进行了重写，使得其可以渲染页面

this.$set(this.obj, 'sex', '男')