初識Vue3.0（3）——ref的使用

Ref 語法

setup 方法

ref 函數

<template>
  <h1>{{count}}</h1>
  <h1>{{double}}</h1>
  <button @click="increase">+1</button>
</template>

import { ref } from "vue"

setup() {
  // ref 是一個函數，它接受一個參數，返回的就是一個神奇的 響應式對象 。我們初始化的這個 0 作為參數包裹到這個對象中去，在未來可以檢測到改變並作出對應的相應。
  const count = ref(0)
  const double = computed(() => {
    return count.value * 2
  })
  const increase = () => {
    count.value++
  }
  return {
    count,
    increase,
    double
  }
}