计算属性(computed)和侦听器(watch)

您所在的位置：网站首页 › vue的计算属性和侦听器区别 › 计算属性(computed)和侦听器(watch)

计算属性(computed)和侦听器(watch)

2024-07-14 22:11| 来源: 网络整理| 查看: 265

文章目录 1.计算属性1.1 什么是计算属性1.2 计算属性的作用1.3 vue2 计算属性怎么用？1.4 vue3 的计算属性怎么用 2.侦听器(watch)3.computed和watch选择4.什么时候用箭头函数什么时候用普通函数

1.计算属性 1.1 什么是计算属性

（1）Vue的原有属性：data对象当中的属性就可以理解为Vue的原有属性（2）计算属性：使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性

1.2 计算属性的作用

（1）代码得到了复用（2）代码更加便于维护（3）代码的执行效率高了（可以走缓存）

1.3 vue2 计算属性怎么用？

（1）语法格式：vue对象中需要一个新的配置项computed

computed ：{ // 这是一个计算属性计算属性1：{ // 当读取计算属性1的值的时候，getter方法被调用 get(){ }, // 当修改计算属性1的值的时候，setter方法被自动调用 set(val){ } } }

补充：get方法的调用时机包括两个 ①第一个时机：第一次访问这个属性的时候 ②第二个时机：该计算属性所关联的Vue原有属性的值发生变化时，get方法会被重新调用一次 ③其他情况会走缓存（2）代码示例：

{{msg}} 输入的信息：反转的信息：{{reversedInfo}} const vm =new Vue({ el: '#app', data :{ msg :'计算属性-反转字符串案例', info :'' }, computed :{ reversedInfo:{ get(){ console.log('getter 被调用了'); return this.info.split('').reverse().join('') }, set(val){ // val就是修改计算属性后的值 console.log('setter 被调用了'); } } } } )

（3）计算属性的简写形式(set方法一般不使用，如果只使用get方法可以使用简写形式)

computed : { reversedInfo(){ console.log('getter 被调用了'); return this.info.split('').reverse().join('') } } 1.4 vue3 的计算属性怎么用 import {computed} from ‘vue’ //computed 是一个组合式的 API。 setup(){ // 简写 let reversedName = computed(()=>{ // 这是一种简写形式，如果你只需要使用计算属性的get方法的话，可以这样简写 }) // 完整写法 let reversedName = computed({ get(){ // 读取计算属性的值的时候执行 }, set(value){ // 当修改计算属性的值的时候执行 } }) } 2.侦听器(watch)

（1）watch可以监视多个属性，监视哪个属性，就把这个属性的名字拿过来即可，可以监视vue的原有属性，也可以监视计算属性。被监视的数据需要具有响应式。

{{msg}} 数字： const vm = new Vue({ el: '#app', data: { msg: '侦听属性的变化', number: 0 }, computed: { hehe() { return 'haha' + this.number; } }, watch: { number: { //初始化的时候，调用一次handler方法,默认是false // immediate:true, // 这里有一个固定的写法，方法名必须叫做：handler // 当被监视的属性发生变化的时候，handler就会自动调用一次 // handler方法上有两个参数： // 第一个参数newValue(属性值改变之后的新值),第二个参数是oldValue(属性值改变之后的旧值) handler(newValue, oldValue) { console.log(newValue, oldValue) } } , // 也可以监视计算属性 hehe: { handler(a, b) { console.log(a, b) } } } })

（2）immediate：表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler

watch: { number: { immediate:true, handler(newValue, oldValue) { console.log(newValue, oldValue) } }

（3）如果监视的属性具有多级结构，一定要添加单引号：如：‘a.b’

数字： const vm = new Vue({ el: '#app', data: { a: { b: 0 } }, watch: { 'a.b': { handler(newValue, oldValue) { console.log(newValue, oldValue) } } } })

（4）如果监视的属性具有多级结构，也可以开启深度监视，默认是关闭的

数字： const vm = new Vue({ el: '#app', data: { a: { b: 0 } }, watch: { a: { // 启用深度监视，默认是关闭的 deep: true, handler(newValue, oldValue) { console.log('@') } } } }) 3.computed和watch选择

（1）computed和watch如果都能完成某个功能，优先选择computed （2）有一种情况下，必须使用watch。那就是程序中使用了异步的方式，只能使用watch

4.什么时候用箭头函数什么时候用普通函数

（1）该函数是Vue管理的，用普通函数（2）不是Vue管理的，用箭头函数

【本文地址】

计算属性(computed)和侦听器(watch)

计算属性(computed)和侦听器(watch)

今日新闻

推荐新闻