小白快速理解vue3.0中的响应式

ref（）

ref创建的是基本类型的响应式数据。

作用：定义响应式变量

语法：let xxx = ref(初始值)

返回值：一个RefImpl的实例对象，ref对象的value属性是响应式的

  eg:   let name = ref('张三')  , name不是响应式，name.value是响应式

口头理解：就是通过网站中点击按钮或者是其他，能够让其有反应，不只是控制台有反应，而在网站中也会响应，这大概就是响应式，但是初期就是比较基本的功能。

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

import { ref } from 'vue'
const count = ref(0)

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们：

import { ref } from 'vue'
export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}

为什么我们需要使用带有 .value 的 ref，而不是普通的变量？当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

练习例子

//person.vue 文件
<template> 
       <div class="Person">       
        <h1>姓名：{{name}}</h1>
        <h2>年龄：{{age}}</h2>       
        <h3>联系方式：{{13012345678}}</h3>
        <button @click="changeName">  修改名字  </button>
        <button @click="changeAge">  修改年龄  </button>
        <button @click="showTel">  查看联系方式  </button>
       </div>
</template>
    
<!-- setup是vue3中一个新的配置项，值是一个函数 -->

<script lang="ts" setup="person"> 

 //数据   用let直接写的不是响应式的数据
    import {ref} from 'vue'
    let  name = ref('小二')
    let  age = ref(18)
    let  tel = '13012345678'
    

    function changeName (){
            
              name.value  = 'xaioer'
              console.log(name) 
           }
    function changeAge (){
             
            age.value += 1
            console.log(age)
      }
    function showTel (){
          alert(tel)
      }   
</script>
 

    <style scoped>
    /* 样式 */
      .Person{
        background-color: yellowgreen;
         box-shadow:  0 0 10px; /*盒子阴影 */
        border-radius: 10px;
        padding: 20px;
      }
      button{
        margin: 0 8px;
      }
    </style>


//app.vue文件
<template>
   <!-- <div class="app">
    <h1></h1> 
    <Person/>    
</template>

<script lang="ts">
// js/ts
  import Person from './components/person.vue'
  export default{
     name:'App',//组件名
     components:{Person} //注册组件
  }
</script>

<style>
/* 样式 */
  /* .app{
    background-color: rgb(206, 231, 231);
     box-shadow:  0 0 10px; /*盒子阴影 */
     /* border-radius: 10px;
     padding: 20px;
  } */ 
  
</style>

可以手敲一下，不要直接复制粘贴，自己动手练习一下，我用的vscode，应该用什么软件都可以。具体的详细文档，可以看vue官方的。链接：响应式基础 | Vue.js (vuejs.org)https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html