ref

  • 一般用来定义基础类型的响应式数据
  • 返回一个对象，通过.value访问定义的基础类型值
  • 在template中，不需要使用 .value 
<template>
  {{count}}	// 在template中使用时，不需要 .value
  <button @click="addCount">加1</button>
</template>

<script lang="ts">

import { defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',

  setup () {
    let count = ref(0)	// 定义一个基础类型的响应式数据
    function addCount () {
      count.value++	// 通过 .value 来访问
    }
    return {
      count,
      addCount
    }
  }
});
</script>

Vue3 学习笔记 —— ref 和 reactive_vue

  • 如果对引用类型使用 ref 定义响应式，其仍会调用 reactive，将其包装成 Proxy 对象
  setup () {
    const str = ref('str')
    const obj = ref({obj: 'obj'})

    console.log(str)
    console.log(obj)
  },

Vue3 学习笔记 —— ref 和 reactive_Vue3_02

  • 使用 ref 引用HTML元素 
<template>
  <!-- 3. 声明将元素引用存入到 inputRef 容器中 -->
  <input type="text" ref="inputRef">
</template>

<script lang="ts">

import { defineComponent, ref, onMounted} from 'vue';

export default defineComponent({
  name: 'Child',

  setup() {
  	// 1. 生成 ref 容器
    const inputRef = ref<HTMLInputElement|null>(null)
	
	// 组件一挂载就让 input 框获取焦点
    onMounted(()=>{
      // 4. 从 ref 容器中 获取元素引用并调用聚焦方法
      inputRef.value?.focus()
    })

	// 2. 对模板暴露 ref 容器
    return {inputRef}
  }

});
</script>

reactive

  • 一般用来定义引用类型的响应式数据
<template>
  {{user.age}}
  {{user.mother.age}}
  <button @click="addAge">加1</button>
</template>

<script lang="ts">

import { defineComponent, reactive} from 'vue';

export default defineComponent({
  name: 'App',

  setup () {
  	// 定义引用类型的响应式
    const user = reactive({
      name: 'aa',
      age: 12,
      sex: 'f',
      mother: {
        name: 'bb',
        age: 32,
        sex: 'f'
      }
    })
    function addAge () {
      user.age++
      user.mother.age++
    }
    // 暴露对象跟方法
    return {
      user,
      addAge
    }
  }
});
</script>

Vue3 学习笔记 —— ref 和 reactive_vue_03