vue watch监听sessionstorage变化 vue watch监听computed

转载

mob64ca141677f9 2024-04-07 13:02:01

文章标签 vue.js javascript 前端缓存 Vue 文章分类 架构后端开发

在vue里面，有两种监听数据监听的方式，一种是watch, 一种是compute。下面我说一下自己对这两个方式的理解。

watch:

watch官方解释是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

我理解watch有点像是一个哨兵类似的东西。当监听的变量发生变化的时候，就会触发对应的方法。在方法里面可以做其他的操作。支持异步。没有缓存，就是一个方法，监听的对象值发送变化，就会触发方法计算。执行顺序是监听的对象发生变化，然后在根据变化结果去计算相应的结果。

watch监听的变量是props/data里面已经定义的变量。更加注重方法。

监听的数据改变了=》watch调用法法去做相应的操作

vue3里面使用方法

import { watch， defineComponent } from 'vue'
export default defineComponent({
    setup({
        const name = ref<any>('')
        // 添加watch监听
        watch(name, (oldValue, newValue) => {
            // name 发生变化，触发方法，进行逻辑处理
            // todo 进行相应的逻辑， 重点在于name值变化之后，回调方法的逻辑处理
        })
        return {
            name
        }
    })
})

适用环境:

值发生变化，从而触发其他条件变化。比如省、市、区的三级联动。省变化了，触发查询对应省份下面的城市。市变化触发查询城市下面对应的地区。

compute:

compute官方的解释是

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。参考链接#compute#

我理解compute定义的更像是一个变量。这个变量的值后面的函数的返回值，函数里面的参数通过计算将结果返回给compute定义的变量。当里面的属性发送变化的时候，就会先触发计算。然后将计算结果返回定义的变量。并且将计算的结果进行缓存。在函数里面的属性没有发生变化的情况下，没出取变量的值的时候，都会走缓存里面的数据。

compute里面都是新的变量，并且这个变量可以在代码里面直接使用，而不是在props/data里面定义。更加注重的是变量。

compute的方法里面的属性值变量，触发计算。并且将最终的计算结果进行缓存，再返回给变量。跟watch的执行顺序正好相反。

vue3里面的用法

import { computed, defineComponent } from 'vue'

export default defineComponent({
    setup({
        const name = ref<any>('')
        const ristName = ref<any>('')
        const lastName= ref<any>('')
        // 添加watch监听
        name.value = computed(() => {
            // fristName 或者 lastName变化触发方法，重新计算，从而改变name的值
           return fristName + lastName
        })
        return {
            name,
            ristName,
            lastName
        }
    })
})

适用环境:

这个好难，我就用自己的需求来描述一下。我需要环境变量的设置白天模式、夜间模式。这两个样式的代码皮肤设置的代码里面。我需要通过在设置模块里面的开关，来调整黑白天模式。走的是vuex。因此，我需要在代码皮肤里面添加一个dayColor属性,属性是compute里面监听vuex里面的设置的变量值的变化返值从而触发黑白模式切换的(写了这么多，不知道能不能看得懂￣□￣｜｜)