setup计算属性和钩子函数

1.setup 定义计算属性

<script src="https://unpkg.com/vue@next"></script>
 <body>
   <div id="app">
      <h3>setup-computed计算属性</h3>
      obj.b: {{obj.b}}
      <br>
      <p>计算属性：2倍：{{doubleB}} </p>
      <p>计算属性：0.5倍：{{halfB}} </p>
      <p>计算属性：3倍：{{triangleB}} </p>
      <button @click="obj.b+=1">原值+1</button>
   </div>
   <script>
   const { createApp, reactive, computed } = Vue
   const app = createApp({
     data() {
        return {}
     },
    //  步骤：
    //  1. 在setup中通过computed来创建函数，
    //  2. 导出
     setup() {
      // reactive: 会对对象进行包装
      const obj = reactive({b: 1})
      // 通过computed来创建计算属性
      const doubleB = computed(()=>{
        return 2*obj.b
      })
      const triangleB = computed(()=>{
        return 3*obj.b
      })
      return { obj, doubleB, triangleB }
     },
     computed: {
       halfB () {
         return this.obj.b / 2
       }
     }
    })
   app.mount("#app")
</script>
</body>

通过computed(回调)的方式来计算属性，然后在setup中返回即可。

2.在setup中写watch​​​​​​​

<script src="https://unpkg.com/vue@next"></script>



   <div id="app">
      <h3>setup-watch</h3>
      {{obj.b}}, {{a}}
      <br>
      <button @click="obj.b+=1">原值b+1</button>
      <button @click="a+=1">原值a+1</button>
   </div>
   <script>
   const { createApp, reactive, watch, ref } = Vue
   const app = createApp({
     data() {
        return {
        }
     },
     setup() {
      // reactive: 会对对象进行包装
      const obj = reactive({b: 1})
      const a = ref(0)
      // 通过watch来监听
      watch(() => obj.b ,()=>{
        console.log(`obj.b变化了`)
      })
      watch(a, ()=>{
        console.log(`a变化了`)
      })
      return { obj, a }
     }
    })
   app.mount("#app")
</script>

3.在setup中写钩子函数​​​​​​​

<script src="https://unpkg.com/vue@next"></script>
<body>
 <div id="app">
    <h3>setup-钩子函数</h3>
 </div>
 <script>
   const { createApp,onMounted} = Vue
   const app = createApp({
     data() {
        return {
        }
     },
     setup() {
      onMounted(()=>{ console.log('setup, mounted1')})
      onMounted(()=>{ console.log('setup, mounted2')})
     },
     mounted () {
       console.log('mounted')
     }
    })
   app.mount("#app")
</script>

 

posted @ 2022-05-11 12:02  青柠~  阅读(208)  评论(0)    收藏  举报