[Vue3]Vue3从CDN编程模式-进阶指令->条件渲染，列表渲染，计算属性，监听器

今天，我们来带大家学习一些Vue3的进阶指令，我们仍然是从CDN导入Vue3编程模式！ 如果感兴趣的并且前两章没有学习的掘友,也可以学习一下：

[小白学Vue3]vue3初体验--vue基本结构CDN导入Vue3编程模式 - 掘金 (juejin.cn)

[Vue3]vue3从CDN导入编程模式--基础指令 - 掘金 (juejin.cn)

目录

1. 条件渲染
2. 列表渲染
3. 计算属性
4. 监听器

一、Vue3条件渲染

1、v-if

条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示内容。

我们来看看一个案例：

<template id="my-app">
    <!-- v-if直接让它消失，或者出现，标签都消失 直接把它的Dom结构剔除掉了-->
    <!-- v-if成立了 ，v-else一定不成立，反之 -->
    <!-- v-if和v-else一定要放在兄弟标签上，同级标签 -->
    <h2 v-if="count == 0">hello,world</h2>
    <h2 v-else-if="count == 2">これは自由ですね</h2>
    <h2 v-else>你好，世界</h2>
    <button @click="change">切换</button>
</template>

v-if和我们熟知的if判断很类似，可以有v-if,v-else-if,v-else这种多重判断的形式，而在后面只需要接一个"判断的条件"即可。

在这一段代码当中，我们通过点击这个切换按钮，控制count在0，1，2 这三个数中切换，我们来看看实际的效果：

在案例当中，我们有介绍到：v-if直接让Dom结构消失，或者出现，标签都消失 直接把它的Dom结构剔除掉了。

我们看看我们的效果图中的Dom结构：

切换为hello,world

切换为你好，世界

切换为これは自由ですね

我们可以看到，v-if直接让不满足条件的Dom结构给剔除掉了，只显示满足条件的Dom结构。

注意!：v-if和v-else一定要放在同级标签之上。（也可以称为兄弟标签）否则，整个逻辑是不连贯的。

在同级的v-if当中，v-if成立，则v-else不成立，反之亦然。

2、v-show

除了v-if我们还有一个v-show也可以用于条件渲染，v-show同样可以操作Dom结构的展示与消失。

同样是条件渲染，v-show和v-if到底有什么区别呢？

• v-show是通过判断，看是否在样式层面添加display:none
• v-if是通过判断，直接不加载Dom结构，将这个样式剔除掉！

如果，我们在生活工作当中，需要频繁加载页面的话，**推荐使用v-show,**用v-if如果频繁加载的话，要重复加载，性能开销更大！

同时，无关重要的样式可以用v-show，通过权限来控制的内容，不能用v-show,因为这样我们网页容易被爬取 ，所以比较重要的内容，需要权限才能开启的内容，还是使用v-if。

说了这么多了，我们具体来看看v-show的具体效果吧！

<template id="tel">
    <div v-show="true">我出来了！</div>
    <div v-show="false">我消失了!</div>
</template>

我们可以看到，当v-show的条件为真时，Dom结构正常显示，而当v-show的条件为假时，页面上没有显示，但是DOM结构仍然存在，而是在行内样式中加入了display为none这样一条样式，让其不显示在页面上！

所以对于v-show和v-if的使用，我们在使用的时候要小心斟酌，权限较重的使用v-if，而不那么重要的内容可以使用v-show

二、Vue3列表渲染

在这一个点中，我们要讲的就是v-for这一条指令了，也就是我们大家熟知的for循环。

通常v-for会出现在li标签当中，基本用法：

<li v-for:"(item,index) in 数组":key="index">
	{{item}}
</li>

其中，item为数组中的每一项，而index是下标，数组通常是数据源中返回对象中的一个数组。

每次都加上:key="唯一值" 这是打上一个唯一标识，能够大大增加性能。

我们来看一个案例：

