VUE3(十四)使用计算属性computed和监听属性watch

简介: computed属性,使用 getter 函数,并为从 getter 返回的值返回一个不变的响应式 ref 对象。watch属性 与 vue2中的 this.$watch (以及相应的 watch 选项) 完全等效。

QQ图片20220423173155.jpg

首先,尝试一下计算属性computed


第一种写法


QQ图片20220423173158.jpg


<template>
  <div>
    <p><input type="text" v-model="age"></p>
    <p><input type="text" v-model="nextAge"></p>
  </div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    const age = ref(18)
    const nextAge = computed(() => {
      return +age.value + 1
    })
    return {
      age,
      nextAge
    }
  }
}


修改age,nextAge会跟着自动+1


QQ图片20220423173201.png



但如果修改nextAge,会有警告:计算属性不能修改


QQ图片20220423173204.png


第二种写法


<template>
  <div>
    <p><input type="text" v-model="age"></p>
    <p><input type="text" v-model="nextAge"></p>
  </div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    const age = ref(18)
    const nextAge = computed({
      get() {
        return +age.value+1
      },
      set(value) {
        console.log(value)  //  输出新修改的值
        return age.value = value - 1
      }
    })
    return { 
      age,
      nextAge
    }
  }
}


另一种写法:

使用computed和watch, 一定记得先引入


import { reactive , computed,toRefs,watch} from "vue";


computed属性


使用 getter 函数,并为从 getter 返回的值返回一个不变的响应式 ref 对象。

如图所示,案例:


QQ图片20220423173207.jpg


<p>原来值:{{ count }}</p>
<p>计算属性更改的值:{{ twoNumber }}</p>
//引用ref函数 可以实时更新数据
import { defineComponent, reactive , computed,toRefs,watch} from "vue";
export default defineComponent({
  name: "HelloWorld",
  setup() {
    const state: any = reactive({
      count: 1,
      twoNumber: computed(() => state.count*2)
    });
    //暴露出去给外界使用
    //使用toRefs解构响应式对象数据,实现实时更新
    return {
      ...toRefs(state),
    };
  },


watch属性 与 vue2中的 this.$watch (以及相应的 watch 选项) 完全等效。


QQ图片20220423173211.jpg


watch(()=>state.count,(newValue, oldValue) => {
     console.log('改变了');
     console.log('我是新的值',newValue);
     console.log('我是旧的值',oldValue);
    })


以上大概就是VUE3中watch与computed的大概用法。



目录
相关文章
|
9天前
|
缓存 JavaScript
vue计算属性是什么 怎么选择?
vue计算属性是什么 怎么选择?
|
10天前
|
存储 JavaScript 前端开发
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
|
10天前
|
缓存 JavaScript
什么是vue的计算属性?为什么使用?怎么使用?举例说明
什么是vue的计算属性?为什么使用?怎么使用?举例说明
|
11天前
|
缓存 JavaScript 开发者
什么是vue的计算属性
什么是vue的计算属性
8 0
|
11天前
|
缓存 JavaScript
什么是Vue的计算属性
什么是Vue的计算属性
4 0
|
12天前
|
JavaScript
Vue模板语法、属性绑定、条件渲染的学习
Vue模板语法强调插值表达式需返回结果以显示。避免问题的方法是将逻辑处理放在JS中,不在模板内实现。Vue属性绑定使用`v-bind`(可简写为:)动态绑定类或ID,当值为null或undefined时自动移除。支持布尔类型和动态绑定多值。条件渲染包括`v-if`、`v-else`、`v-else-if`和`v-show`,其中`v-if`用于真值时渲染,`v-show`按条件显示,两者的区别在于频繁切换场景和渲染方式。
|
JavaScript 前端开发
vue通过监听实现相同路径的视图重新加载
最近在做一个项目,前端菜单路径如下: { path: '/oa/workflow/process/:status', component: sys_workflow_process, ...
1232 0
|
1天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
1天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
1天前
|
JavaScript
vue知识点
vue知识点
10 3