vue3 计算属性与手表属性的异同
最编程
2024-03-19 11:24:02
...
计算属性(computed)
//使用计算属性 {{fullName}}
//使用方法 {{fullName() }}
const firstName=ref("杰克")
const lastName=ref("麻子")
//计算属性
const fullName=computed(()=>firstName.value+"-"+lastName.value)
//方法
const fullName=()=>firstName.value+"-"+lastName.value
计算属性和方法比较?
相同:结果完全相同。
不同:计算属性值会基于其响应式依赖被缓存,一个计算属性仅会在其响应式依赖更新时才会重新计算。 方法调用总是会在重渲染发生时再次执行函数。比较消耗性能。
//计算属性只读,使用
fullName.value
,其数据源可以修改(firstName,lastName)
监听属性(watch)
//一--------监听字符串
let person=ref("")
watch(person,(newvalue,oldvalue)=>{})
//二------监听对象
let person=ref({
name:"张三",
age:18
})
/* watch(person,(newvalue,oldvalue)=>{
console.log(newvalue,oldvalue) //当改变v-model的person.name值时,此时拿不到值,因为watch是一个浅层监听,需要深度监听。
}) **/
//开启深度监听
//① 监听某个特定的值,name
watch(()=>person.value.name,(newvalue,oldvalue)=>{})
//② 监听不确定哪一个值
watch(person,(newvalue,oldvalue)=>{},{deep:true},{immediate:true})
//immediate:true开启立即执行,立马拿到原数据
//三-------watchEffect 自动监听哪些数据发送改变
watchEffect(()=>{
console.log(newvalue,oldvalue) //(只要数据源发生改变就会打印)
})
区别
- 计算属性函数必须有return函数,监听属性不必须。
- .计算属性不能执行异步操作,watch允许在发生改变时执行异步操作或复杂的逻辑。
- 计算属性是基于它们的依赖进行缓存的,只有依赖发生变化才会重新计算,watch没有缓存,数据发生改变 直接触发对应的事件。
- computed可以自定义名称,而watch只能监听 props和data里面名称相同的属性。
计算属性适用于派生出新的数据,而监听属性适用于在数据变化时执行异步操作或复杂逻辑。
推荐阅读
-
vue3 计算属性与手表属性的异同
-
Vue3 使用 reactive 定义的响应式变量 使用计算属性监听该变量并不能实时更新它,您需要定义一个 ref 来做到这一点。
-
[Halcon&拟合] 拟合直线边缘并计算距离-图像预处理: 一般是去噪或抠图(blob分析抠图或手绘ROI区域抠图)两方面 轮廓提取: 1)boundary:区域轮廓提取 2)edges_sub_pix:图像轮廓提取 3)threshold_sub_pix:图像轮廓提取 使用算子edges_sub_pix进行亚像素的边缘提取最为普遍。其用到的滤波器有Deriche, Lanser, Shen, or Canny filters。 关于这几个滤波器的对比,帮助文档有如下介绍: Deriche, Lanser, Shen为递归滤波器,Canny 为掩膜滤波器; 递归滤波器的执行时间不依赖滤波器的大小,Canny的执行时间与滤波器大小成正相关。 参数alpha数值越大,Deriche, Lanser, Shen滤波器宽度越小,平滑越差,细节越突出,而Canny效果相反。 分割、联合(根据情况而定) 分割算子: segment_contours_xld:可分割’lines’,‘lines_circles’,‘lines_ellipses’,原理是多边形逼近,逼近程度通过算子中后两个阀值参数控制。 联合算子: 临近:union_adjacent_contours_xld (Operator) 共线:union_collinear_contours_xld (Operator) 共圆:union_cocircular_contours_xld (Operator) 拟合 fit_line_contour_xld:拟合直线 fit_line_contour_xld:拟合圆 fit_ellipse_contour_xld:拟合椭圆 fit_rectangle2_contour_xld:拟合矩形 注:有时候在拟合轮廓之前需要判断一下轮廓属性,以确定应拟合成直线还是还是圆,可通过算子:get_contour_global_attrib_xld (SingleSegment,‘cont_approx’,)名字:获取轮廓属性描述:用于确定应拟合成直线还是还是圆参数:SingleSegment:输入轮廓(input_object)cont_approx:属性名称,即采用什么方式去计算 ,一般用这个参数就可以了(input_control)Attrib:属性值: Attrib>0:拟合圆,否则拟合直线(output_control) ) 求距离 二、示例: