vue第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别（常见效果） #课程目标

第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别（常见效果）

#课程目标

精通 v-if v-else v-else-if 的使用
精通 v-show 和 v-if 的区别
精通 v-for 的使用
精通 computed 的使用
精通 watch 的使用以及和 computed 还有 method 的区别

#知识点

v-if 条件渲染： v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 v-else 在表达式返回 false 时被渲染
```
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
```
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
```
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
```
在 <template> 元素上使用 v-if 条件渲染分组,最终的渲染结果将不包含 <template> 元素。
```
<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>
```
注意点：
- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
- 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-if 和 v-show 的区别： v-if 是“真正”的条件渲染，条件为真是渲染，为假是不渲染。 v-show 元素总是会被渲染，如果条件是假就会给元素添加一个 display：none 的属性, 使其隐藏。
v-for 列表渲染： v-for 指令基于一个数组、对象或数字来渲染一个列表。基本语法： v-for="item in items" v-for="(value, name) in object" v-for="num in 10"
```
    <ul id="example-1">
    <li v-for="item in items" v-bind:key="item.id">
        {{ item.message }}
    </li>
    </ul>
```
```
    var example2 = new Vue({
    el: '#example-2',
    data: {
        parentMessage: 'Parent',
        items: [
            {id: 1, message: 'Foo'},
            {id: 2, message: 'Bar' }
            ]
        }
    })
```
在 <template> 元素上使用 v-for 列表渲染分组,最终的渲染结果将不包含 <template> 元素。
```
    <ul>
        <template v-for="item in items">
            <li>{{ item.msg }}</li>
            <li class="divider" role="presentation"></li>
        </template>
    </ul>
```
注意点：
1. 循环列表一般增加 v-bind:key="item.id" 这样在数据变化时提高vue的性能。
2. 当v-if v-for处于同一节点，v-for 的优先级比 v-if 更高
3. 当更改数组的数据是，不能简单使用arr[index]='value'这样的方式，因为这样修改的数据vue检测不到变化，所以页面也不会更新。应当使用经过vue包裹后的数组的变异方法：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
也可以通过替换数组的方法让数据更新。

计算属性 computed 计算属性是基于当前数据进行简单的加工返回的新的数据。当计算属依赖的数据变化时它会自动计算，计算属性返回的值也会跟着变化。

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // 计算属性的 getter
        reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
        }
    }
})

watch 的使用以及和 computed 还有 method 的区别：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
```
<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="question">
    </p>
    <p>{{ answer }}</p>
</div>
```
```
var watchExampleVM = new Vue({
    el: '#watch-example',
    data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
    },
    watch: {
        // 如果 `question` 发生改变，这个函数就会运行
        question: function (newQuestion, oldQuestion) {
            this.answer = 'Waiting for you to stop typing...'
            this.debouncedGetAnswer()
        }
    }
})
```
watch 和computed 还有 method 的区别： computed：用于简单个数据检测，而且具有缓存功能，每次数据变更只需一次计算就可以了，并且可以监听多个属性，只要任一数据变化都会触发计算。 watch：当需要在数据变化时执行异步或开销较大的操作时使用 watch，而且只能监听单个数据。 methods：只有调用时才会执行，没有缓存功能，每次调用都会被执行。