MeowRain

简单使用 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> 按下按钮，可以发现内容改变了

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script setup lang="ts"> import { ref } from 'vue' const dom = ref<HTMLDivElement>() function change() { console.log(dom.value?.innerText) } </script> <template> <div> <button @click="change">change</button> <div ref="dom">Hello Meowrain</div> </div> </template> <style></style> 在元素上添加ref="变量名",script中写const dom = ref<HTMLDivElement>()，因为采用了setup语法糖，如果直接写在script标签中，得到的结果就是undefined,只有在函数中才能调用. 问题：vue3中reactive对象赋值，不能响应式变化 在使用vue3中，使用reactive创建的对象或者数组进行赋值时，可以正常赋值，但是不会触发响应式变化。 例子： 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 { ref,reactive } from 'vue' let list = reactive<string[]>([]); let obj = reactive({}); function add(){ setTimeout(()=>{ obj = { name:'meowrain', age:20 } console.

声明响应式状态 ref()​ 在组合式 API 中，推荐使用 ref() 函数来声明响应式状态： 1 2 3 import { ref } from 'vue' const count = ref(0) ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回： 1 2 3 4 5 6 7 const count = ref(0) console.log(count) // { value: 0 } console.log(count.value) // 0 count.value++ console.log(count.value) // 1 要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们： 1 2 3 4 5 6 7 8 9 10 11 12 13 import { ref } from 'vue' export default { // `setup` 是一个特殊的钩子，专门用于组合式 API。 setup() { const count = ref(0) // 将 ref 暴露给模板 return { count } } } 注意，在模板中使用 ref 时，我们不需要附加 .