VUE基础01-响应式

SFC（Single-File Component，缩写为 SFC）

SFC 是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。

响应式

reactive()

reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

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

ref()

ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

import { ref } from 'vue'

const message = ref('Hello World!')

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

示例代码

<script setup>
import { reactive , ref } from 'vue'

  // 此处声明一些响应式状态
  // reactive()只适用于对象（包括数组和内置类型，如Map和Set）
  const counter = reactive({
    count: 0
  })
  console.log(counter.count)
  counter.count++
  
  // ref()可接受任何类型，ref会返回一个包裹对象
  const message = ref('Hello VUE!')
  console.log(message.value)
  message.value = 'Changed'
  
</script>

<template>
  <h1>Cout is : {{counter.count}}</h1>
  <h2>
    {{ message.split('').reverse().join('') }}
  </h2>
</template>