方法定义methods与计算属性computed与监听属性watch的使用与区别

已于 2024-07-20 16:21:46 修改
阅读量320 收藏
点赞数
文章标签： vue.js
于 2022-10-16 18:22:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tky666/article/details/127350104
版权

目录

注意：

计算属性：

computed与methods区别

监视属性

 深度监视

computed和watch之间的区别：

计算属性与监听属性区别总结

计算属性实现 模糊搜索+排序 小案例

注意：

监视属性：

  • immediate:true;可在页面刷新时就调用一次监视。
  • deep:true;可监视多层级数据（对像）的改变，深度监视。

计算属性：

<!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>计算属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>

    <script>
        Vue.config.productionTip = false 

        new Vue({
            el:'#root', 
            data:{ 
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName:{
                    get(){
                        return this.firstName + '-' + this.lastName
                        // 或操作后再return
                        // const str = this.firstName + '-' + this.lastName;
                        // 此处对str进行逻辑处理操作
                        // return str
                    },
                    set(value){
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>
</html>

总结：

计算属性：

  1. 定义：要用的属性不存在，需要通过已有属性计算得来。
  2. 注意：计算属性定义的变量(属性)是内部定义方法计算return的返回值（并不是方法本身）
  3. 原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。

计算属性什么时候被调用？（get函数什么时候执行？）

  1. 初次读取时会执行一次
  2. 当依赖的数据发生改变时会被再次调用

computed与methods区别

  • 优势：与methods实现相比，内部有缓存机制可复用，效率更高，调试方便。
  • 劣势：若缓存不需要使用时，计算属性造成的缓存所带来的性能消耗远比methods调用消耗大。
  • methods则是每次进行数据展示都需再次调用无缓存可复用。

缓存体现举例：

data: {
  firstName:"姓"
  lastName:"名"
},
methods无缓存举例：
<span>1、{{fullName()}}</span>
<span>2、{{fullName()}}</span>
<span>3、{{fullName()}}</span> // 页面三处需要显示，每次显示方法都会被调用

methods: {
  fullName() {
    console.log("调用了"); // 打印三次
    return this.firstName + this.lastName
  },
}

computed缓存优势举例：
<span>1、{{fullName}}</span>
<span>2、{{fullName}}</span>
<span>3、{{fullName}}</span> // 页面三处需要显示，只首次显示调用，数据复用，节省性能消耗

computed:{
  fullName:function(){
    console.log("调用了"); // 打印一次
    return this.firstName + this.lastName;
  }
},

计算属性应用场景：当一个属性值是通过其他属性值计算而来或同一个计算得来的数据在组件内多次展示时推荐使用

备注：

  • 计算属性最终会出现在vue上，直接读取使用即可
  • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
  • 如果计算属性确定不考虑修改，可以使用计算属性的简写形式

计算属性简写（无需使用set()属性时的写法）

new Vue({
    el:'#root', 
    data:{ 
        firstName:'张',
        lastName:'三'
    },
    computed:{
    	fullName(){ // 此处的 fullName 是computed定义的属性 并不是方法！！！
		    return this.firstName + '-' + this.lastName
    	}
    }
})

监视属性

<!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>监视属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气好{{info}}!</h2>
        <button @click="changeWeather">点击切换天气</button>
    </div>

    <script>
        Vue.config.productionTip = false 

        new Vue({
            el:'#root', 
            data:{ 
                isHot:true,
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽' 
                }
            },
            methods:{
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
            watch:{
                isHot:{
                    immediate:true, //初始化时让handler调用一下
                    //handler什么时候调用？当isHot发生改变时
                    handler(newValue,oldValue){ //新值 , 旧值
						console.log('isHot被修改了',newValue,oldValue)
					}
                },
                info:{
                    immediate:true, //初始化时让handler调用一下
                    //handler什么时候调用？当info发生改变时
                    handler(newValue,oldValue){ //新值 , 旧值
						console.log('info被修改了',newValue,oldValue)
					}
                }
            }
        })
    </script>
</body>
</html>

总结：

监视属性watch：

  1. 当被监视的属性变化时，回调函数自动调用，进行相关操作（data中的变量属性、计算属性都可被监听）；
  2. immediate:true属性作用 (刷新时）初始化时让handler调用一下
  3. 监视的属性必须存在，才能进行监视，若不存在也不会报错！！！
  4. 监视有两种写法：
    1. 创建Vue时传入watch配置
    2. 通过vm.$watch监视

动态变量监视：若要监视的属性不确定时或监视属性需要动态切换时，此写法应该可以将要监视的属性以变量形式传入

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

 深度监视

<!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>深度监视</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>a的值是:{{numbers.a}}</h3>
		<button @click="numbers.a++">点我让a+1</button>
		<h3>b的值是:{{numbers.b}}</h3>
		<button @click="numbers.b++">点我让b+1</button>
    </div>

    <script>
        Vue.config.productionTip = false 

        new Vue({
            el:'#root', 
            data:{ 
                isHot:true,
                numbers:{
                    a:1,
                    b:1,
                }
            },
            watch:{
                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
					handler(newValue,oldValue){
						console.log(newValue,oldValue,'numbers改变了'); // {__ob__: Observer} {__ob__: Observer} 'numbers改变了'
					}
                }
                //监视多级结构中某个属性的变化
				'numbers.a':{
					handler(newValue,oldValue){
						console.log(newValue,oldValue,'a被改变了'); // 2 1 'a被改变了'
					}
				}
            }
        })
    </script>
</body>
</html>

总结：

  • 深度监视：

    1. Vue中的watch默认不监测对象内部值的改变（一层）

    2. 在watch中配置deep:true可以监测对象内部值的改变（多层）

  • 备注：

    1. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

    2. 使用watch时根据监视数据的具体结构，决定是否采用深度监视

 监视属性简写

如果监视属性除了handler没有其他配置项的话，可以进行简写。

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            //正常写法
            isHot:{
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}, 
            //简写
            isHot(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue,this)
			}
        }
    })

    //正常写法
    vm.$watch('isHot',{
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    })
    //简写
    vm.$watch('isHot',function(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue,this)
    })
