vue3其他
1. 其它 API1.1.【shallowRef 与 shallowReactive 】shallowRef 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。 用法： 1let myVar = shallowRef(initialValue); 特点：只跟踪引用值的变化，不关心值内部的属性变化。 shallowReactive 作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的 用法： 1const myObj = shallowReactive({ ... }); 特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。 总结 通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。 1.2.【readonly 与...
组件通信
1. 组件通信Vue3组件通信和Vue2的区别： 移出事件总线，使用mitt代替。 vuex换成了pinia。 把.sync优化到了v-model里面了。 把$listeners所有的东西，合并到$attrs中了。 $children被砍掉了。 常见搭配形式： 1.1. 【props】概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。 若 父传子：属性值是非函数。 若 子传父：属性值是函数。 父组件： 1234567891011121314151617181920<template> <div class="father"> <h3>父组件，</h3> <h4>我的车：{{ car }}</h4> <h4>儿子给的玩具：{{ toy }}</h4> <Child...
Pinia
1. pinia1.1【准备一个效果】 1.2【搭建 pinia 环境】第一步：npm install pinia 第二步：操作src/main.ts 12345678910111213import { createApp } from 'vue'import App from './App.vue'/* 引入createPinia，用于创建pinia */import { createPinia } from 'pinia'/* 创建pinia */const pinia = createPinia()const app = createApp(App)/* 使用插件 */{}app.use(pinia)app.mount('#app') 此时开发者工具中已经有了pinia选项 1.3【存储+读取数据】 Store是一个保存：状态、业务逻辑...
路由
1. 路由1.1. 【对路由的理解】 1.2. 【基本切换效果】 Vue3中要使用vue-router的最新版本，目前是4版本。 路由配置文件代码如下： 12345678910111213141516171819import {createRouter,createWebHistory} from 'vue-router'import Home from '@/pages/Home.vue'import News from '@/pages/News.vue'import About from '@/pages/About.vue'const router = createRouter({ history:createWebHistory(), routes:[ { path:'/home', component:Home }, { ...
自定义hook
3.14. 【自定义hook】 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。 示例代码： useSum.ts中内容如下： 123456789101112131415161718import {ref,onMounted} from 'vue'export default function(){ let sum = ref(0) const increment = ()=>{ sum.value += 1 } const decrement = ()=>{ sum.value -= 1 } onMounted(()=>{ increment() }) //向外部暴露数据 return...
生命周期
1....
标签的 ref 属性和 props
1. 【标签的 ref 属性和 】作用：用于注册模板引用。 用在普通DOM标签上，获取的是DOM节点。 用在组件标签上，获取的是组件实例对象。 用在普通DOM标签上： 123456789101112131415161718192021222324252627282930313233<template> <div class="person"> <h1 ref="title1">学习</h1> <h2 ref="title2">前端</h2> <h3 ref="title3">Vue</h3> <input type="text" ref="inpt"> <br><br> <button...
watch和watchEffect
1.【watch】 作用：监视数据的变化（和Vue2中的watch作用一致） 特点：Vue3中的watch只能监视以下四种数据： ref定义的数据。 reactive定义的数据。 函数返回一个值（getter函数）。 一个包含上述内容的数组。 我们在Vue3中使用watch的时候，通常会遇到以下几种情况： * 情况一监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。 123456789101112131415161718192021222324<template> <div class="person"> <h1>情况一：监视【ref】定义的【基本类型】数据</h1> <h2>当前求和为：{{sum}}</h2> <button @click="changeSum">点我sum+1</button> ...
computed
1. 【computed】作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。 123456789101112131415161718192021222324252627282930313233343536373839<template> <div class="person"> 姓：<input type="text" v-model="firstName"> <br> 名：<input type="text" v-model="lastName"> <br> 全名：<span>{{fullName}}</span> <br> <button @click="changeFullName">全名改为：li-si</button> ...
toRefs 与 toRef
1. 【toRefs 与 toRef】 作用：将一个响应式对象中的每一个属性，转换为ref对象。 备注：toRefs与toRef功能一致，但toRefs可以批量转换。 语法如下： 12345678910111213141516171819202122232425262728293031323334<template> <div class="person"> <h2>姓名：{{person.name}}</h2> <h2>年龄：{{person.age}}</h2> <h2>性别：{{person.gender}}</h2> <button @click="changeName">修改名字</button> <button...