Vue3---Vue3的setup函数中如何使用计算属性computed和监视器watch

喜欢ヅ旅行 2022-10-29 10:21 192阅读 0赞

*  setup中使用计算属性computed

<template>
      <div>
        <p>{
       { measure }}</p>
      </div>
    </template>
    <script>
    import { defineComponent, ref, computed } from 'vue'
    
    export default defineComponent({
      name: '',
      setup(){
        const radius = ref(2) // 半径
        const measure = computed(() => { // 圆的面积
          return 3.1 * radius.value * radius.value
        })
        return {
          measure
        }
      }
    })
    </script>

*  setup中使用监视器watch

<template>
      <div>
        <p>{
       { `${name.firstName}-${name.lastName}` }}</p>
        <button @click="changeName">ChangeName</button>
      </div>
    </template>
    <script>
    import { defineComponent, ref, watch } from 'vue'
    
    export default defineComponent({
      name: '',
      setup(){
        // 姓名
        const name = ref({
          firstName: 'L',
          lastName: 'M'
        })
    
        // function: changeName
        function changeName () {
          name.value.lastName = 'YZ'
        }
    
        // 监听到name发生变化，进行打印
        watch(name, (oldVal, newVal) => {
          console.log(oldVal)
          console.log(newVal)
          console.log(name.value)
        }, {
          deep: true // name是一个对象，需要进行深度监听
        })
        
        return {
          name,
          changeName
        }
      }
    })
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3 计算属性和侦听器实战（computed、watch）

当我们在Vue 3中使用计算属性（computed）和侦听器（watch）时，主要目标是实现对数据的响应式处理和对数据变化的监视。计算属性用于处理数据的计算逻辑，而侦听器用于在

妖狐艹你老母/ 2024年03月23日 21:48/ 0 赞/ 64 阅读

相关 Vue中computed(计算属性)、methods、watch的区别

实现效果：字符串的动态拼接 ![在这里插入图片描述][70] methods方法 html： <div id="app"> <!-- 监听到

你的名字/ 2023年08月17日 17:38/ 0 赞/ 158 阅读

相关 vue3 computed和watch

学习笔记记录（内容来源于官网） computed vue3 计算属性和vue2变化不大，只需要注意，它返回的是一个响应式的ref对象,所以在使用的时候需要.value(

迈不过友情╰/ 2023年01月20日 09:45/ 0 赞/ 22 阅读

相关 Vue - 侦听器 watch 和计算属性 computed

推荐：[Vue汇总][Vue] Vue - 侦听器 watch 和计算属性 computed 代码： <!DOCTYPE html> <html la

「爱情、让人受尽委屈。」/ 2022年12月20日 02:31/ 0 赞/ 167 阅读

相关 Vue3---Vue3的setup函数中如何使用计算属性computed和监视器watch

setup中使用计算属性computed <template> <div> <p>{ { measure }}</p>

喜欢ヅ旅行/ 2022年10月29日 10:21/ 0 赞/ 193 阅读

相关 Vue3---Vue3的setup函数中如何使用路由

方式一：通过 getCurrentInstance 方法获取当前组件实例，从而获取 route 和 router <template> <div

怼烎@/ 2022年10月29日 10:21/ 0 赞/ 631 阅读

相关 vue 计算属性 computed 和侦听器 watch 使用示例

vue 计算属性和侦听器 > 完整代码示例：[demo-计算属性-方法-侦听器][demo-_-_-] 计算属性什么是计算属性？ > 本质还是属性，但是它的属

痛定思痛。/ 2022年09月16日 03:51/ 0 赞/ 247 阅读

相关 Vue.js 的watch属性的使用和computed计算属性的使用

文章目录 \`watch\`属性的使用 \`computed\`计算属性的使用 \`watch\`、\`computed\`和\`

Love The Way You Lie/ 2022年03月16日 01:42/ 0 赞/ 255 阅读

相关 vue computed计算属性和watch监听事件

参考一： 1、计算属性适用的情形我们可能会有这样的需求，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性。例如在下面这个

以你之姓@/ 2022年01月31日 05:25/ 0 赞/ 410 阅读

相关 vue中的计算属性computed和侦听器watch

computed称为计算属性，computed基本用于以下这个情况：也就是说reversedMessage只取决于message，并且computed中的reversedM

深藏阁楼爱情的钟/ 2021年09月29日 12:06/ 0 赞/ 468 阅读