首页 > 其他分享 >vue的计算属性computed和监视属性waatch的区别

vue的计算属性computed和监视属性waatch的区别

时间:2022-09-22 21:44:51浏览次数:46  
标签:waatch vue computed watch 监视 返回值 数据 属性

共同的:都是用于监听数据变化的属性;

计算属性:必须有返回值return ,依赖其它属性值,其它属性值发生变化的时候就会重新计算 ;

监视属性:每当数据变化的时候就会触发执行,watch有两个新值和旧值的参数,watch的函数名必须和data的属性名一致,不需要依赖其它的数据,只在乎自己的数据是否发生变化,对于复杂数据要使用深度监听,deep:true 因为默认监听的时候只看地址的变化  ;immerdiate:true 页面首次加载的时候执行一次 ; 可以没有返回值return ;

区别:

1. computed是计算属性,产生新的数据,而且数据依赖其它的数据,watch不产生新的数据,是对已存在的数据的监视,是数据发生变化的回调函数 ;

2. computed必须有返回值,watch可以没有返回值;

3. computed不能有异步代码,watch可以运行异步代码;

标签:waatch,vue,computed,watch,监视,返回值,数据,属性
From: https://www.cnblogs.com/zhulongxu/p/16720959.html

相关文章

  • vue的生命周期
    四个阶段创建阶段---挂载阶段---更新阶段---销毁阶段八个生命周期函数(钩子函数)创建阶段有两个钩子函数,beforeCreate在数据代理和数据监听之前执行,created在数据代理......
  • Vue:数据仓库配置--Pinia
    pinia作用Pinia是Vue的存储库,它允许您跨组件/页面共享状态。 pinia安装npmipinia 创建文件夹store//store/index.js文件import{defineStore}from......
  • .map 给数组对象添加新属性
    letmenuList=[{name:'晓明',age:18},{name:'黎明',age:20},{name:'德华',age:28},]constlist=this.list.map((item)=>({...item,title:`新属性1`......
  • Vue 路由
    importVuefrom"vue"importRouterfrom"vue-router"Vue.use(router)constroutes=[{path:'/',component:()=>import('../components/a.vue'),meta......
  • vue学习笔记(三):axios获得远程数据,拦截器
     安装:npmiaxios 请求数据代码如下:<script>importaxiosfrom'axios';exportdefault{data:()=>{return{name:''},methods:{set_val(){......
  • 【asp.net】background属性
    一、更改元素背景色可以为所有元素设置背景色,这包括body一直到em和a等行内元素。1、元素背景色p{background-color:gray;}2、背景色从元素中的文本向外延伸......
  • vue组件系列-列表左右箭头滚动(vue3+ts)
    <template><divclass="list-wrapper"ref="allListRef"><divv-if="showArrow&&listSource.length>minArrowItemsCount"@click="scrollLeft"......
  • java8 list集合更具对象属性去重处理
    话不多说直接上代码 packagecom.leinuo.jvm.list;importjava.util.*;importjava.util.concurrent.ConcurrentHashMap;importjava.util.function.Function;imp......
  • 5. NumPy数组属性
    1.前言本节介绍Numpy数组的常用属性。2.ndarray.shapeshape属性的返回值一个由数组维度构成的元组,比如2行3列的二维数组可以表示为(2,3),该属性可以用来调整数......
  • Vue源码解析——虚拟DOM和diff算法
    前置环境:1.手写h函数vnode.js//默认暴露exportdefaultfunction(sel,data,children,text,elm){return{sel,data,children,text,elm}}h.jsim......