关于vue中watch和computed

computed：计算属性通过属性计算的来的属性

1、computed里面的函数建议有返回值，不建议去修改data中的属性

2、在使用computed中的方法时,是不需要加()

3、computed是基于vue的依赖当computed所依赖的属性发生改变的时候就会触发相对应的方法

4、当computed中的函数执行完毕后，会进行缓存。当下次所依赖的属性没有发生改变的时候会从缓存中读取结果

特点：
一个属性受多个属性的影响

场景：
1、商品的总价结算

2、商品的筛选

watch：属性的监听
    1、watch中的函数名称必须是data中的属性
    2、watch中的函数会接受两个值一个是新值一个是旧值
    3、watch：中的函数是不要调用的，当所依赖的属性发生了改变，那么会调用相关的函数
    4、watch的属性监听当中尽量不要去修改data中的属性
    5、watch监听属性的时候只会监听对象引用是否发生了改变，二具体的属性值发生改变是不会进行监听的
    6、watch做属性监听的时候如果属性是一个对象，那么需要做深度监听，利用headler与deep进行深度监听
    7、watch初始化的时候是不会执行的，如果设置immediate:true   则初始化的时候会执行一次
    8、watch不会对数组的修改（特殊情况）进行监听

特点：
        一个属性影响多个属性
        场景：
         模糊查询
         网页的自适应

转载于:https://www.cnblogs.com/Fairy-Tail-blogs/p/10903768.html

关于vue中watch和computed相关推荐

关于Vue中计算属性computed和methods属性的区别，你了解多少呢
文章目录 1.实例 2.computed计算属性中: 前提1.当计算属性fn2没有依赖data中的数据时: 前提2.:当计算属性依赖data中的数据时: 3.区别: 在做项目过程中,有时会出现同一个需 ...
实现 VUE 中 MVVM - step10 - Computed
看这篇之前,如果没有看过之前的文章,移步查看: 实现 VUE 中 MVVM - step1 - defineProperty 实现 VUE 中 MVVM - step2 - Dep 实现 VUE 中 ...
Vue中watch、computed、updated三者的区别以及使用方法
1.watch 理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作 1.监听值类型(简单类型)数据 //在一个vue实例中new V ...
Vue中watch、computed、updated的区别
watch watch:侦听器,监听某个数据的变化然后执行相对应的方法,来响应数据的变化,尤其是当需要数据变化时执行异步操作或着开销较大时,这个方式是最有用的 <div id="wat ...
vue中计算属性computed传递参数
vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现.例如传过来不同的状态,我们设置成不同的颜色.(三目运算符可以实现但是只能设置两种,状态多了就不 ...
Vue中methods、computed和watch属性联系及区别
methods属性当我们在Vue中想要调用函数或者方法时,可以在methods中调用方法,如下: <template><div><h1>methods属性< ...
Vue中data和computed的区别
First data 和 computed都是响应式的,先看看官方的说法: Data: Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data ...
vue中Watch 和 Computed 的区别是什么？
Watch 和 Computed 的区别监听属性watch: 不支持缓存,数据变,直接会触发相应的操作: watch支持异步: 监听的函数接收两个参数,第一个参数是最新的值,第二个参数是输入之前的值 ...
Vue中methods与computed区别
核心区别 computed是属性访问,method是函数调用 computed带有缓存功能,method没有实例: <script>Vue.createApp({data() {retu ...

关于vue中watch和computed

关于vue中watch和computed相关推荐

最新文章

热门文章