vue3.0 计算属性,vue3 计算属性

一、一般场景

当我们需要对某个数据进行简单判断渲染的时候我们通常会使用如下方法

<div>    nginx当前状态{{ openNginx  true ? true : false}}</div>

但是这样就很影响观感因为渲染出来的只有openNginx的值而没有后面的表达式

二、计算属性写法

这样我们就可以借助计算属性将其封装成方法表达代码如下

<div>     nginx当前状态{{ openNginxValue }}</div>

const openNginxValue  computed(() > {    return openNginx.value  true ? true : false;})

两者的表达效果一直但是后者的代码易读性强许多

三、函数方法

但是这样和普通的函数方法有什么区别呢

函数方法写法如下

    <div>        nginx当前状态{{ openNginxValue() }}    </div>

const openNginxValue  () > {    return openNginx.value  true ? true : false;}

区别就是计算属性具有缓存当下次调用这个值的时候只要他不被触发响应式的更新他就会直接返回其数值而函数每次渲染都会重新计算

四、计算属性特性

还有一个特点就是计算属性是可读的直接修改计算属性的值会报警告

但是我们也可以通过如下形式来对计算属性进行“赋值”

    <button clickgiveComputeValue> 点击我开启nginx</button>    <div>        nginx当前状态{{ openNginxValue }}    </div>

const openNginxValue  computed( {    get() {        return openNginx.value  true ? true : false;    },    set(value) {        alert(我被赋值了但是翻转的是openNginx的值)        openNginx.value  !openNginx.value;    }})

const giveComputeValue  () > {    openNginxValue.value  false;}

我们点击button调用giveComputeValue箭头函数方法其对openNginxValue响应式赋值被计算属性openNginxValue的set方法捕获从而执行对响应式变量openNginx进行翻转实现了对计算属性的《表面赋值》

五、全部代码

<template>    我是计算属性测试    <br>    <button clickgiveComputeValue> 点击我开启nginx</button>    <div>        nginx当前状态{{ openNginxValue }}    </div></template><script langts setup>// import { defineComponent } from vue/composition-apiimport { computed, ref }  from vueconst nums  ref(0);const openNginx  ref(false);const open  () > {    openNginx.value  !openNginx.value;}const openNginxValue  computed( {    get() {        return openNginx.value  true ? true : false;    },    set(value) {        alert(我被赋值了但是翻转的是openNginx的值)        openNginx.value  !openNginx.value;    }})const giveComputeValue  () > {    openNginxValue.value  false;}// const openNginxValue  () > {//     return openNginx.value  true ? true : false;// }// const changeCalc  () > {//     openNginxValue.value  true;// }</script><style></style>