【vue2】计算属性(computed)与侦听器(watch)详解

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

1d43f75f092a4050a8ce31e2d85f6868.gif

🥳博       主初映CY的前说(前端领域)

🌞个人信条想要变成得到中间还有做到

🤘本文核心计算属性与侦听属性的用法

目录文末有给大家准备好的Xmind思维导图

一、计算属性computed

①默认get()方法仅是获取值

②不仅仅是获取值还具有修改属性功能的写法

二、侦听器

①值类型

 ②引用类型 

总结计算属性与侦听属性的区别

一、计算属性computed

概念处理数据用来解决代码的冗余

用法当数据需要通过计算才能得到比如我们求商品的总和与全选功能

计算属性语法

①一定要在vue实例的对象computed中声明一个函数

②这个函数的返回值return就是计算属性的属性值

特殊的机制缓存机制提高性能

1计算属性在第一次使用时会执行一次函数体之后就会将返回值缓存起来

2下一次使用计算属性的时候不会执行这个函数而是直接从缓存中读取

3只有当计算属性中的数据发生变化时这个函数才会重新执行一次

写法有两种

①默认get()方法仅是获取值

语法格式

computed:{
变量名{
return this.//一大堆需要计算的数据比如翻转数组
}
}

看下面这个例子大家可以下直接cv到自己新的html中我的vue引入是在线的

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 

</head>

