Vue（一）5.computed 与 watch

最新推荐文章于 2023-12-06 09:20:08 发布
最新推荐文章于 2023-12-06 09:20:08 发布
阅读量122 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42809433/article/details/107786156
版权

Vue.js

文章目录

computed

在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况，vue 定义了一个专门用来处理这种派生数据的选项：computed

<div id="app">
  <label><input type="radio" v-model="gender" value="" /> 所有</label>
  <label><input type="radio" v-model="gender" value="男" /> 男</label>
  <label><input type="radio" v-model="gender" value="女" /> 女</label>
  <hr>
  <ul>
    <li v-for="user of showUsers">
      {{user.username}}
    </li>
  </ul>
</div>

let app = new Vue({
  el: '#app',
  data: {
    gender: '',
    users: [
      {id: 1, username: 'baogege', gender: '男'},
      {id: 2, username: 'mt', gender: '男'},
      {id: 3, username: 'haigege', gender: '男'},
      {id: 4, username: 'zMouse', gender: '男'},
      {id: 5, username: 'reci', gender: '女'},
      {id: 6, username: 'lisi', gender: '女'}
    ]
  },
  computed: {
    showUsers() {
      return this.gender === '' ? [...this.users] : this.users.filter(user=>user.gender===this.gender);
    }
  }
});
  • 计算属性类似 getter 和 setter ，当访问某个计算属性的时候，就会调用 computed 中同名的函数，函数的返回值将作为该计算属性的值
  • 计算属性的值依赖计算函数中依赖的其它响应式数据
  • 计算属性的值可以缓存，如果依赖的其它响应式数据没有发生变化，但多次访问该计算属性，得到结果是最近一次变化产生的值（相对于调用方法得到结果在某些时候性能要好一些）
<div id="app">
  <p>{{now}}</p>
  <button @click="showDate=true">showDate</button>
  <p v-if="showDate">{{now}}</p>
</div>

let app = new Vue({
  el: '#app',
  data: {
		showDate: false
  }
  computed: {
    now() {
      return Date.now();
    }
  }
});

计算属性的 getter 与 setter

默认情况下，计算属性函数是一个 getter 函数，如果计算属性只有 get 需求，则可以简写

computed: {
  now() {
    return Date.now();
  }
  // 等于
  now: {
    get() {
      return Date.now();
    }
  }
}

但是有的时候，这种派生数据既有 get 需求，也有 set 需求

<div id="app">
  <label><input type="radio" v-model="gender" value="" /> 所有</label>
  <label><input type="radio" v-model="gender" value="男" /> 男</label>
  <label><input type="radio" v-model="gender" value="女" /> 女</label>
  <hr>
  <ul>
    <li v-for="user of showUsers">
      <input type="checkbox" v-model="user.checked" />
      {{user.username}}
    </li>
  </ul>
  <label><input type="checkbox" v-model="checkAll">全选</label>
</div>

let app = new Vue({
  el: '#app',
  data: {
    gender: '',
    users: [
      {id: 1, username: 'baogege', gender: '男',checked:false},
      {id: 2, username: 'mt', gender: '男',checked:false},
      {id: 3, username: 'haigege', gender: '男',checked:false},
      {id: 4, username: 'zMouse', gender: '男',checked:false},
      {id: 5, username: 'reci', gender: '女',checked:false},
      {id: 6, username: 'lisi', gender: '女',checked:false}
    ]
  },
  computed: {
    showUsers() {
      return this.gender === '' ? [...this.users] : this.users.filter(user=>user.gender===this.gender);
    },
    checkAll: {
      get() {
        return this.users.every(user=>user.checked);
      },
      set(newValue) {
        this.users = this.users.map(user=>{
          return {
            ...user,
            checked: newValue
          }
        });
      }
    }
  }
});

watch

有的时候，我们需要的派生数据是通过异步的方式处理的，这个时候，计算属性就不太好用了（不能处理异步）。

我们可以使用另外一个选项：watch

<div id="app">
  <input type="text" v-model="keyWord">
  <hr>
  <ul>
    <li v-for="user of showUsers">
      {{user.username}}
    </li>
  </ul>
</div>

let app = new Vue({
  el: '#app',
  data: {
    keyWord: '',
    users: [
      {id: 1, username: 'baogege', gender: '男',checked:false},
      {id: 2, username: 'mt', gender: '男',checked:false},
      {id: 3, username: 'haigege', gender: '男',checked:false},
      {id: 4, username: 'zMouse', gender: '男',checked:false},
      {id: 5, username: 'reci', gender: '女',checked:false},
      {id: 6, username: 'lisi', gender: '女',checked:false}
    ],
    showUsers: []
  },
  watch: {
    keyWord(newVal, oldVal) {
      // 模拟网络请求
      setTimeout(_=>{
        this.showUsers = this.users.filter(user=>user.username.includes(newVal));
      }, 1000);
    }
  }
});

