Vue3学习笔记

1.setup,ref,reactive

<template>
  <div>
    <h1>{{name}}</h1>
    <h1>{{price}}</h1>
    <h1>{{info.player}}</h1>
    <h1>{{info.director}}</h1>
    <h1>{{info.a.b.c}}</h1>
    <h1>{{arr}}</h1>
    <button @click="changeName">按钮</button>
  </div>
</template>

<script>

import { reactive, ref } from "vue"

export default {
  setup(props) {
    let name=ref("十面埋伏")
    let price =ref(37)

    let info=reactive({
      player : '刘德华',
      director : '张艺谋',
      a : {
        b : {
          c : "ccc"
        }
      }
    })

    let arr=reactive(["ET外星人","拯救大兵瑞恩","辛德勒名单"])

    function changeName(){
      name.value="天下无贼"
      price.value=58
      info.player="金城武"
      info.a.b.c="dddd"
      arr[0]="敦刻尔克"
      info.value.director="徐克"
      console.log(name,price,info,arr);
    }

    return {name,price,changeName,info,arr}
  }
}
</script>