Vue2和Vue3基础（三）

1.常用api用法

<template>
  <h1>常用API的应用</h1>
  <h2>原生的:{{num1}}</h2>
  <h2>调用方法:{{myFunction}}</h2>
  <h2>ref的变量:{{num2}}</h2>
  <h2 @click="myFunction2(50)" style="color:red">改变</h2>
  <h2>reactive中的对象类型:{{user}}--{{user.sex}}</h2>
  <h2>{{name}}--{{sex}}--{{age}}</h2>
  <h2>name:<input type="text" v-model="name"></h2>
  <h2>name:<input type="text" v-model="age"></h2>

</template>

<script>
import {ref,reactive,toRefs,isRef} from 'vue';
export default {
  name: "ComApi",
  data(){
      return {}
  },
  setup(){
    let num1 = 1;
    let myFunction = ()=>{
      num1++;
      console.log(num1);
    };
    let num2 = ref(22);
    // let num3 = isRef(num2)?num2.value=44:num2='20';
    let myFunction2 = (newValue)=>{
      console.log(num2.value);
      num2.value=newValue;
    };
    let user = reactive({
      name:"小王八",
      age:20,
      sex:'♂',
    });
    let user2 = reactive({
      name:"王八",
      age:200,
      sex:'♀',
    });
    return {
      num1,myFunction,num2,myFunction2,user,...toRefs(user2),
    }
  }
}
</script>

<style scoped>

</style>

ref是一个用于创建响应式数据的函数，使用ref可以把一个非响应式的数据变量转换为响应式的变量。ref函数返回一个包含单个属性value的对象，并通过代理将其暴露为普通的 JavaScript对象。这意味着当我们在模板或 JavaScript代码中访问这个对象时，实际上是访问value属性。

reactive函数来创建一个响应式对象。与ref函数不同，reactive函数可以对整个对象进行响应式处理，而不仅限于对象属性的单个值。

toRefs函数将响应式对象中的属性转换为 ref值组成的普通对象，使得我们可以在组件外部访问这些 ref值。toRefs函数的参数设定为一个你已经定义的对象，这种情况下，返回的对象将是我们要的 ref 值组成的普通对象。

2.全转vue3写法

<template>
  <h1>常用API的应用</h1>
  <h2>原生的:{{num1}}</h2>
  <h2>调用方法:{{myFunction}}</h2>
  <h2>ref的变量:{{num2}}</h2>
  <h2 @click="myFunction2(50)" style="color:red">改变</h2>
  <h2>reactive中的对象类型:{{user}}--{{user.sex}}</h2>
  <h2>{{name}}--{{sex}}--{{age}}</h2>
  <h2>name:<input type="text" v-model="name"></h2>
  <h2>name:<input type="text" v-model="age"></h2>
</template>

<script setup>
import {ref,reactive,toRefs,isRef} from 'vue';
    let num1 = 1;
    let myFunction = ()=>{
      num1++;
      console.log(num1);
    };
    let num2 = ref(22);
    // let num3 = isRef(num2)?num2.value=44:num2='error';
    let myFunction2 = (newValue)=>{
      console.log(num2.value);
      num2.value=newValue;
    };
    let user = reactive({
      name:"小王八",
      age:20,
      sex:'♂',
    });
    let user2 = reactive({
      name:"王八",
      age:200,
      sex:'♀',
    });
    const { name,sex,age } = toRefs(user2);
</script>

<style scoped>

</style>

没啥说的，vue3语法糖中没有return，所以toRefs就用解构赋值。

解构赋值（destructuring assignment）是一种 JavaScript 语法，可以方便地从对象或数组中提取需要的值，并赋值给变量。它可以让代码更加简洁易读，是现代 JavaScript 中经常使用的一种语法。