多层监听

对于多层数据的监听，可以使用字符串+点语法

watch: {
  'a.b.c': function() {
    //...
  }
}

深度监听

默认情况下，watch 只对当前指定的值进行一层监听，如果需要对对象进行深度监听

watch: {
  a: {
    handler() {
      console.log('a deep');
    },
    deep: true
  }
}

个人理解

不使用计算属性的时候，因为不想更改源数据，只好在data()里面增加一个showUsers:users，然后在methods对派生数据showUsers进行更改（更改是通过判断和过滤器对源数据进行筛选来实现）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .current {
            background: yellow;
        }
    </style>
</head>
<body>

    <div id="app">
        <input type="button" value="所有" :class="{'current': gender === ''}" @click="changeGender('')" />
        <input type="button" value="男" :class="{'current': gender === '男'}" @click="changeGender('男')" />
        <input type="button" value="女" :class="{'current': gender === '女'}" @click="changeGender('女')" />
        <hr>
        <ul>
            <li v-for="user of showUsers">
                {{user.username}} - {{user.gender}}
            </li>
        </ul>
    </div>

    <script src="js/vue.js"></script>
    <script>

        let users = [
            {id: 1, username: 'baogege', gender: '男'},
            {id: 2, username: 'mt', gender: '男'},
            {id: 3, username: 'haigege', gender: '男'},
            {id: 4, username: 'zMouse', gender: '男'},
            {id: 5, username: 'reci', gender: '女'},
            {id: 6, username: 'lisi', gender: '女'}
        ];

        let app = new Vue({
            el: '#app',
            data: {
                gender: '',
                // 源数据：尽量不要更改
                users,
                // 派生数据：尽量将源数据的更改转化为派生数据的更改
                showUsers: users
                //showUsers后面不能跟users，
            },
            methods: {
                changeGender(gender) {
                    this.gender = gender;

                    if (this.gender !== '') {
                        this.showUsers = this.users.filter( user => user.gender === this.gender );
                    } else {
                        this.showUsers = this.users;
                    }

                }
            }
        });

    </script>

</body>
</html>

使用计算属性后，不用在data里面新增派生数据了，直接在computed使用get()进行筛选，只有get()的情况下可省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .current {
            background: yellow;
        }
    </style>
</head>
<body>

    <div id="app">
        <input type="button" value="所有" :class="{'current': gender === ''}" @click="changeGender('')" />
        <input type="button" value="男" :class="{'current': gender === '男'}" @click="changeGender('男')" />
        <input type="button" value="女" :class="{'current': gender === '女'}" @click="changeGender('女')" />
        <hr>
        <ul>
            <li v-for="user of showUsers">
                {{user.username}} - {{user.gender}}
            </li>
        </ul>
    </div>

    <script src="js/vue.js"></script>
    <script>

        let app = new Vue({
            el: '#app',
            data: {
                gender: '',
                // 源数据
                users: [
                    {id: 1, username: 'baogege', gender: '男'},
                    {id: 2, username: 'mt', gender: '男'},
                    {id: 3, username: 'haigege', gender: '男'},
                    {id: 4, username: 'zMouse', gender: '男'},
                    {id: 5, username: 'reci', gender: '女'},
                    {id: 6, username: 'lisi', gender: '女'}
                ]
            },
            methods: {
                changeGender(gender) {
                    this.gender = gender;
                }
            },
            // 该属性是通过计算得到的（get，set逻辑）
            // 当计算属性依赖的数据发生了变化，计算属性就会重新计算值
            computed: {
                // showUsers: {
                //     get() {
                //         if (this.gender === '') {
                //             return this.users;
                //         } else {
                //             return this.users.filter( user => user.gender === this.gender );
                //         }
                //     }
                // },

                // 当一个计算属性只有get的时候，可以直接写成一个函数
                //但是computed不能理解为函数，get和set只是computed里面的一个属性
                //
                showUsers() {
                    if (this.gender === '') {
                        return this.users;
                    } else {
                        return this.users.filter( user => user.gender === this.gender );
                    }
                }
            }
        });

    </script>

</body>
</html>

对于set，当

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .current {
            background: yellow;
        }
    </style>