<body>
    <div id="app">
        <p></p>
        <!-- 翻转字符串 -->
        <p> {{ msg.split('').reverse().join('') }}</p>
        <p> {{revMsg}}</p>
        <p> {{revMsg}}</p>
    </div>
    `
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                msg: '我爱敲代码',
            },
            computed:{
                revMsg(){
                    console.log(1);
                return this.msg.split('').reverse().join('') 
                }
            }
        
        })
    </script>
</body>
</html>

上述代码实现的效果见下图

 看这个例子我们定义了一个 resMsg 属性计算方法并通过将字符串分隔(split()方法)此时已经成为了数组 [ "我", "爱", "敲", "代", "码" ]再翻转下,用字符转拼接作return的返回值给resMsg属性这样我们就可以配合我们的插值表达式进行解析变量了。

我们还发现了这样写实现了我们想要的效果减少了代码的冗余并且可以发现我们的resMsg调用不需要写()直接放进插值表达式就可被解析了。

我们也利用它的特殊机制了只是调用了一次之后的调用我们从缓存中获取到。

②不仅仅是获取值还具有修改属性功能的写法

语法

            computed: {
                变量名: {
                    get() {
                        return this.firstName + this.lastName
                    },
                    // set的形参是get的返回
                    set(val) {
                        console.log(val);
                    }
                }
            }

        1. 默认情况下计算属性只有get方法。只能获取不能修改。否则程序会报错

        2. 如果希望计算属性可以修改则可以实现set方法

看下面这个例子大家可以下直接cv到自己新的html中我的vue引入是在线的

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 

</head>
<body>
    <!-- HTML结构 -->
    <div id="app">
        全选<input type="checkbox" v-model="allCheck" >
        <ul>
            <li v-for="(item,index) in list">
                <!-- v-model双向绑定 当时单选框表单元素无条件用v-model!的时候这个就是选中状态-->
                <input type="checkbox"  v-model="item.select">{{item.name}} <label for=""></label>
            </li> 
        </ul>
    </div>

    <script>
        /* 
        1. 默认情况下计算属性只有get方法。只能获取不能修改。否则程序会报错
        2. 如果希望计算属性可以修改则可以实现set方法
        */
        /* 创建vue实例 */
        var app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                active:0,
                list: [
                    { name: '前端', select: false },
                    { name: 'UI', select: false },
                    { name: 'Java', select: false },
                    { name: 'php', select: false },
                    { name: 'python', select: false },
                    { name: 'c', select: false },
                    { name: '测试', select: false },
                    { name: '产品', select: false },
                ]
            },
            //计算属性
            computed: {
                allCheck:{
                    get(){
                    // every返回是布尔值一假则假全真为真
                    //some 返回的也是布尔值当有一个元素符合条件的时候返回true
                    return this.list.every(item=>item.select)
                    },
                    set(val){
                        console.log(val);
                        this.list.forEach(element => {
                            element.select=val
                        });
                    }

                }
            }
        })
    </script>
</body>

</html>

下面是上述代码实现的效果图

核心代码

实现上述例子的思路是

 例子分析这个例子难点在于怎么通过获取到各个单选框的数据与怎么与全选框进行绑定的。

  1. 看到表单项我们获取数据用v-model实现双向绑定。这样我们就可达到修改了之后就可以实时得到反馈
  2. 遍历我们的列表将list渲染出来
  3. 定义一个计算属性方法 allCheck(){} 在get() 中开始用every()方法做判断every方法用于遍历数组当数组元素都是true的时候返回true否则返回false)用于小选控制全选当我全部选中的时候return的值就是我们allCheck的属性值。
  4. 下面的set()用于全选控制小选我们的allCheck是绑定在全选框上的当我们做出改变修改的时候会触发allCheck的set()方法当我选中全选框的时候此时的allCheck是true在set()中作为val的实参传进去了因此列表每一项都是true选中状态了

二、侦听器

概念监听data中的某一个数据变化

写法有两种

①值类型

            watch:{
                '要侦听的属性名'(newVal,oldVal){ }
            }

兄弟姐妹们上个例子大家可以下直接cv到自己新的html中我的vue引入是在线的

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 

</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        用户: <input type="text" placeholder="请输入用户名" v-model="username"><span></span>
        <br>
        密码: <input type="text" placeholder="请输入密码" v-model="password">
    </div>

    <script>

        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                username: '',
                password: ''
            },
            methods: {
                fn() {
                    return setTimeout(() => { console.log("这是异步操作") }, 1000)
                }
            },
            //侦听器
            watch: {
                // 一个监听器检测检测一项东西前面新的后面之前数据
                username(newIfo, oldInfo) {
                    console.log('当前值为', `${newIfo}`, '之前值为', `${oldInfo}`);
                    if (newIfo === 'admin') {
                        console.log('当前用户名不可取请输入其他用户名')
                        this.fn()
                    }
                }
            }
        })



    </script>
</body>

</html>

 核心代码

我们运行下查看效果 

可以看到当我们username的时候浏览器是检测到了我们输入的是admin就弹出了相应的提示('当前用户名不可取请输入其他用户名),同时我们在值类型在写了一个fn()里面是个异步函数也可以被执行因此侦听属性的值类型可以执行异步操作。

 ②引用类型 

watch:{
data属性(new,old){
deeptrue//开启深度侦听
handler(){
//写需要处理的操作
}
}}
<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">

        <input type="text" v-model="obj.name">
        <input type="text" v-model="obj.age">

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                obj: {
                    name: "初映",
                    age: 22,
                    fn() {
                        return setTimeout(() => { console.log("这是异步操作") }, 1000)
                    }
                }
            },

            watch: {
                obj: {
                    deep: true,
                    immediate: false,//当页面加载完成马上调用一次记录为新值救值必须删除
                    handler(newVal, oldVal) {
                        console.log(`新的值为` + newVal.name, `旧值为` + oldVal.name);
                        this.obj.fn()
                    },
                }
            },
            methods: {}
        })
    </script>
</body>

</html>

核心代码

 运行结果

 可以看到我们的深度监听侦听到了引用类型数值发生了改变我们也是实时侦听到了数据同时深度侦听也可以支持异步操作。

总结计算属性与侦听属性的区别

(1)功能不同计算属性用于解决模板冗余问题。侦听器侦听data中某i一个数据变化

(2)计算属性具有缓存机制侦听器没有缓存机制

(3)计算属性不支持异步操作侦听器支持异步操作

(4)计算属性可以给vue新增属性侦听器是 data中已有属性

(5)计算属性只要使用了就会执行一次侦听器默认只有第一次改变才会执行

下面是给兄弟姐妹准备好的Xmind图总结

下篇文章将讲解【vue cli脚手架 与VueTools工具】的使用本专栏将持续更新欢迎关注~

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: vue
返回列表

上一篇：Curator实现分布式锁（可重入 不可重入 读写 联锁 信号量 栅栏 计数器）

下一篇：三子棋小游戏

“【vue2】计算属性(computed)与侦听器(watch)详解” 的相关文章

[VueJsDev] 日志 - 更新日志1年前 (2023-02-02)
Vue 基础之侦听器1年前 (2023-02-02)
Nuxt.js 教程 点亮你的Vue技术栈1年前 (2023-02-02)
vue.js客服系统实时聊天项目开发（四）引入iconfont图标代码1年前 (2023-02-02)
JAVA单商户商城系统源码,前(vue)后(SpringBoot)端分离,支持多平台(h5,小程序,app)1年前 (2023-02-02)
【html页面引入vue页面】使用httpVueLoader.js让html页面引入vue文件当组件使用，html组件化开发1年前 (2023-02-02)
Vue项目解决跨域的两种方法1年前 (2023-02-02)
VueUse（中文）——简介1年前 (2023-02-02)
Vue3+TypeScript系统学习(十五) - 详解Vue3 Composition API（二）1年前 (2023-02-02)
Vue 3.0源码系列之ref、toRef、toRefs1年前 (2023-02-02)

阿里云国际版