vue3 onMounted的坑

最新推荐文章于 2024-10-27 22:30:50 发布

Bejpse

最新推荐文章于 2024-10-27 22:30:50 发布

阅读量1.7k

点赞数

分类专栏：前端 html 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Bejpse/article/details/123369097

版权

在Vue3中，如果将onMounted钩子函数放在组件的return语句之后，会导致只有onMounted内的代码被执行，其他return的内容无法正常显示。为确保组件正常工作，onMounted应当置于return之前。

摘要由CSDN通过智能技术生成

onMounted的坑

当放在return后面

只显示onmounted里面的函数

<template>
  <h1>我是Vue3</h1>
  <h2>name:{
  {name}}</h2>
  <h2>age:{
  {age}}</h2>
  <h2>{
  {position.age}}</h2>
  <h2 v-show="position.p">{
  {position.p}}</h2>
  <h2 v-show="position.sex">{
  {position.sex}}</h2>
  <button @click="sayhello">sayhello</button>
  <button @click="tellposition">position</button>
  <button @click="addsex">添加一个sex属性</button>
  <button @click="deletename">删除name属性</button>

  <hr>
  <h2>当前点击时鼠标的坐标为{
  {point.x}}-{
  {point.y}}</h2>
</template>

<script>

import {ref,reactive,onMounted} from 'vue'
export default {

  name: 'App',
  setup(){
     let name=ref("张三");
    let age=