MeowRain
Life is SimpleLife is Simple
React Hooks 手动创建react项目 仓库地址 https://github.com/meowrain/Manually-React-Project
https://dev.to/ivadyhabimana/how-to-create-a-react-app-without-using-create-react-app-a-step-by-step-guide-30nl
1 2 3 4 5 6 npm init -y npm install react react-dom npm install --save-dev @babel/core babel-loader @babel/cli @babel/preset-env @babel/preset-react npm install --save-dev webpack webpack-cli webpack-dev-server npm install --save-dev html-webpack-plugin 创建src目录，index.js，public目录和index.html,.babelrc,webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> </body> </html> 1 2 3 webpack：使我们能够在项目中使用 webpack 的实际包 webpack-cli：允许我们在命令行中运行 webpack 命令 webpack-dev-server：Webpack 服务器将在开发环境中充当我们的服务器。如果您熟悉更高级别的开发服务器 live-server 或 nodemon，那么它的工作方式是相同的。 1 2 3 4 5 6 7 8 // index.
官方文档： https://cn.vuejs.org/guide/built-ins/transition.html
使用v-if处理盒子显示和消失 🤓 看上去很生硬，不是吗？我们来用transition组件处理一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <template> <div> <el-button color="#626aef" @click="flag = !flag"> 切换组件</el-button> <Transition name="fade"> <div class="box" v-if="flag">box</div> </Transition> </div> </template> <script setup lang="ts"> import { ref, Transition } from 'vue' let flag = ref<boolean>(true) </script> <style scoped> .
简单使用 TestView.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script setup lang="ts"> </script> <template> <div class="parent"> <slot> </slot> </div> </template> <style scoped> .parent { width: 100px; height: 100px; background-color: aquamarine; } </style> HomeView.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script setup lang="ts"> import TestView from '../views/TestView.vue' </script> <template> <div> <TestView> <template v-slot> <p>HelloWOrld</p> </template> </TestView> </div> </template> <style scoped> </style> 具名插槽 TestView.
keep-alive组件作用 我们的要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用 内置组件将这些动态组件包装起来
1 2 3 4 <!-- 非活跃的组件将会被缓存！ --> <KeepAlive> <component :is="activeComponent" /> </KeepAlive> 举例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 HomeView.vue <template> <div> <el-button color="#626aef" @click="flag = !flag"> 切换组件</el-button> <SonViewOne v-if="flag"/> <SonViewTwo v-else/> </div> </template> <script setup lang="ts"> import {ref} from 'vue' import SonViewOne from './SonViewOne.vue'; import SonViewTwo from './SonViewTwo.vue'; let flag = ref<boolean>(false ); </script> <style scoped></style> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 SonViewOne.
父子组件传值 父组件向子组件传值 defineProps
父组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script setup lang="ts"> import { onMounted, ref } from 'vue' import TestView from '../views/TestView.vue' let imgUrl = ref<string>() onMounted(async ()=>{ const response = await fetch('https://api.waifu.pics/sfw/waifu') const json = await response.json() imgUrl.value = json.url; }) </script> <template> <div> <TestView :url="imgUrl"/> </div> </template> <style></style> 子组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script setup lang="ts"> import { defineProps, toRef, watch, watchEffect } from 'vue'; const props = defineProps({ url:String }) watch(()=>props.
一：主要分为渲染、更新、销毁三个部分
1：渲染顺序 （先父后子，完成顺序：先子后父）
子组件先挂载，然后到父组件
父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted
2：更新顺序 （父更新导致子更新，子更新完成后父）
子组件更新过程
父 beforeUpdate->子 beforeUpdate->子 updated->父 updated
父组件更新过程
父 beforeUpdate->父 updated
3：销毁顺序（ 先父后子，完成顺序：先子后父）
父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script setup lang="ts"> import {watch,ref} from 'vue' let source = ref(''); let length = ref(0); watch(source,(newVal,oldVal)=>{ console.log(oldVal+"发生变化\n"); console.log("新值为："+newVal); length.value = source.value.length; }) </script> <template> <input type="text" v-model="source" /> <span>{{ length }}</span> </template> <style></style> 也可以监听一个值，当发生变化时候进行异步请求，刷新数据
watch监听属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 <script setup lang="ts"> import { ref, computed, reactive } from 'vue' type Data = { name: string price: number num: number } const data = reactive<Data[]>([ { name: 'banana', price: 12, num: 20 }, { name: 'apple', price: 20, num: 100 }, { name: 'orange', price: 10, num: 200 }, { name: 'watermelon', price: 40, num: 20 } ]) const del = (index: number) => { data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script setup lang="ts"> import { reactive, toRaw } from 'vue' let obj = reactive({ name: 'meowrain', like: 'jk' }) let change = () => { console.log(obj) console.log(toRaw(obj)) //解除响应式 } </script> <template> <div> <button @click="change">change</button> <p>obj-{{ obj }}</p> </div> </template> <style></style>
Vue toRef和toRefs妙用 当我们对reactive对象进行解构的时候，解构出来的数据是基本类型，不再具备响应式，没办法更改视图中的
按下按钮后，什么也没变
我们使用toRefs，就能把里面的数据一个个转换为响应式对象返回，再被解构，所有属性依然拥有响应式，还能修改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <script setup lang="ts"> import { reactive, toRef, toRefs } from 'vue' let obj = reactive({ name: 'meowrain', like: 'jk' }) let {name,like} = toRefs(obj); let change = () => { name.value = "meows"; like.value = "luolita" console.log(name,like); } </script> <template> <div> <button @click="change">change</button> <p>obj-{{ obj }}</p> <p>Name-{{ name }}</p> <p>Like-{{ like }}</p> </div> </template> <style></style> 按下按钮，可以发现内容改变了
