vue3定义修改数据，onMounted钩子函数用法

最新推荐文章于 2024-03-27 10:50:59 发布

前端小云儿

最新推荐文章于 2024-03-27 10:50:59 发布

阅读量330

点赞数

分类专栏： vue技能提升文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136069832

版权

vue技能提升专栏收录该内容

46 篇文章 2 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

<template>
  <div id="app">
    <h3>vue3定义修改数据，onMounted钩子函数</h3>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
// 定义变量 ref（基本数据类型） reacive（对象数组）
const msg = ref("王二麻子");
const obj = reactive({ id: 1, name: "张三" });
let id = ref("1");
onMounted(() => {
  log(1);
});

function log() {
  //基础数据类型改变需要使用.value
  id.value += "3";
  //引用数据类型，直接修改
  obj.id = 33;
  console.log(obj, id.value, msg);
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>