UzumakiItachi
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

UzumakiItachi

起风了,唯有努力生存。
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 手写组合api reactive和ref
  • vue3的计算属性和监视
  • history 路由404,nginx配置
  • 手写Vue3响应式原理
  • 手写Vue3计算属性和Watch
  • vue3在jsx中优雅的使用动态组件
  • 《Vue3》
hanhanbuku
2023-03-03

vue3的计算属性和监视

const user =ref({
        firstName:'宇智波',
        lastName:'鼬'
      })
      //计算属性
      //第一种只传入一个回调函数
      const computed1= computed(()=>{
        return user.value.firstName+'_'+user.value.lastName
      })
      console.log(computed1.value,'我是计算属性的第一种用法')
      //第二种,传入get和set方法
      const computed2 = computed({
        get(){
          return user.value.firstName+'_'+user.value.lastName
        },
        set(val){
          console.log(val,'我是set,我被触发了')
        }
      })
      console.log(computed2.value,'我是计算属性的第二种用法')
      computed2.value='asd'
      console.log(computed2)

      //监视
      watch(user,(newVal,oldVal)=>{
        console.log(newVal,oldVal,'我是watch')
      },{immediate:true,deep:true})
      //监视多个属性
      watch([age,user],(n,o)=>{
        console.log(n,o,'watch监视多个属性')
      },{immediate:true})
      //监视对象的属性
      watch([()=>user.value.firstName,()=>user.value.lastName],(n,o)=>{
        console.log(n,o,'watch监视对象的属性')
      },{immediate:true})
      //另外一种监视
      watchEffect(()=>{
        age.value+=user.value.firstName
      })
      setTimeout(()=>{
        user.value.firstName='宇智波佐佐木'
      },3000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

计算属性的使用上来说问题和vue2区别不大,这里要注意computed函数的返回值是一个ref对象,所以在使用的时候需要.value

监视分为两种,watch和watchEffect 第一种和vue2区别也不大,需要注意的点是,这个watch是惰性的,初始化不会自动触发,如果需要初始化的时候就去触发需要传入第三个配置对象,里面有一个immediate属性,配置为true即可。 当我们监听reactive的响应式数据的时候需要通过函数返回值的方式 也就是这样

 watch([()=>user.value.firstName,()=>user.value.lastName],(n,o)=>{
        console.log(n,o,'watch监视对象的属性')
      },{immediate:true})
1
2
3

监听多个属性watch的第一个参数就用数组包裹,返回的新旧数据也是一个数组,按照你传入的那个数据的顺序排列。 监听深层次嵌套数据的时候依然要开启deep深度监视。

watchEffect不是惰性的,他会在初始化的时候就被调用。并且他的内部不需要指定需要监视的属性,回调函数中用到了谁就监听谁,有点类似计算属性。

编辑 (opens new window)
上次更新: 2023/03/08, 09:35:38
手写组合api reactive和ref
history 路由404,nginx配置

← 手写组合api reactive和ref history 路由404,nginx配置→

最近更新
01
小程序实现全局状态管理
07-09
02
前端检测更新,自动刷新网页
06-09
03
swiper渲染大量数据的优化方案
06-06
更多文章>
Theme by Vdoing | Copyright © 2023-2025 UzumakiItachi | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式