reactive

reactive: 更改可以触发更新

Options

declare reactive state (using the data component option):

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}

The message property will be made available(可获得的) in the template:

<h1>{{ message }}</h1>

<!-- we can use any valid JavaScript expression: -->
<h1>{{ message.split('').reverse().join('') }}</h1>

declare reactive state using Vue’s reactive() API:

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

reactive() 只适用于对象（包括数组和 Map 和 Set 等内置类型）

ref() 可以采用任何值类型，并创建一个对象 that exposes the inner value under a .value property:

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'