<template id="my-app">
    <h2>歌曲列表</h2>
    <ul>
        <li v-for="(item, index) in songs":key="index" > {{index+1}} -- {{item}}--
            <a href="#" @click="del(index)">x</a>
        </li>
    </ul>
</template>
songs:[
	'只因你太美',
	'等你下课',
	'说话不哭',
	'晴天',
	'告白气球'
]
del(index){
	删除数组中的数据
	this.songs.splice(index,1)
},

在这个案例当中，我们在数据源中声明了一个数组songs，里面声明了一些歌曲名。

然后，我们在template中通过v-for获取了这个数组中的数据，用item存储数组中的每一项，用index存储下标。

在我们的methods中，通过将index传入方法del当中，在del方法中，通过this.songs.splice(index,1)调用数据源中songs数组调用splice方法删除对应下标的数据。我们来看看效果图：

三、Vue3计算属性

1、computed

computed也是和methods一样，用于存储方法，不过在computed中的方法，存在一个依赖缓存，一旦方法依赖的数据源发送改变，里面这个方法就会自动执行一遍，这个方法比我们的methods在某种场景下要方便的多！

也就是说，假如：我们页面上的内容要根据一个变量的值改变而改变，假如我们要用methods，则每次修改值都要运行一个方法判断一下，这种情况下，我们不如使用computed，利用依赖关系，就方便很多。

现在天气确实很冷(不知道大家有没有穿上属于自己军大衣)，那我们来想象这样一个场景，我们需要一个温度参数，页面上根据我们的温度的大小，来给出穿衣建议，假如给你你会怎么做？让我们用computed来实现这样一个效果!

<div id="app"></div>
<template id="my-app">
    <h2>
        今天温度:{{temp}}℃
    </h2>
    <h3>建议穿:{{suggestion}}</h3>
    <button @click="add">+</button>
    <button @click="lower">-</button>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = {  
        template:'#my-app',
        data(){
            return{
                temp:10,
            }
        },
        computed:{
            // 这个叫计算属性，计算属性里面的函数，和数据源一样，函数名直接充当了数据源的使用，
            // 挡temp发生变化时，这个suggestion会自动调用一遍
            suggestion(){
                //  响应式执行，当它依赖的数据源发生变更时，它就会执行
                let res = '夹克'
                if(this.temp>50)
                {res = '裤衩'
                }else if(this.temp>=20&&this.temp<=50)
                {
                    res = '短袖'
                }else if(this.temp<=0)
                {
                    res = '军大衣'
                }else{
                    res='夹克'
                }
                return res
            }
        },
        methods:{
            add(){
                this.temp+=5
            },
            lower(){
                this.temp-=5
            },
        }
    }
    Vue.createApp(App).mount('#app')
</script>

1. 在我们这个代码当中，我们在数据源中定义了一个温度temp，在methods定义了两个方法add控制温度增加，lower控制温度降低。
2. 然后，我们定义一个计算属性computed，在计算数学我们定义了一个函数suggestion，在这个函数当中，我们定了一个res为穿衣建议，res会根据数据源中的this.temp的值变化而变化，最后返回了res。
3. 在页面上，我们首先，显示了当前温度{{temp}}，然后给出了建议穿衣{{suggestion}}这里的建议是调用计算属性中的函数suggestion，根据它的返回值来显示。
4. 最后，我们定义两个按钮，+负责调用add方法使温度上升，-负责调用lower使温度降低。(这里我们通过@也就是v-on绑定了点击事件，这个指令我们在前文中有学习到：[Vue3]vue3从CDN导入编程模式--基础指令 - 掘金 (juejin.cn))

我们来看看实际效果：

非常好用！！！

接下来，我们就介绍一下computed vs methods

我们来看看它们之间的方法调用，来看看computed的缓存和普通的methods有什么区别。

