前端学习-vue学习001-响应式状态

学习教程-vuejs官方教程

上班看不了视频，所以看文字版教程

什么是响应式

能在改变时触发更新的状态被称作是响应式的。

API

reactive()

由 reactive() 创建的对象都是 JavaScript Proxy，其行为与普通对象一样
reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)

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

  // 组件逻辑
  // 此处声明一些响应式状态
  const counter = reactive({
    count: 0
  })
  counter.count++
</script>

<template>
  <p>count is: {{ counter.count }}</p>
</template>

ref()

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

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

  // 组件逻辑
  // 此处声明一些响应式状态
  const message = ref('Hello World!')
</script>

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

合在一起写

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

  // 组件逻辑
  // 此处声明一些响应式状态
  const counter = reactive({
  count: 0
  	})
  counter.count++
  const message = ref('Hello World!')
</script>

<template>
  <p>count is: {{ counter.count }}</p>
  <h1>{{message}}</h1>
</template>