学习Uni-app开发小程序Day8

前面几天，学习了vue的button组件、input组件，vue模版语法、计算属性等，在昨天又根据前面学习的，跟着做了一个小的购物车功能，今天学习了侦听器和计算属性

计算属性 computed

computed是一个只读的状态,如果要修改computed定义的变量,不能直接修改,要修改数据源,不然会报错

获取computed数据的时候,是和ref类型,需要加上.value的

例如: console.log(fasName.value);

在es6中,如果使用()=>这种方式,应该是

()=>{a+b}这种方式,但是当只有一行代码运算的时候,可以去掉双括号

()=>a+b

下面是根据视频和自己整理的计算属性使用

html 复制代码

<template>
	<view class="out">
		<input type="text" v-model="firsName" placeholder="请输入姓名" />
		<input type="text" v-model="lirsName" placeholder="请输入名称" />
		<view> 球星全称：{{firsName+"-"+lirsName}}</view>   <!--这是直接在html中，使用两个变量进行展示的  -->
		<view> 球星全称：{{fasName}}</view>                 <!--这是使用computed，进行计算后得到的值  -->
		<view> 球星全称：{{fustName()}}</view>			   <!--这是使用方法得到的值，但是方法必须要添加（） -->
		<!-- 为什么要使用计算属性：计算属性是有缓存效果的，方法是每一次都会调用，是很耗内存的 -->
	</view>
</template>

<script setup>
	import { ref,computed } from 'vue';
	const firsName=ref("");
	const lirsName=ref("");
	
	// computed是一个只读的状态,如果要修改computed定义的变量,不能直接修改,要修改数据源,不然会报错
	// 获取computed数据的时候,是和ref类型,需要加上.value的
	// 例如: console.log(fasName.value);
	// 在es6中,如果使用()=>这种方式,应该是
	// ()=>{a+b}这种方式,但是当只有一行代码运算的时候,可以去掉双括号
	// ()=>a+b
	const fasName=computed(()=>firsName.value+"-"+lirsName.value);
	
	// 下面是定义一个变量,使用方法的形式进行数据操作
	const fustName=()=>firsName.value+"-"+lirsName.value;
	
</script>

<style lang="scss" scoped>
.out{
	padding: 20px;
	input{
		border: 1px solid red;
		height: 40px;
		padding:0 10px;
		margin: 10px 0;
	}
}

</style>

侦听器：watch和watchEffect

watch侦听器，在每次响应式状态发生变化时触发回调函数；第一个参数可以是：的第一个参数可以是不同形式的"数据源"：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

html 复制代码

<template>
	<view class="">
		<input type="text" v-model="process" />
	 {{process}}
	</view>
	
</template>

<script setup>
	import { ref, watch, watchEffect } from 'vue';
		
	// 使用监听器,watch:
	// 第一种:监听简单的文本框
	//  第一个参数是数据源,第二个参数是有两个参数,一个代表的是新值,newValue;一个是老值,oldValue;
	 const process=ref("")
	watch(process,(n,o)=>{
		console.log(n);
		console.log(o);
	})
	
   // 第二种:监听一个对象,
   // 在监听对象的时候,需要用到一种()=>这种方式,然后跟着是新老值,
  /* const process=ref({
   	name:"张三",
   	age:29
   })
   watch(()=>process.value.name,(n,o)=>{
   	console.log(n);
   })
	*/
   // watch的深度监听,这里是在{}后面,加上一个deep:true,这就是深度监听的,immediate:true,这是立即执行
   // 	深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。
   // 	因此请只在必要时才使用它，并且要留意性能
   // watch(process,(n,o)=>{
   // 	console.log(n);
   // },{deep:true,immediate:true})
   
   // 使用watch监听两个的时候,是要在参数中用数组例如:
   // watch([变量1,变量2],([n变量1,n变量2],[o变量1,o变量2])=>{
	  //  操作逻辑
	  //  n变量1,n变量2:这是前面数组的新值
	  //  o变量1,o变量2:这是前面数据的老值
   // })
   
   // watchEffect侦听器,是不需要添加其他参数的,直接是监听全局的，具体用法，查看官方文档
   // watchEffect(()=>{
	  //  console.log(需要侦听的变量);
   // })
</script>

<style lang="scss" scoped>
 input{
	 margin: 10px;
	 padding: 0 10px;
	 border: 1px solid red;
 }
</style>