粥里有勺糖

vuePress-theme-reco 粥里有勺糖    2018 - 2023
粥里有勺糖 粥里有勺糖

Choose mode

  • dark
  • auto
  • light
关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
author-avatar

粥里有勺糖

285

文章

40

标签

关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
  • Vue

    • 简介
    • 响应式基本原理
    • 路由原理
    • 生命周期钩子
    • 组件通信
    • extend API
    • mixin与mixins
    • computed与watch
    • keep-alive
    • v-show 与 v-if
    • ❤运行机制概述
    • ❤响应式系统的依赖收集追踪原理
    • ❤VNode实现
    • 编译template的过程
    • 数据状态更新时的差异 diff 及 patch 机制

computed与watch

vuePress-theme-reco 粥里有勺糖    2018 - 2023

computed与watch

粥里有勺糖 2020-04-14 大前端vue

# computed 与 watch

  • computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变化才会返回内容。
  • watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

# 使用场景

  • 需要依赖别的属性来动态获得值的时候可以使用 computed
  • 对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch

# 对象写法

# computed

<script>
export default{
    data(){
        return {
            num:1
        }
    },
    computed:{
        doubleNum:{
            get(){
                return this.num*2
            },
            set(v){
                this.num = ~~(v/2)
            }
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# watch

<script>
export default{
    data(){
        return {
            num:1
        }
    },
    watch:{
        num:{
            // 深度遍历
            deep: true,
            // 立即触发
            immediate: true,
            // 执行的函数
            handler(val, oldVal) {
                console.log(v,oldVal)
            }
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Edit this page (opens new window)
Last Updated: 2022/5/15 12:46:34