Vue3响应式侦听与计算的实现资源-CSDN下载

24 浏览量 2021-01-18 18:24:12 上传评论收藏 116KB PDF 举报

资源推荐

资源详情

资源评论

Vue3 响应式侦听与计算的实现响应式侦听与计算的实现

响应式侦听和计算响应式侦听和计算

有时我们需要依赖于其他状态的状态——在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用

computed 方法：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。

我们先来看看一个简单的例子，关于计算值的方式，同样我们在 src/TemplateM.vue 写下如下代码：

<template>

<div class="template-m-wrap">

count ---> {{count}}

plusOne ---> {{plusOne}}

</div>

</template>

<script>

import { ref, defineComponent, reactive, computed } from "vue";

export default defineComponent({

name: 'TemplateM',

setup() {

let count = ref(2)

let plusOne = computed(() => {

return count.value++

})

console.log(plusOne.value)

return {

count,

plusOne

}

}

})

</script>

访问链接效果如下：

我们可以看到 plusOne 没有值。或者，它可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

<template>

<div class="template-m-wrap">

count ---> {{ count }} plusOne ---> {{ plusOne }}

</div>

</template>

<script>

import { ref, defineComponent, reactive, computed } from "vue";

export default defineComponent({

name: "TemplateM",

setup() {

let count = ref(2);

let plusOne = computed({

get() {

return count.value++;

},

set(val) {

count.value = val;

},

});

plusOne.value = 1;

console.log(count.value); // 0

return {

count,

plusOne,

};

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38530846

粉丝: 5

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip