vue 计算属性和监听器

博客主要介绍了计算属性和监听器watch。给出了单选全选案例展示计算属性,阐述了watch的基本使用、在验证格式和数据持久化方面的应用及其他用法,还提及了计算属性与监听器的区别使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

计算属性

写在computed中
1. 写起来像一个方法,用起来像一个属性(本质就是一个属性)
2. 注意点:
	- 只要跟计算属性相关的数据发生了改变,计算属性就会重新计算,
	  不相关的值发生变化,不会重新计算计算属性
	- 一定要有返回值
3. 什么时候使用计算属性
	-根据已知data中的值,生成一个额外的新值,且新值还要跟着data中的值变化而变化
4. computed里面的计算属性名不能和data中的属性名重名

例:

<div id='app'>
	num1:<input type='text' v-model='num1' /> +
	num2:<input type='text' v-model='num2' /> =
	<span> {{ num3 }} <span>

	testNum:<input type='text' v-model='test' />
</div>
const vm = new Vue({
	el: '#app',
	data: {
		num1:0,
		num2:0,
		testNum:0
	},
	//计算属性
	computed: {
		num3(){
			return +this.num1 + +this.num2 + +this.test
		}
	}
})

案例2:单选全选案例

<div id='app'>
	<div v-for='item in list'>
		<input type='checkbox' v-model='item.isChecked' /> {{item.name}}
	</div>
	<input type='checkbox' v-model='allChecked' /> 全选
</div>
const vm = new Vue({
  el: '#app',
  data: {
    list: [
      {
		id: 1,
        name: '苹果',
        isChecked: true
       },
       {
         id: 2,
         name: '草莓',
         isChecked: false
        },
        {
          id: 3,
          name: '芒果',
          isChecked: false
         }
       ]
     },
     computed: {
       //这里只设置了return 相当于computed里的get 没有设置set 所以点击全选无效
       //allChecked(){
       //  return this.list.every(item => item.isChecked)
       //}
       allChecked: {
       	set(newValue){
       	  this.list.forEach(item => (item.isChecked = newValue))
       	},
       	get(){
       	  return this.list.every(item => item.isChecked)
       	}
      }
    }
 })

监听器 watch

可以通过watch监听一个属性值的变化,只要值发生了变化,就会调用watch的一些方法
watch是vm的一个配置项
监听的属性按照一个方法的格式来写

watch的基本使用

<div id='app'>
	<h1> {{ num }} </h1>
</div>
const vm = new Vue({
  el:'#app',
  data:{
    num:0
  },
  //监听一个值的变化
  watch: {
    //第一个参数: 新值
    //第二个参数: 旧值
    num(newValue,oldValue){
      console.log('newValue:',newValue,'oldValue:',oldValue)
    }
  }
})
watch的应用:验证格式
<div id='app'>
	<input type='text' v-model='txt' />
	<span v-show='isShow'>格式错误,字符个数应在(3-6)个</span>
</div>
const vm = new Vue({
  el:'#app',
  data: {
    txt:'',
    isShow: false
  },
  watch: {
    txt(newValue){
      if(/^[0-9a-zA-Z]{3,6}$/.test(newValue)){
       this.isShow = false
      }else{
       this.isShow = true
      }
    } 
  }
 })
watch的应用:数据持久化
- 监听数据的改变,只要数据改变就调用保存数据的方法
- 需要深度监听
- 保存值可以将对象转化为字符串(存的快 省空间)
watch: {
	todoList: {
		deep: true,
		handle(newVal){
			localStorage.setItem('list',JSON.stringify(newVal))
		}
	}
}
watch的其他用法
<div id='app'>
	<h1> {{ obj.age }} </h1>
</div>
const vm = new Vue({
  el: '#app',
  data: {
    num:0,
    obj: {
      age:10
    }
  },
  watch: {
  //监听简单类型
  num(newValue){
  	console.log(newValue)
  },
  //监听引用类型
  obj(newValue){
  	console.log(newValue)
  },
  //监听对象里的属性 方式一:
  obj: {
  	//深度监听 监听对象里的属性
  	deep: true,
  	//一旦对象里的属性值发生变化,调用handler方法
  	handler(newValue){
  	  console.log(newValue.age)
  	}
  },
  //监听对象里的属性 方式二:
  'obj.age'(newValue){
    console.log(newValue)
  }
 }
})

计算属性与监听器的区别使用

watch:监听器
	- 监听器监听属性数据发生变化去影响他人
	- 自己改变  => 影响他人
computed:计算属性
	- 只要 相关属性的数值发生了变化,计算属性会重新计算
	- 根据已知的值,得到一个新值
	- 别人改变 => 影响自己
### Vue.js 中计算属性监听器的用法及区别 在 Vue.js 中,计算属性(Computed Properties)监听器(Watchers)是两个重要的特性,它们都用于处理数据的变化,但其设计初衷使用场景存在显著差异。 #### 计算属性(Computed Properties) 计算属性是一种基于其依赖的数据动态计算结果的机制。它非常适合用于派生数据的场景,例如格式化显示内容或根据多个数据源生成新的值。计算属性具有缓存机制,只有在其依赖的数据发生变化时才会重新计算[^1]。 **特点**: - **缓存性**:计算属性的结果会被缓存,只有当依赖的数据发生改变时才会重新计算。 - **声明式语法**:通过简单的 getter setter 方法定义逻辑,代码更简洁易读。 - **适用场景**:主要用于需要从现有数据派生新数据的情况。 **示例**: ```javascript computed: { fullName() { return `${this.firstName} ${this.lastName}`; } } ``` #### 监听器(Watchers) 监听器是一种显式地观察数据变化并执行回调函数的机制。它更适合用于执行副作用操作,例如触发网络请求、更新 DOM 或者与其他外部系统交互。 **特点**: - **无缓存**:每次数据变化都会触发回调函数,无论依赖是否真正改变。 - **显式回调**:需要手动定义回调函数来响应数据变化。 - **适用场景**:主要用于需要在数据变化时执行复杂操作或副作用的场景。 **示例**: ```javascript watch: { firstName(newVal, oldVal) { console.log(`firstName changed from ${oldVal} to ${newVal}`); } } ``` #### 区别对比 | 特性 | 计算属性 | 监听器 | |----------------|-----------------------------------|--------------------------------| | **缓存机制** | 有缓存,仅当依赖变化时重新计算[^3] | 无缓存,每次变化都会触发回调 | | **语法糖** | 简化 getter/setter 的书写 | 需要显式定义回调函数 | | **适用场景** | 派生数据 | 副作用操作 | --- ### 总结 计算属性监听器虽然都可以用来处理数据变化,但它们的设计目标不同。计算属性更适合用于创建派生数据,而监听器则更适合用于执行副作用操作,如网络请求或 DOM 更新[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值