《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或JSexport default {name:"Person",// 采用组合式API开发setup(){// 此时的name和age不是响应式的，所以点击按钮更改了名字但并不能显示出来let name="张三";  let age=18;function UpdateName(){name="zhang-san"};function UpdateAge(){age++}function UpdateTel(){alert("Tel:[phone]")}//  将数据、方法交出去，模板中才可以使用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:[phone]")}</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创建-基本类型的响应式数据// 首先 引入refimport {ref} from "vue"let name=ref("张三");  let age=ref(18);function UpdateName(){name.value="zhang-san"};function UpdateAge(){age.value++}function UpdateTel(){alert("Tel:[phone]")}
// =========================================================// 知识点二：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创建-对象类型的响应式数据// 首先 引入reactiveimport {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创建的响应式，要写valuefunction 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来改变姓和名,而不是通过姓和名来改变fullNamelet 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=str1lastName.value=str2}})function changeFullName(){fullName.value="li-si"}
</script>