Vue3中的watch和computed的使用方法详解

Web前端 潘老师 2个月前 (08-16) 276 ℃ (0) 扫码查看

现在很多web前端项目开使用vue3开发,而对潘老师这中专注于Java后端开发的程序员而言,之前也只学过vue2.x,现在是前后端兼顾,最近有个功能要用到watch监听器和computed计算属性,但是用法和vue2还是有区别的,下面潘老师对Vue3中的watch和computed的使用方法做下记录,方便以后使用。

computed使用

// 模板代码
<template>
  <div>
    <p><input type="text" v-model="num"></p>
    <p><input type="text" v-model="nextNum"></p>
  </div>
</template>

// vue代码
import { computed } from 'vue'
export default {
  setup() {
    const num = 1
    const nextNum = computed(() => {
      return num + 1
    })
    return { 
      num,
      nextNum
    }
  }
}

watch侦听器使用

import { watch} from 'vue'
export default ({
    setup () {
        // 监听一个复杂数据类型 reactive
        const state = reactive({ count: 0 });
        watch(() => state.count, (newCount, oldCount) => {
            console.log(newCount, oldCount);
        });
        // 直接监听一个简单数据类型 ref
        const count = ref(0);
        watch(count, (newCount, oldCount) => {
            console.log(newCount, oldCount);
        });
    } 
})

以上就是Vue3中对于watch和computed的使用方法,成功地解决了潘老师的问题,特此记录,以备不时之需!


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:Vue3中的watch和computed的使用方法详解
喜欢 (1)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!