vue中computed理解,及watch的理解

news/2024/7/10 0:21:16 标签: vue, computed, watch

computed 计算属性

1.可用于快速计算视图(View)中显示的属性,这些计算将被缓存,并且只在需要时更新。
2.计算属性的内容也可写在方法中,进行调用,虽然结果是相同的,但是性能却有很大差别,方法在每次页面渲染时都会执行一次。而计算属性不必每次都执行一次。
3.计算属性默认只有getter方法,不过在需要时你也可以提供一个setter方法
4.计算属性适合多个数据变化影响一个数据的情况下。即多个变量或对象进行处理后返回一个结果值

watch
1.一般适用于监控路由,input输入框的值的特殊处理等,
2.适合场景一个数据影响多个数据
3.类型{[key:string]: string | Function | Object | Array},
一个对象,键是需要观察的表达式,值是对应的回调函数,方法名,包含选项的对象

this.$nextTick(){}
当dom加载完,才会执行其中的代码


http://www.niftyadmin.cn/n/1728584.html

相关文章

springboot核心注解

SpringbootApplication 相当于SpringBootConfiguration、EnableAutoConfiguration、ComponentScan这三个注解的组合 SpringBootConfiguration(Configuration) SpringBootConfiguration继承Configuration注解,他们的功能是一样的标志当前注解时一个配置类,用来代替applicatio…

使用vue-seamless-scroll实现滚动,出现空白间隔的问题

当滚动第二轮时,在第一轮和第二轮的衔接处出现了空白,稍后第二轮从空白处跳出显示。而不是从底部出来 解决办法: 方法一:检查一下css样式,可能是布局出了问题, 我的是因为在子div中加了display:flex 方法二…

vue实现无缝滚动vue-seamless-scroll

1.安装vue-seamless-scroll npm install vue-seamless-scroll --save2.vue文件中引入组件 <vue-seamless-scroll></vue-seamless-scroll>import vueSeamlessScroll from vue-seamless-scrollcomponents: { vueSeamlessScroll},vue文件中写的 <div class"…

mysql使用sum保留小数或者保留整数

转成decimal保留两位小数: SELECT cast(sum(需要计算列) AS decimal(11,2)) FROM 表名 使用ROUND函数保留两位小数或取整: ROUND(X) -- 表示将值 X 四舍五入为整数&#xff0c;无小数位 ROUND(X,D) -- 表示将值 X 四舍五入为小数点后 D 位的数值&#xff0c;D为小数点后小数…

px em rem vh的使用

-绝对单位&#xff1a;px -相对单位&#xff1a;rem,em,% ,vh,vw px 像素&#xff0c;相对于屏幕的分辨率 em 参考父元素的font-size,具有继承性的特点&#xff0c;逐层影响(最终的参考是浏览器的字体大小或设置的字体大小)。浏览器默认是16px 一层&#xff1a;1.4em1.416px22.…

使用white-space: nowrap;时导致布局改变

当使用white-space: nowrap;导致布局变大时&#xff0c; 只需要在其父元素上设置样式“min-width:0;” 若是大屏项目&#xff0c;分为左中右&#xff0c;需在左(或中或右)的根元素上设置“min-width:0;”即可

JavaScript Array涉及到的方法

.some().indexOf().split().splice().push().some() some()方法用于检测数组中的元素是否满足指定条件&#xff08;函数提供&#xff09;。方法会依次执行数组的每个元素&#xff1a;如果有一个元素满足条件&#xff0c;则表达式返回true , 剩余的元素不会再执行检测。如果没有…