</script>

总结：

  • computed和watch之间的区别：

    • computed能完成的功能，watch都可以完成

    • watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

  • 两个重要的小原则：

    1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象

    2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

计算属性与监听属性区别总结

从上面的特点来说，我们可以得出结论：
1).计算属性的应用场景是计算的内容需要依赖多个属性的情况
侦听器的应用场景是计算的内容依赖一个属性的情况


2).计算属性缓存结果时每次都会重新创建变量
而侦听器是直接计算，不会创建变量保存结果
也就意味着，数据如果会反复的发生变化，计算很多次的情况下，计算属性的开销将会更大，也就意味着这种情况不适合使用计算属性，适合使用侦听器
那么，如果一个数据反复会被使用，但是它计算依赖的内容很少发生变化的情况下，计算属性会缓存结果，就更加适合这种情况。

3).watch可以进行异步操作（开启定时任务），computed因存在return则无法进行异步操作（开启定时任务）。


4).computed的结果是通过return返回的，而watch不需要return。


5).watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数。

补充：
watch只会监听数据的值是否发生改变，而不会监听地址的变化，如果需要监听引用类型的数据变化，需要深度监听：obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
在特殊的情况下(更改数组中的数据时，数组已经更改，但是视图没有更新)，watch无法监听数组的变化,更改数组必须要用splice()或者$set。

结论：
我们在计算开销比较大(计算次数多或者异步处理)的时候，会使用侦听器watch来得到计算结果。
而其他情况建议使用计算属性computed，因为缓存节省多次计算的性能

在大多数情况下，你应该优先考虑使用计算属性，因为它们更加简洁、易于维护，并且与 Vue 的响应式系统更紧密集成。只有在计算属性不适用时，才考虑使用 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>Document</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <div id="root">
    <h1>人员列表</h1>
    <input type="text" v-model="keyWord">
    <button @click="sortType = 2">升序</button>
    <button @click="sortType = 1">降序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
      <li v-for="(item,index) in filPersons" :key="item.id">
        {{item.id}}--{{item.name}}--{{item.age}}
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    let vm = new Vue({
      el: "#root",
      data: {
        keyWord: "",
        sortType: 0,
        persons: [
          { id: '001', name: '马冬梅', age: '18' },
          { id: '002', name: '周冬雨', age: '15' },
          { id: '003', name: '周杰伦', age: '13' },
          { id: '004', name: '温兆伦', age: '14' },
        ],
      },
      computed: {
        filPersons() {
          const arr = this.persons.filter((item) =>
            item.name.indexOf(this.keyWord) != -1
          )
          if (!!this.sortType) {
            arr.sort((a, b) =>
              this.sortType == 1 ? b.age - a.age : a.age - b.age
            )
          }
          return arr;
        }
      }
    })
  </script>
</body>

