《Vue3学习手记》

下面进入Vue3的学习，以下代码中都有很详细的注释，代码也比较清晰易懂：

Vue3

index.html是入口文件
Vue3通过createApp函数创建一个应用实例
main.ts:

// Vue3中通过createApp函数创建应用实例
// 引入createApp用于创建应用
import { createApp } from 'vue'
// 引入App根组件
import App from './App.vue'

createApp(App).mount('#app')

Vue2的API设计是options(配置)风格的
Vue3的API设计是composition(组合)风格的

setup初使用

setup是Vue3中的一个新的配置项，值是一个函数，setup函数中的this是undefined

  <script>
  // TS或JS
  export default {
    name:"Person",
    // 采用组合式API开发
    setup(){
      // 此时的name和age不是响应式的，所以点击按钮更改了名字但并不能显示出来
      let name="张三";  
      let age=18;
      function UpdateName(){
          name="zhang-san"
      };
      function UpdateAge(){
          age++
      }
      function UpdateTel(){
          alert("Tel:18888888888")
      }
    //  将数据、方法交出去，模板中才可以使用
      return {name,age,UpdateName,UpdateAge,UpdateTel}
    }
  }

注意：
data、methods和setup可以一起使用，但是不建议
setup不能读取data中的数据
但data可以读取setup中的数据

setup语法糖

可以将上面的代码简写为：

<script lang="ts" setup name="Person">
      let name="张三";  
      let age=18;
      function UpdateName(){
          name="zhang-san"
      };
      function UpdateAge(){
          age++
      }
      function UpdateTel(){
          alert("Tel:18888888888")
      }
  </script>
  

ref创建-基本类型和对象类型的响应式数据

当用ref创建响应式时,要加.value

<template>
    <div class="app">
      <h2>你好啊!{{name}}</h2>
      <h2>年龄{{age}}</h2>
      <button @click="UpdateName">点我修改名字</button>
      <button @click="UpdateAge">点我年龄加1</button>
      <button @click="UpdateTel">点我显示联系方式</button>
      <hr>
      <h2>{{car.brand}}汽车的价格是{{car.price}}万元</h2>
      <button @click="changeName">点击修改汽车名字</button>
      <button @click="changePrice">点击修改汽车价格</button>
      <button @click="changeInfo">点击修改汽车信息</button>
    </div>
  </template>
  
  <script lang="ts" setup name="Person">
  // 知识点一：ref创建-基本类型的响应式数据
  // 首先 引入ref
  import {ref} from "vue"
      let name=ref("张三");  
      let age=ref(18);
      function UpdateName(){
          name.value="zhang-san"
      };
      function UpdateAge(){
          age.value++
      }
      function UpdateTel(){
          alert("Tel:18888888888")
      }
// =========================================================
      // 知识点二：ref创建-对象类型的响应式数据
      let car=ref({brand:"大众",price:20})
      function changeName(){
        car.value.brand="宝马"   //注意这里的写法！当用ref创建响应式时，car不是响应式，car.value才是响应式
      };
      function changePrice(){
        car.value.price=100
      }
// =========================================================
      // 知识点三：ref创建-对象类型的响应式数据-重新分配对象
          // 点击按钮同时修改汽车名称和价格信息，即需要修改car对象里的所有数据
      function changeInfo (){
        // car.value.brand="宝马"
        // car.value.price=100
        // 上面的写法可以实现，但是当数据过多时，太麻烦；用下面的写法更容易实现
        car.value={brand:"宝马",price:100}
      }
  </script>
  
  

reactive创建-对象类型的响应式数据以及Object.assign

当用reactive创建响应式时，直接写，不用写value

<template>
    <div class="app">
      <h2>{{car.brand}}汽车的价格是{{car.price}}万元</h2>
      <button @click="changeName">点击修改汽车名字</button>
      <button @click="changePrice">点击修改汽车价格</button>
      <button @click="changeInfo">点击修改汽车信息</button>
      <h2>游戏栏目：</h2>
      <ul>
        <li v-for="game in games" :key="game.id">{{game.name}}</li>
      </ul>
    </div>
  </template>
  
  <script lang="ts" setup name="Person">
  // 知识点一：reactive创建-对象类型的响应式数据
  // 首先 引入reactive
  import {reactive} from "vue"
      let car=reactive({brand:"大众",price:20})
      function changeName(){
        car.brand="宝马"   //注意这里的写法！
      };
      function changePrice(){
        car.price=100
      }
      // reactive创建-数组对象类型的响应式数据
      let games=reactive([
        {id:"01",name:"王者荣耀"},
        {id:"02",name:"我的世界"},
        {id:"03",name:"蛋仔派对"}
      ])
