【vue3练习-02】 ref（）函数实现响应式

使用前先引入

import {ref} from 'vue'

将setup里面定义的数据传给ref函数实现响应式

let name = ref('路飞')

改变值，在获取值的时候必须得.value一下才能拿到

  function fun(){
     console.log(name,'name');
     name.value = '索隆'//ref处理过的简单数据必须得.value才能拿到
    };

对象实现响应式只有对象key需要.value里面的值不用.value

<template>
  <div class="hello">
    {{ name }}
    <button @click="fun">ref函数演示</button>
    <button @click="response">ref函数实现对象响应式</button>
    <span>阳光号船长是----{{sunny.captain}}</span>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: "HelloWorld",
  setup() {
    // 要想定义的数据是响应式数据，那就必须得传给ref函数
    let name = ref('路飞')
    //ref实现对象响应式
    let sunny = ref({
      captain:'路飞',
      viceCaptain:'索隆'
    })
    function fun(){
     console.log(name,'name');
     name.value = '索隆'//ref处理过的简单数据必须得.value才能拿到
    };
    function response(){
      sunny.value.captain = '乌索普';//ref在实现对象响应式的时候对象里面的值不用再点value了 因为对象里面的值不是借助ref实现的而是reactive
    }
    // 记得定义过的数据及方法都要返回
    return {
      name,
      sunny,
      fun,
      response
    };
  },
};
</script>