Vue的监视属性watch、computed和watch之间的区别

最新推荐文章于 2024-08-14 18:44:30 发布
最新推荐文章于 2024-08-14 18:44:30 发布
阅读量189 收藏 3
点赞数 4
分类专栏： Vue 文章标签： vue.js 监视属性 watch 监视属性的简写 computed和watch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy8623977/article/details/131630686
版权

目录

1. 监视属性

  • 监听对象: 监视属性可以监听普通属性和计算属性
  • 调用时间: 当监听的属性发生改变时。handler被调用
  • immediate: true: 是否初始化时让handler调用一下。此时oldVlue为undefined
  • deep: false: watch默认不监测对象内部值的改变。如存在outerKey.innerKey，当监测outerKey时，innerKey改变不会调用handler
  • 如存在outerKey.innerKey, 单独监测innerKey的key用: ‘outerKey.innerKey’

使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>今天天气很{{info}}</h2>
    <!-- 绑定事件的时候：@xxx="yyy"时yyy可以写一些简单的语句，如@click="isHot = !isHot" -->
    <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            isHot: {
                deep: false,
                immediate: true,
                // 可以只需要newValue参数
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue)
                }
            }

        }
    })

    vm.$watch('info', {
        immediate: true,
        handler(newValue, oldValue) {
            console.log('info被修改了', newValue, oldValue)
        }
    })

</script>


</body>
</html>

显示效果如下

显示效果

2. 监视属性的简写

当监测的属性，只有handler时，可以简写

            isHot(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue)
            }

    vm.$watch('info', (newValue, oldValue) => {
        console.log('info被修改了', newValue, oldValue)
    })

3. computed和watch之间的区别

区别:

  1. computed能完成的功能，watch都可以完成
  2. watch能完成的功能，computed不一定能完成，例如：watch可以用setTimeout进行异步操作。但computed用setTimeout进行异步操作return值时，计算属性接收不到

两个重要的小原则：

  1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
  2. 所有不被Vue所管理的函数（setTimeout的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
    因为箭头函数没有this，就向外层找，最后找到的this指向还是vm或组件实例对象
Bulut0907
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中computed和watch区别
小陈的博客
10-30 1万+
watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。当依赖的值变化时，在watch中，可以做一些复杂的操作，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
Vue的watch和computed方法的使用及区别介绍
10-18
在Vue中，`watch` 和 `computed` 都是用来响应数据变化的机制，但它们之间存在显著的区别。本文将深入探讨这两者的用法和差异。 首先，让我们来看看 `watch`。`watch` 是Vue中用于监听数据变化的工具，它可以执行...
vue的计算属性computed和监视属性watch的区别
weixin_45653441的博客
07-04 191
vue
Vue中的监视属性watch和计算属性computed
m0_63836635的博客
08-21 941
vue中watch和computed复习
vue 的计算属性（computed）和侦听器（watch）
青蛙king的博客
10-27 3492
目录 一、计算属性（computed） 1、计算属性的特点 2、计算属性的原理 3、computed与methods的区别 二、侦听器（wacth） 1、侦听器的特点 2、使用 wacth 的注意事项 3、wacth 的两个属性 4、watch 与 $watch 的关系 5、watch 的使用案例 三、计算属性 和 侦听器 适用场景 四、推荐几篇关于 computed 和 watch 的原理的深度解析好文 一、计算属性（computed） 1、计算属性的特点 支持数据缓....
vue中计算属性computed和监听器watch的区别
m0_57469571的博客
11-14 1718
vue中计算属性computed和监听器watch的区别
Vue 计算属性computed 和 watch
weixin_54976447的博客
06-03 235
(1) computed 复杂写法: get() 和 set()(2) computed 计算数据简写。
Vue计算属性computed和监听watch
黎小小的博客
10-21 348
初衷：为了解决模块里面有太多的计算逻辑让模版难以维护。计算属性可以依赖一个数据也可以依赖多个数据的变化使用场景：商品单价和数量改变时，商品总价更改。如果写在方法里面，那么每次修改商品单价和数量时都会去调用这个方法，这种每次去调用都会消耗一部分性能，对页面渲染并不友好。所以就可以使用计算属性，计算属性可以使用缓存。
Vue2-computed和watch区别（通俗易懂）
qq_63943166的博客
01-26 1329
watch和computed的区别
Vue计算属性computed和监视属性watch
yyclassmvp的博客
12-23 204
计算属性computed和监视属性watch 1 计算属性computed基本应用 1.1 完整写法 computed: { chekedTotle: { get() { return //值 }, set(value) { //逻辑 }, }, } chekedTotle为计算属性的名字,不能与data中的值重名 get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值,
vue中watch和computed的区别与使用方法
10-14
在 Vue 中，`watch` 和 `computed` 都是用来处理数据变化的机制，但它们之间存在显著的差异和特定的使用场景。 **计算属性（Computed）** 计算属性是基于它们的响应式依赖进行缓存的。这意味着，当你在模板中使用一...
通过实例解析Vue computed属性及watch区别
10-15
在 Vue 中，`computed` 属性和 `watch` 都是用来响应数据变化并执行相应操作的机制，但它们之间存在显著的区别。以下是对这两个概念的详细解释以及它们在实际应用中的用法。 **Vue computed属性** `computed` 主要...
详解Vue中的watch和computed
01-22
对于使用Vue的前端而言，watch、computed和methods三个属性相信是不陌生的，是日常开发中经常使用的属性。但是对于它们的区别及使用场景，又是否清楚，本文我将跟大家一起通过源码来分析这三者的背后实现原理，...
详解vue中computed 和 watch的异同
08-30
在 Vue 中，computed 和 watch 是两个非常重要的概念，它们都可以用来观察页面的数据变化，但是它们之间有着很大的区别。 首先，computed 是一个计算属性，它可以根据依赖项自动更新。例如，在上面的例子中，我们...
Vue（四）——总结
最新发布
初叙
08-14 171
vue总结
vue选中下拉框数据，但是值没有填充到框内
m0_68154641的博客
08-14 71
element-ui选中下拉框数据，但是值没有填充到框内
Vue和Jquery的区别
MarisTang的博客
08-14 550
Vue.js 适用于现代化、复杂的前端应用开发，特别是单页面应用（SPA），而 jQuery 则更适合简单、传统的 Web 开发需求。Vue 提供了更强大的数据绑定和组件化能力，而 jQuery 更加轻量和简单，适合快速开发。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 429
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
vue项目中的计算属性computed和监听属性watch怎么使用
04-23
计算属性computed可以根据已有的数据，动态地计算出新的数据，并将计算结果返回。在Vue的组件实例中，可以通过在computed选项中定义计算属性。比如，我们可以定义一个计算属性fullName，用于拼接firstName和lastName： ``` <template> <div> First name: <input v-model="firstName"><br> Last name: <input v-model="lastName"><br> Full name: {{ fullName }} </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName() { return this.firstName + ' ' + this.lastName } } } </script> ``` 监听属性watch可以在数据变化时执行自定义的回调函数。在Vue的组件实例中，可以通过在watch选项中定义监听属性。比如，我们可以定义一个监听属性firstName，用于在firstName变化时更新fullName： ``` <template> <div> First name: <input v-model="firstName"><br> Last name: <input v-model="lastName"><br> Full name: {{ fullName }} </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe', fullName: '' } }, watch: { firstName(val) { this.fullName = val + ' ' + this.lastName } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值