</html>
大脸胖柴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue】基础系列（三）计算属性-监视属性-双向绑定-示例-getter/setter显示与监听-计算属性缓存
YK菌的博客
01-18 3756
1. 计算属性 2. 监视属性
Vue.js计算属性computed与watch（5）
10-20
Vue.js 提供了两种强大的数据处理机制：计算属性（computed）和观察者（watch）。计算属性主要用于在模板中处理复杂逻辑，而观察者则用于监听和响应数据的变化。在这篇文章中，我们将深入探讨这两个概念，并通过实例...
vue -监视属性与计算属性
qq_52135740的博客
07-26 425
监视属性 监视属性watch： 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法： (1).new Vue时传入watch配置 (2).通过vm.$watch监视 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性</title> <!-- 引入Vue
Vuex的计算属性（computed 和 watch）与方法methods的区别？
weixin_58155690的博客
07-01 1186
Vuex的计算属性（computed 和 watch）与方法methods的区别
Vue的计算属性与watch
小hu同学
01-30 1158
一、Vue的计算属性是什么？ 它的计算属性是 computed 二、计算属性computed的特点有哪些？ computed是计算属性、实时响应的。计算属性会依赖于它所使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性； 如果它所依赖的这些属性值没有发生改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么它的性能就会比较高，所以Vue中尽可能的使用computed来代替watch。 <!DOCTYPE html> <html> <hea
监听器(watch)和计算属性(computed)的区别
G88888888p的博客
09-08 804
相同点：都可以对数据监听
vue中计算属性（computed）、methods和watched之间的区别
08-29
在Vue.js框架中，开发人员经常需要处理数据的计算、响应和监听，此时就涉及到`computed`、`methods`和`watch`这三个概念。本文将详细介绍它们之间的区别，并通过示例来帮助理解。 首先，计算属性（`computed`）是...
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
Vue计算属性与方法跟侦听器区别详解 Vue框架中，计算属性、方法和侦听器是三个常见的概念，但它们都有其特点和适用场景，下面我们将详细介绍它们的区别和使用场景。 一、计算属性（Computed Properties） 计算...
简单了解Vue computed属性及watch区别
11-19
在Vue中，`computed`属性和`watch`都是用来响应数据变化的机制，但它们之间存在显著的区别。以下是对这两个概念的详细解释： 1. **Computed属性**： - `computed`属性用于创建基于其他数据属性的计算属性。这些...
Vue的watch和computed方法的使用及区别介绍
10-18
在提供的示例代码中，我们创建了一个Vue实例，并在 `watch` 对象中定义了一个名为 `firstname` 的属性，这样每当 `firstname` 的值发生变化时，对应的函数就会被调用。函数接收两个参数：`newValue`（新值）和 `...
computed与watch的差异和区别
m0_52960319的博客
12-10 178
computed 实例 <script src="./js/vue.js"></script> <body> <div id="app"> <!-- 将计算属性渲染到视图层 --> {{follName}} </div> <script> //通过data数据的改变，改变结果 new Vue({ el:'#app
computed计算属性与methods
qq_66349348的博客
11-04 781
computed计算属性与methods
Vue中的监视属性watch和计算属性computed
m0_63836635的博客
08-21 935
vue中watch和computed复习
vue计算属性与监听属性的区别以及使用场景
sjjdjdj的博客
11-01 1668
watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作； computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算； 除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。Watch也可以检测computed属性。 参考链接：Vue学习（六）计算属性和侦听属性的区别以及应用场景 - 坤嬷嬷 - 博客园 ..
全面分析 Vue 的 computed 和 watch 的区别
前端人的博客
09-26 579
一、computed介绍 computed 用来监控自己定义的变量，该变量在 data 内没有声明，直接在 computed 里面定义，页面上可直接使用。 //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:function(){ return this.name } } 在输入框中，改变 name 值得时候，msg 也会跟着改变。这是因为 computed 监听自己的属性 msg，发现 name
Computed 和 Watch 的区别
热门推荐
m0_62118859的博客
04-27 1万+
1.computed计算属性： 作用： （1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。 （2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。 （3）不支持异步，如果有异步操作，无法监听数据的变化。 （4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。 （5）computed的值会默认走缓存，计
什么是API、computed和watch的区别及各个原理
weixin_46547740的博客
09-29 940
什么是API（通俗易懂） 官方回答： API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 简单通俗点来说： 举个例子：打开一个文件，将文件保存在硬盘上，要经过非常复杂的处理才能显示，这看似简单的操作其实在底层是非常复杂的 打开文件首先要扫面硬盘，找到文件的位置，然后从文件中读取一部分的数据，将数据放进I/O缓冲区，放进内存，这些数据
Vue 中 computed vs methods的区别
qq_45904018的博客
07-18 3374
vue.js 前端
vue 计算属性computed 和 methods 和 侦听属性（watch）
Tianxiaoxixi的博客
05-28 699
vue 计算属性computed 和 methods 和 侦听属性（watch）
10、Methods、 computed 、watch的区别
最新发布
05-12
在Vue.js中，Methods、Computed和Watch都是Vue实例中用于处理数据的属性。 1. Methods：是Vue实例中的方法，用于处理事件绑定、数据计算等。在Vue实例中，可以通过this调用Methods中的方法。Methods中的方法每次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值