Vue.js的核心学习笔记 - 第五章侦听器和计算属性教程

Marinda_Speed

已于 2022-03-09 09:24:41 修改

阅读量330

点赞数 1

分类专栏： Vue.js 文章标签： vue.js 学习 javascript

于 2022-02-20 21:34:59 首次发布

本文链接：https://blog.csdn.net/qq_33638188/article/details/123036042

版权

Vue.js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

Vue.js的核心学习笔记 - 第五章侦听器和计算属性教程

前言
侦听器(watch)
计算属性(Computed)
结束语

前言

今天我们来学习一下Vue中的侦听器和计算属性：Watch(侦听器)、Computed(计算属性)

侦听器和计算属性是Vue中比较常用的功能了。

侦听器一般围绕着Vue中的动态数据 是否响应式改变的监听方式。
计算属性一般简化在网页中较为复杂的JavaScript表达式，计算属性在某种机制上跟方法(Method)相似，在下面我会介绍一下关于方法与计算属性的区别。

侦听器(watch)

简介：对于动态数据的一个监听
代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js的核心学习笔记 - 第五章侦听器和计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <!-- 侦听器 -->
        <div class="vue_watch">
            <span>msg: {{msg}}</span>
            <span>watch后的input表单</span>
            <input type="text" :placeholder="msg">
        </div>
    </div>
</body>
<script type="text/javascript">
    // 定义Vue
    var vue = new Vue({
        el: "#app",
        methods:{
            
        },
        // 数据
        data:{
            message: "一条默认消息",
            value: 2,
            msg: "消息"
        },
        // 侦听器
        watch:{
            msg: function(newMsg,oldMsg)
            {
                console.log("监听修改前：" + oldMsg);
                console.log("监听修改后：" + newMsg);
                if(newMsg == "test"){
                    console.log("修改为test");
                }
            }
        },
        // 计算属性
        computed:{
            // 计算参数值
            computedValue: function(){
                // 初始化5
                var val = 5;
                var values = this.value + val;
                console.log(values);
                // 初始化的参数值+我们给定的一个五 结果为7
                return values;
            },
            //计算属性默认带一个get方法，那我们用计算属性也可以增加一个set方法
            newComputedValue:{
                get: function(){
                    return this.value;
                },
                set: function(newValue){
                    console.log("set 前: " + this.value);
                    this.value = newValue;
                    console.log("set 后：" + this.value);
                }
            }
        }
    })
</script>
</html>

计算属性(Computed)

简介：对于一些JS的表达式可以放在里面进行处理，并且内部可以封装set get方法。
前面提到跟方法(Method)相似。

跟方法的比较

优点

独特的缓存机制(多次使用只会执行一次)

缺点

由于独特缓存机制而会导致大部分缓存占用。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js的核心学习笔记 - 第五章侦听器和计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <!-- 计算属性 -->
        <div class="vue_computed">
            <span>message：{{message}}</span>
            <span>计算属性给出的结果：{{computedValue}}</span>
            <span>另一种方式的计算参数值：{{newComputedValue}}</span>
        </div>
    </div>
</body>
<script type="text/javascript">
    // 定义Vue
    var vue = new Vue({
        el: "#app",
        methods:{
            
        },
        // 数据
        data:{
            message: "一条默认消息",
            value: 2,
            msg: "消息"
        }
        // 计算属性
        computed:{
            // 计算参数值
            computedValue: function(){
                // 初始化5
                var val = 5;
                var values = this.value + val;
                console.log(values);
                // 初始化的参数值+我们给定的一个五 结果为7
                return values;
            },
            //计算属性默认带一个get方法，那我们用计算属性也可以增加一个set方法
            newComputedValue:{
                get: function(){
                    return this.value;
                },
                set: function(newValue){
                    console.log("set 前: " + this.value);
                    this.value = newValue;
                    console.log("set 后：" + this.value);
                }
            }
        }
    })
</script>
</html>

结束语

回到目录点我序章

Marinda_Speed

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js的核心学习笔记 - 第五章侦听器和计算属性教程

Vue.js的核心学习笔记 - 第五章侦听器和计算属性教程前言侦听器(watch)计算属性(Computed)结束语前言今天我们来学习一下Vue中的侦听器和计算属性：Watch(侦听器)、Computed(计算属性)侦听器和计算属性是Vue中比较常用的功能了。侦听器一般围绕着Vue中的动态数据是否响应式改变的监听方式。计算属性一般简化在网页中较为复杂的JavaScript表达式，计算属性在某种机制上跟方法(Method)相似，在下面我会介绍一下关于方法与计算属性的区别。侦听器(watc
复制链接

扫一扫

专栏目录