vue3笔记

响应式基础

ref函数：可处理基本数据类型，对象

reactive函数：可处理对象，数组

<template>
  <h1>name:{{ name }}</h1>
  <h1>age:{{ age }}</h1>
  <button @click="say">say</button>
  <button @click="change">change</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    //基本数据
    let name = ref("xiao"); //包装成ref引用对象，想取出值就要用name.value
    let age = ref(18);
    //对象
    let job = ref({
      type: "front-end engineer",
      salary: "30k",
    });
    let school = reactive({
      name: "bupt",
    });
    //数组
    let hobby = reactive(["sing", "dance"]);

    function say() {
      alert(`hello, my name is ${name}, age is ${age}`);
    }

    function change() {
      name.value = "hahaha";
      age.value = 20;
      job.value.salary = "40k";
      school.name = "buptt";
      hobby[0] = "draw";
    }

    return {
      name,
      age,
      say,
      change,
    };
  },
};
</script>

ref绑定DOM元素

1. 通过ref='demo1'设置dom的ref值，通过this.$refs.demo1或者this.$refs['demo1']获取到该dom元素 

<div ref="demo1">demo1</div>

2.  使用ref函数定义一个变量val，并且在我们想要获取的dom上，写上属性ref=“val”，那么这个dom就被保存进这个变量了。

<script setup>
import { ref, onMounted } from "vue";
const val = ref(null);
//组件挂载完毕之后才能获得这个ref对象
onMounted(()=>{
    console.log(ref.value);//通过.value可以拿到dom对象 <div>aaa</div>
});
</script>

<template>
//通过ref标识绑定ref对象
<div ref="val">aaa</div>
</template>