vue3 onMounted的坑

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=ref(18);
    let point=reactive({
      x:0,
      y:0
    })
    let  position=reactive({
      p:"engineer",
      age:18
    })

    function sayhello(){
      alert(name.value+age.value)
    }
    function tellposition(){
      console.log(position),
          position.p="ui"
      position.age=19
    }
    function  addsex(){
        position.sex="nu"
    }
    function  deletename(){
        delete position.p
    }

      
    return{
      name,
      age,
      sayhello,
      position,
      tellposition,
      addsex,
      deletename,
      point
    },
    onMounted(()=>{
      window.addEventListener('click',(event)=>{
        point.x=event.pageX;
        point.y=event.pageY
      })
    })
  }

}
</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>

所以onMounted得放在return前面

<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=ref(18);
    let point=reactive({
      x:0,
      y:0
    })
    let  position=reactive({
      p:"engineer",
      age:18
    })

    function sayhello(){
      alert(name.value+age.value)
    }
    function tellposition(){
      console.log(position),
          position.p="ui"
      position.age=19
    }
    function  addsex(){
        position.sex="nu"
    }
    function  deletename(){
        delete position.p
    }

      onMounted(()=>{
      window.addEventListener('click',(event)=>{
        point.x=event.pageX;
        point.y=event.pageY
      })
    })
    return{
      name,
      age,
      sayhello,
      position,
      tellposition,
      addsex,
      deletename,
      point
    }
   
  }

}
</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>