</head>
<body>

    <div id="app">
        <input type="button" value="所有" :class="{'current': gender === ''}" @click="changeGender('')" />
        <input type="button" value="男" :class="{'current': gender === '男'}" @click="changeGender('男')" />
        <input type="button" value="女" :class="{'current': gender === '女'}" @click="changeGender('女')" />
        <hr>
        <ul>
            <li v-for="user of showUsers">
                <input type="checkbox" v-model="user.checked"> {{user.username}} - {{user.gender}}
            </li>
        </ul>
        <hr />
        <input type="checkbox" v-model="checkedAll"> 全选
    </div>

    <script src="js/vue.js"></script>
    <script>

        let app = new Vue({
            el: '#app',
            data: {
                gender: '',
                // 源数据
                users: [
                    {id: 1, username: 'baogege', gender: '男', checked: false},
                    {id: 2, username: 'mt', gender: '男', checked: true},
                    {id: 3, username: 'haigege', gender: '男', checked: false},
                    {id: 4, username: 'zMouse', gender: '男', checked: false},
                    {id: 5, username: 'reci', gender: '女', checked: false},
                    {id: 6, username: 'lisi', gender: '女', checked: false}
                ]
            },
            methods: {
                changeGender(gender) {
                    this.gender = gender;
                }
            },
            computed: {
                showUsers: {
                    get() {
                        if (this.gender === '') {
                            return this.users;
                        } else {
                            return this.users.filter( user => user.gender === this.gender );
                        }
                    }
                },
                checkedAll: {
                    get() {
                        return this.users.every( user => user.checked );
                    },
                    set(newVal) {
                        // console.log(newVal);
                        this.users = this.users.map(user => {
                            return {
                                ...user,
                                checked: newVal
                            }
                        });
                    }
                }
            }
        });
    </script>