// =========================================================
      // 知识点二：reactive创建-对象类型的响应式数据-重新分配对象
          // 点击按钮同时修改汽车名称和价格信息，即需要修改car对象里的所有数据
      function changeInfo (){
        // car.brand="宝马"
        // car.price=100
        // 上面的写法可以实现，但是当数据过多时，太麻烦；用下面的写法更容易实现
        // car={brand:"宝马",price:100}   //当用reactive创建响应式,需要重新分配对象这样写页面不能更新
        // 需要使用Object.assign()
        Object.assign(car,{brand:"宝马",price:100})
      }
  </script>

toRef和toRefs

<template>
  <div class="app">
    <h2>个人信息：</h2>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="UpdateName">点我修改名字</button>
    <button @click="UpdateAge">点我年龄加1</button>
    <hr>
    <h2>游戏栏目：</h2>
      <ul>
        <li v-for="game in games" :key="game.id">{{game.name}}</li>
      </ul>
      <button @click="UpdateGameName">点我修改第一个游戏名字</button>
  </div>
</template>

<script lang="ts" setup name="Person">
// 知识点一：toRefs
// 首先 引入toRefs
import {ref,reactive,toRefs,toRef} from "vue"
    let person=reactive({
      name:"张三",
      age:18
    })
    // 按照前边的讲述可以修改信息。但当数据过多时太麻烦，可以先解构再修改
    //let {name,age}=person   //这样写并不能修改数据，person是响应式的，但是name和age并不是。
    let {name,age}=toRefs(person)   //加上toRefs,person是响应式的，解构出的name和age也是响应式的。需要注意：name和age是ref创建的响应式，要写value
    function UpdateName(){
      name.value="李四"
    }
    function UpdateAge(){
      age.value++
    }   
// =========================================================
    // 知识点二:toRef
    // 和toRefs一样，但是toRefs是可以把person中所有属性一次性解构出来，且是响应式；但是toRef需要一个一个解构
    // 用toRef尝试解构数组
    let games=ref([
        {id:"01",name:"王者荣耀"},
        {id:"02",name:"我的世界"},
        {id:"03",name:"蛋仔派对"}
      ])
      let gameName=toRef(games.value[0],"name") //注意写法！！！
    function UpdateGameName(){
      gameName.value="第五人格"
    }
</script>

计算属性computed

计算属性有缓存，不管使用多少次都调用一次
但是方法没有缓存，使用几次调用击此

<template>
  <div class="app">
    <h2>姓：{{firstName}}</h2>
    <h2>名：{{lastName}}</h2>
    <h2>全名：{{fullName}}</h2>
    <!-- <button @click="changeFirstName">点击修改姓</button>
    <button @click="changeLastName">点击修改名</button> -->
    <button @click="changeFullName">点击修改全名</button>
  </div>
</template>

<script lang="ts" setup name="Person">
      // 知识点一：计算属性computed
          // 首先 引入computed
          // 通过修改姓和名来修改全名（此时，fullName是只读的）
import {ref,computed} from "vue"
    let firstName=ref("zhang");
    let lastName=ref("san");
    // let fullName=computed(()=>{   //注意语法
    //   return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+"-"+lastName.value.slice(0)
    // })
    // function changeFirstName(){
    //   firstName.value="li"
    // }
    // function changeLastName(){
    //   lastName.value="si"
    // }
// =========================================================
    // 知识点二:修改fullName,实现fullName既可读又可写。
      // 通过fullName来改变姓和名,而不是通过姓和名来改变fullName
    let fullName=computed({
      get(){
        return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+"-"+lastName.value.slice(0)
      },
      set(val){   //val指的是想要修改的名字
        let [str1,str2]=val.split("-")
        firstName.value=str1
        lastName.value=str2
      }
    }
    )
    function changeFullName(){
      fullName.value="li-si"
    }
</script>