计算属性和监听器

最新推荐文章于 2024-07-24 22:25:19 发布

_XinXinM_

最新推荐文章于 2024-07-24 22:25:19 发布

阅读量96

点赞数

本文链接：https://blog.csdn.net/binbinhxx/article/details/112163107

版权

模版内的表达式非常便利，但是设计它们的初衷是用于简单运算的，在模版中放入太多的逻辑会让模版过重切难以维护，此时就可以考虑计算属性和监听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="vue.js"></script>
    <style>
        .active{
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <!-- 宿主文件 -->
    <!-- {{ mustache }}是一个动态的值 左右就用双括号{{}}-->
    <!-- 插值文本 -->
    <!-- v-once执行一次性插值 之后值变了动态值不变 -->
    <div id= "app">
        <h2 :title="title">
            {{ title }}    
        </h2>
        <!-- 用户输入 -->
        <!-- 键盘按下事件v-on：keydown -->
        <p><input type="text" v-model = "course" v-on:keydown.enter = "addCourse">{{course}}</p>
        <button @click = "addCourse">新增</button>
        <!-- 条件渲染 -->
        <!-- v-if 和 v-for最好不要放在一个标签上他们有优先级的不同会争抢 -->
        <p v-if = "courses.length == 0 ">没有任何课程信息</p>
        <div class="course-list" v-else>
            <div 
          v-for="c in courses" 
          :key="c"
          :class = "{active: selectedCourse === c}"
          @click = "selectedCourse = c"> 
            {{ c }}
        </div>
        <!-- 商品总数 -->
        <p>
            <!-- 表达式 -->
            <!-- 课程总数：{{courses.length+'门'}} -->
            <!-- 监听器 -->
            课程总数：{{totalCount}}
        </p>
    </div>
        <!-- 列表渲染 --> 
        <!-- 被选中点击一个动态的类 没有被选中类被移除掉-->
        <!-- transparent 没有颜色透明色 -->
        
        <!-- <div 
        v-for="c in courses" 
        :key="c"
        :style = "{backgroundColor: selectedCourse === c ? '#' : 'transparent'}"
        @click = "selectedCourse = c"> 
          {{ c }}
      </div> -->
    <script>
        // 1.创建vue实例
        // 保存vue实例
        const app = new Vue({
            // 交代宿主是谁
            el:"#app",
            data: {
                title: '课程：',
                course:"",
                selectedCourse:'',
                // courses:[],
                courses:["黄帝内经","仲景心法","针灸","伤寒","金匮"],
                totalCount:0,
            },
            methods: {
                addCourse() {
                    // 1.添加course到数组
                    this.courses.push(this.course)
                    // 2.清空course
                    this.course = ""

                }
            },
            // computed是值变化了返回值
            computed: {
                
                total() {
                    // 计算属性是有缓存性的，如果值没有发生变化，则页面不会重新渲染
                    return this.courses.length+'门'
                }
            },
            // watch 做某个值得监控，如果发生变化了则会执行这个函数做我想做的事情
            // watch是值变化了执行这个函数
            // 监控courses这个值的变化
            // watch如果不加特别声明表示值变化之后才会执行，它一开始是不会执行的

            // 默认情况下watch初始化时不执行想要watch立即执行 immediate为true。立即执行一次
            // watch: {
            //     courses(newValue, oldValue) {
            //         this.totalCount = newValue.length +"门"
            //     }
            // },


            // 为了一开始就能执行要选带选项的watch vwatcher-options
            watch: {
                data: {
                    immediate: true,//立即执行 一次
                    // deep是当监控的数据是很复杂的数据的时候才使用如果是很浅就不需要用到deep
                    // deep: true,
                    handler(newValue, oldValue) {
                        
                    }
                }
            },
        })
        
    </script>
</body>
</html>

从简洁性来说，在开发过程中如果能直接用computed来实现那就用computed，应为computed具有缓存性，性能比较好其次写出来比较简单，哪怕watch也可以比较简单但设计到第一次执行的问题，还需要声明一些data属性要不然都不能去完成功能，如果使用watch-options的方式呢又过于复杂对新手不友好。
从语境上来说两者是有差异的，如果监听一个值，那个值变化了我要做一些事情，watch可以做一些事情不止一件事，一个监听值变了可以影响其他多个值，可以做很多事情不止一件事，适合做一个值影响多个值得情形。
如果使用computed如果它的一个值是由其他几个值得来的，这个时候一旦这个值发生变化不管是其中任何一个值发生变化这个值都要变，一个值由其他值得来，这些值变了 computed的值也要改变，适合做多个值影响一个值的情形。一般情况下都是其他值变化导致一个最新值的生成，所以computed的适用性是非常广的，它在实例的开发中用的是最多的再加上computed是有缓存性的，computed能实现就用computed，有些场景用watch监听器会更好一些，典型的情况就是一个值变化了要做好多好多事情。

计算属性有缓存性，计算所得的值如果没有变化不会重复执行。
监听器选项提供了更通用的方法，适合执行异步操作或较大开销操作的情况
侦听器

在这里插入图片描述

_XinXinM_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性和监听器

模版内的表达式非常便利，但是设计它们的初衷是用于简单运算的，在模版中放入太多的逻辑会让模版过重切难以维护，此时就可以考虑计算属性和监听器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
复制链接

扫一扫