</body>
</html>
onjulythe17th
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中的computed 和 watch
baidulixueqin的博客
04-05 3289
computed 和 watch Vue2 options文档 响应式原理options.data 1.data会被Vue监听 2.会被Vue实例代理,vm就是data的代理 3.每次对data的读写都会被Vue监控。不管你是读写它的本身还是读写代理都会被监控，data对象会被篡改,本来的n会变成get n和set n。 4.Vue会在data变化时更新UI data变化时除了更新UI，还能做些啥？ 一.Computed 计算属性 1.用途:被计算出来的属性就是计算属性 2.缓存： 如果依赖的属性没有
vue中computed与watch的使用
此鱼非闲鱼也的博客
04-25 277
1、事件函数 vue中使用事件指令定义事件，@事件名="执行事件的函数";或者@事件名="执行事件的函数(参数)"; 在vue实例中事件函数是写在methods中的，如methods:{ 事件函数名(参数){ //函数体 }} 注意：methods是与el和data同级的属性。 看看示例： 页面一开始打开先显示原始数据，三个按钮"全部"或"男"或"女"按钮后，筛选对应的数据显示到页面。 <...
5、计算属性computed
u012153127的博客
12-11 124
computed computed是一种基于响应式依赖进行缓存的。示例： <body> <div id="app" v-bind:title="message"> <div>{{random2}}</div> <div>{{random2}}</div> <div>{{random()}}</div> <div>{{random()}}</div> <
小程序动态改变性别
Wang_MengHan的博客
12-10 1703
效果： wxml： <form bindsubmit="formSubmit"> <view class="dl"> <view class="dt">性别</view> <view class="twoViewSex"> <picker bindchange="pickSex" value="{{ user_gender }}" class="sex" range="{{ columns }}
前端Vue日常工作中--computed与watch区别
最新发布
前端工作学习中
12-06 1380
computed 和 watch 都是 Vue.js 中用于监听数据变化并执行相应操作的功能，但它们之间有一些关键的区别。通常情况下，使用计算属性更简单且具有更好的性能。
Vue.js计算属性computed与watch（5）
10-20
Vue.js 提供了两种强大的数据处理机制：计算属性（computed）和观察者（watch）。计算属性主要用于在模板中处理复杂逻辑，而观察者则用于监听和响应数据的变化。在这篇文章中，我们将深入探讨这两个概念，并通过实例...
vue中watch和computed的区别与使用方法
10-14
在 Vue 中，`watch` 和 `computed` 都是用来处理数据变化的机制，但它们之间存在显著的差异和特定的使用场景。 **计算属性（Computed）** 计算属性是基于它们的响应式依赖进行缓存的。这意味着，当你在模板中使用一...
Vue中computed及watch区别实例解析
10-15
在Vue.js框架中，`computed`和`watch`都是用于处理数据变化的机制，但它们在功能和使用场景上存在显著的区别。以下是关于这两个概念的详细解析。 **计算属性（Computed）** 计算属性`computed`主要用于创建基于现有...
深入浅析Vue中的 computed 和 watch
08-27
在Vue.js框架中，computed（计算属性）和watch（侦听器）是两个非常重要的概念。它们都是响应式数据处理的重要工具，但各自有着不同的用途和特性。本文将深入浅析Vue中的computed和watch，使读者能够更好地理解和...
Vue的data、computed、watch源码浅谈
10-15
在Vue源码中，`computed`属性的实现涉及到`Watcher`类，`Watcher`对象记录了计算属性与依赖的关系。当计算属性的值被访问时，会创建一个新的`Watcher`实例，并在`get`时收集依赖；在`set`时，会触发依赖更新，确保...
Vue(一)1.基础
qq_42809433的博客
07-31 911
Vue.js 文章目录Vue.jsvue.js渐进式Vue 核心引入组件组件基本分类根组件的创建可复用的功能组件组件内容渲染templateelrender使用 $mount 方法延迟 `Vue` 实例的挂载组件中的数据（状态）datadata 的访问模板语法Mustache（双大括号，大胡子） 语法插值表达式数据到视图的更新检测变化的注意事项扩展使用 Vue.set 方法添加新数据 vue.js [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXDNylyT-1596187
Vue（路由）4.动态路由
qq_42809433的博客
08-17 758
vue-router 文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params 动态路由 有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理 ... { path: '/item/:itemId', nam
vue-element-admin初次安装过程中的错误：spawn cmd enoent/error code elifecycle/This is probably not a problem wi
qq_42809433的博客
07-31 726
vue-element-admin按照如下步骤安装然后到npm run dev的时候就报错了。。 20 error code ELIFECYCLE 21 error errno 1 22 error vue-element-admin@4.4.0 dev: `vue-cli-service serve` 22 error Exit status 1 23 error Failed at the vue-element-admin@4.4.0 dev script. 23 error This is prob
Vue（路由）3.devTools
qq_42809433的博客
08-17 592
vue-devTools 文章目录vue-devToolsvue-devTools安装步骤 vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 参考：https://github.com/vuejs/vue-devtools Vue.js-devtools，点击下载 安装步骤 1、首先进入浏览器设置，点击 扩展程序 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接
vue-element-admin修改.eslintignore来避免Use // eslint-disable-next-line to ignore the next line.
qq_42809433的博客
08-05 571
报错： You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. 有的文章说要在build中注释掉配置，好像vue-element-admin里面build是没啥文件的（就一个index），要用.eslintignore才行
Vue（路由）2.异步请求
qq_42809433的博客
08-17 360
vue-router 文章目录vue-router异步请求axios请求跨域vue.config.js跨域请求代理配置 异步请求 在实际的应用开发中，与后端交互，进行异步请求是很常见的需求 axios npm i axios 请求 // home.vue <template> <div class="home"> Home </div> </template> <script> import axios from 'axios'
Vue（路由）5.queryString
qq_42809433的博客
08-17 340
vue-router 文章目录vue-routerqueryString$route.query编程式导航路由组件的复用watch queryString 有的时候，我们可能也会用到 queryString <select v-model="sort"> <option value="desc">从高到低</option> <option value="asc">从低到高</option> </select> $route.q
Vue(一)3.事件
qq_42809433的博客
08-03 233
Vue.js 文章目录Vue.js事件组件的 `methods` 选项通过内联方式绑定事件处理函数事件修饰符.stop.prevent.capture.self.once.passive按键修饰符.keyCode.enter.down.exact原生事件 事件 在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @ <组件 v-on:事件名称="表达式" /> <组件 @事件名称="表达式" /> 组件的 methods 选项 在组件选项中，提供了一个 methods
Vue(一)2.指令
qq_42809433的博客
08-03 165
Vue.js 文章目录Vue.js指令内容输出v-textv-cloakv-htmlv-oncev-pre逻辑处理v-showv-ifv-else / v-else-if循环与列表v-for:key属性绑定v-bind缩写样式styleclass单向数据流v-model表单`text` 和 `textarea``checkbox` 和 `radio``select`指令修饰符.lazy.number.trim自定义指令注册指令全局指令局部指令指令生命周期（钩子函数）案例官网的例子扩展：自定义拖拽指令 指令
Vue面试精华：computed与watch的区别与应用场景
本文档聚焦于Vue中的关键概念——`computed`和`watch`的区别及其适用场景。 **Computed属性：** Computed属性是Vue中的一种计算属性，它依赖于其他数据属性（如数据对象的其他字段），并且具有缓存功能。当这些依赖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值