衡阳衡阳县网站建设哈尔滨信息网58同城
前面几天，学习了vue的button组件、input组件，vue模版语法、计算属性等，在昨天又根据前面学习的，跟着做了一个小的购物车功能，今天学习了侦听器和计算属性
计算属性 computed
computed是一个只读的状态,如果要修改computed定义的变量,不能直接修改,要修改数据源,不然会报错
获取computed数据的时候,是和ref类型,需要加上.value的
例如: console.log(fasName.value);
在es6中,如果使用()=>这种方式,应该是
()=>{a+b}这种方式,但是当只有一行代码运算的时候,可以去掉双括号
()=>a+b
下面是根据视频和自己整理的计算属性使用
<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+bconst 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 函数、或多个数据源组成的数组：
<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>