vue.js setup风格 computed练习

先上栗子：

<template>
  <div>
    <p>a</p>
    <span>{{"22222"+ifshow}}</span>
    <br>
    <button @click="setb">
      {{b}}
    </button>
  </div>
</template>


<script>

import {ref,computed} from 'vue'

export default{
  setup(){
    const list = ref(
      {
        name:"xiaoming",
        books:[
          "youyu",
          "panghuang",
          "woyuditan"
        ]
      }
    )
    let  b   = ref('nowb')
    
    // debugger
    const ifshow   = computed({
      get(){
        const show = ref({
          "ifshow" : list.value.books.length > 0 ? 'ok':'no'
        })
        return show.value.ifshow
      },
      set(newVal){
        debugger
        b.value = newVal
      }
  })

    function setb(){
      ifshow.value = 'hihihihi'
    }
    
    return{
      list,
      b,
      ifshow,
      setb
    }
  }
}
    
    
</script>

<style scoped>

</style>

computed语法：

computed支持set和get，set是变量值改变之后会触发，get是变量依赖值改变之后会触发，

  const ifshow   = computed({
      get(){
        const show = ref({
          "ifshow" : list.value.books.length > 0 ? 'ok':'no'
        })
        return show.value.ifshow
      },
      set(newVal){
        debugger
        b.value = newVal
      }
  })

注意get返回的是ref响应式，记得写.value

效果：

button点击之后会变成：

 

 

一个神奇的问题：

给ifshow套了一层{ }之后，发现computed get不执行了。。。

    const { ifshow }   = computed({
      get(){
        const show = ref({
          "ifshow" : list.value.books.length > 0 ? 'ok':'no'
        })
        return show.value
      },
      set(newVal){
        debugger
        b.value = newVal
      }
  })

页面显示undefined：

 之后再看看这个问题，感觉可能是我不太会用const {}这种形式导致的