<template id="my-app">
    <button @click="change">修改firstname</button>

    <h2>computed：{{fullName}}</h2>
    <h2>computed：{{fullName}}</h2>
    <h2>computed：{{fullName}}</h2>
    <h2>computed：{{fullName}}</h2>

    <hr>

    <h2>methods：{{getFullName()}}</h2>
    <h2>methods：{{getFullName()}}</h2>
    <h2>methods：{{getFullName()}}</h2>
    <h2>methods：{{getFullName()}}</h2>


</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = {  

        template:'#my-app',
        data(){
            return{
                firstName:'三',
                lastName:'张'
            }
        },
        computed:{
            fullName(){
                // 计算属性是有缓存的,当我们多次使用计算属性时,计算属性中的逻辑只会执行一次！
                console.log('computed.getFullName执行了');
                return this.lastName+this.firstName
            }

        },
        methods:{
            getFullName(){
                console.log('methods.getFullName执行了');
                return this.lastName+this.firstName
            },
            change(){
                this.firstName = '三三'
            }
        }

    }
    Vue.createApp(App).mount('#app')
</script>

在这个案例当中，我定义了methods和computed，其中分别是两个函数fullName和getFullName都是用于将数据源中的firstName，lastName进行拼接，这里我们主要看console.log打印的内容来判断区别！

可以看到computed的缓存嫩南瓜只需要执行一遍函数就能同步所有相关内容，而methods就需要调用四遍。

所以当我们的代码量大起来的时候，computed可以提高很大的效率！

四、Vue3监听器

watch

我们可以通过watch来监听响应数据的改变

使用watch选项，可以观察一个响应式数据属性的变化，并在其值改变时执行一些操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。

watch 使得在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。

我再拿到之前建议穿衣的案例，不过我这次使用watch

<div id="app">

</div>

<template id="my-app">
    <h2>
        今天温度:{{temp}}℃
    </h2>
    <h3>建议穿:{{suggestion}}</h3>
    <button @click="add">+</button>
    <button @click="lower">-</button>

</template>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = {  

        template:'#my-app',
        data(){
            return{
                temp:50,
                suggestion:'夹克'
            }
        },
        // 区别就一点，computed计算属性有缓存，优化更好
        watch:{
            temp:{
                // 让temp立即执行
                // handler不能乱写，处理函数
                handler:function(newVal,oldVal){
                    if(newVal>=30)
                    {
                        this.suggestion='短袖'
                    }else if(newVal<=0)
                    {
                        this.suggestion='羽绒服'
                    }else
                    {
                        this.suggestion='夹克'
                    }
                }
                // immediate为true就是让它temp立即执行
                ,immediate:true
            }
        },
        methods:{
            add(){
                this.temp+=5
            },
            lower(){
                this.temp-=5
            },
        }

    }
    Vue.createApp(App).mount('#app')
</script>

同样的add方法控制温度增加，lower控制温度降低，不过这次我们用的不是computed，但是其实原理是大差不差，不过computed有缓存，性能更加优秀！

在Vue里面能用computed实现的都能用watch实现，反之也一样。

1. 我们在对象中定义了watch，
2. 然后我们在对象体内又定义了一个temp，注意 ！要侦听谁，就把谁拿下来当key值，例如我们这里监听的是数据源中的temp，所以我们把这个变量名拿下来当key值！
3. 最后，我们又定义了一个handler存储一个函数!(注意 !!handler是官方写死的方法，不能随意更改)，这个函数会给我们拿到两个参数！function(newVal,oldVal)，newVal代表新的值，而oldVal代表过去值！
4. 在temp这个对象后面加了一个,immediate:true为true时是为了让temp立即执行！
5. 这里操作，是通过修改数据源中的suggestion的值，所以在页面上我们使用的是{{suggestion}}

最后结束啦！

今天，条件渲染，列表渲染，计算属性，监听器，我们就先学到这里啦！

后续，有关vue3的路由，脚手架安装，以及如何开启一个vue3项目，我都会在后续的文章中的持续输出！

大家感兴趣的可以关注我！我还会为大家输出更多有意思的内容！

点个小小的赞鼓励支持一下吧！🌹🌹🌹

个人github:一个修远君的库 (github.com)