个人随笔
目录
Vue3技术的学习：创建项目、ref、组件、插槽、数据传递、生命周期
2024-10-27 19:05:25

一、创建项目

1、安装node

Node.js的下载安装

2、安装淘宝镜像源

  1. #查看源地址
  2. npm config get registry
  3. #设置源地址
  4. npm config set registry https://registry.npmmirror.com

3、创建一个vue应用

参考文档
https://cn.vuejs.org/guide/quick-start.html

  1. npm create vue@latest

这里我们去到自己的工作目录下面，然后执行，上面的命令，这里我全部选择否，后面要用到再说，启动发现要vite，那么我这里是直接在该项目下面安装

  1. npm install vite --save-dev

当然全局安装更好

  1. npm install -g vite



4、用npm init vite@latest来创建项目

  1. npm init vite@latest

我这里选的是Vue和JavaScript
然后执行如下命令即可启动

  1.   cd vue02
  2.   npm install
  3.   npm run dev


可以看到这两个命令创建的页面还是有点区别的，本人比较喜欢第二种

  1. npm init vite@latest

5、总之，执行下面的命令即可

  1. npm init vite@latest
  2.   cd 项目
  3.   npm install
  4.   npm run dev

参考：https://cn.vuejs.org/guide/scaling-up/tooling.html
然后用开发工具打开即可，vscode或者IDEA

二、基础知识点

我们从官网就可以学到所有的内容，这里只是自我学习列出一些关键知识点，我们这里的学习都用的是组合式API，具体有什么区别可以见官网
https://cn.vuejs.org/

1、通过ref()声明响应式状态

  1. <script setup>
  2. import  { ref } from 'vue'
  3. const count = ref(0)
  4. </script>
  6. <template>
  7.   <div>
  8.         <div @click="count++">点我增加{{count}}</div>
  9.   </div>
  10. </template>
  12. <style scoped>
  14. </style>

2、模版语法

文本插值、原始HTML、Attribute 绑定、JavaScript 表达式等

  1. <script setup>
  2. import  { ref } from 'vue'
  3. const count = ref(0)
  4. const msg = ref('文本插值')
  5. const rawHtml = ref('<div style="color:red">原始HTML</div>')
  6. const xiaolin = ref('xiaolin')
  7. const name = ref('pidan')
  8. </script>
  10. <template>
  11.   <div>
  12.         <div @click="count++">点我增加{{count}}</div>
  13.         <div>{{msg}}</div>
  14.         <p>Using text interpolation: {{ rawHtml }}</p>
  15.         <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  16.         <!-- v-bind可以简写为:id-->
  17.         <div v-bind:id="xiaolin" :name="name">Attribute 绑定</div>
  18.         使用 JavaScript 表达式
  19.         <div>{{count+100}}</div>
  20.   </div>
  21. </template>
  23. <style scoped>
  25. </style>

更多模版语法教程见
https://cn.vuejs.org/guide/essentials/template-syntax.html

3、计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。

  1. import  { ref ,computed } from 'vue'
  2. const count = ref(0)
  3. const publishedBooksMessage = computed(() => {
  4.     console.log("计算过程执行了")
  5.   return count.value+1;
  6. })
  7. ...
  8. <div @click="count++">点我增加{{count}}</div>
  9. <div>计算属性的值1={{publishedBooksMessage}}</div>
  10. <div>计算属性的值2={{publishedBooksMessage}}</div>
  11. ...

可以看到，count的变化会导致publishedBooksMessage的变化，并且页面初始化的时候，计算属性也只计算了一次，这个也是跟方法的区别，方法的话如果你div里面用了两次，那么肯定会执行两次，具体可以看
https://cn.vuejs.org/guide/essentials/computed.html

4、侦听器

计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。

  1. import  { ref ,computed,watch  } from 'vue'
  2. // 可以直接侦听一个 ref
  3. watch(count, async (newQuestion, oldQuestion) => {
  4.     console.log("newQuestion="+newQuestion)
  5.     console.log("oldQuestion="+oldQuestion)
  6. })
  7. ...
  8. <div @click="count++">点我增加{{count}}</div>
  9. ...

具体看
https://cn.vuejs.org/guide/essentials/watchers.html

5、模版引用

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute：

  1. <script setup>
  2. import { useTemplateRef, onMounted } from 'vue'
  4. // 第一个参数必须与模板中的 ref 值匹配
  5. const input = useTemplateRef('my-input')
  7. onMounted(() => {
  8.   input.value.focus()
  9. })
  10. </script>
  12. <template>
  13.   <input ref="my-input" />
  14. </template>

更多参考：https://cn.vuejs.org/guide/essentials/template-refs.html

组件上的 ref

模板引用也可以被用在一个子组件上。这种情况下引用中获得的值是组件实例：
使用了<script setup>的组件是默认私有的：一个父组件无法访问到一个使用了 <script setup>的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露：

  1. <script setup>
  2. import { ref } from 'vue'
  3. const count = ref(0)
  4. function haha(){
  5.     count.value++;
  6. }
  7. defineExpose({
  8.   count,
  9.   haha
  10. })
  11. </script>
  13. <template>
  14. {{count}}
  15. </template>

然后父组件

  1. <script setup>
  2. import { ref,useTemplateRef } from 'vue'
  3. import HelloWorld from './components/HelloWorld.vue'
  4. const hello = useTemplateRef("helloWorld");
  5. function add(){
  6.     console.log("hello.count",hello.value.count)
  7.    // hello.value.haha();
  8.     hello.value.count++;
  9. }
  10. </script>
  11. <template>
  12.  <HelloWorld ref="helloWorld"></HelloWorld>
  13.  <button @click="add()">点击</button>
  14. </template>

上面可以通过子组件的ref调用方法以及修改值。这里不需要再解包，这个点有点奇怪！

6、组件的定义和使用

定义组件

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。

  1. <script setup>
  2. import { ref } from 'vue'
  4. const count = ref(0)
  5. </script>
  7. <template>
  8.   <button @click="count++">You clicked me {{ count }} times.</button>
  9. </template>
使用组件
  1. <script setup>
  2. import HelloWorld from './components/HelloWorld.vue'
  3. </script>
  5. <template>
  6.  <HelloWorld></HelloWorld>
  7. </template>

参考：https://cn.vuejs.org/guide/essentials/component-basics.html

三、组件进阶知识点

我们在上面已经学过来组件的基本定义和使用，下面来学一些组件的高级用法，具体可见官网
https://cn.vuejs.org/guide/components/registration.html

1、父组件向子组件传递参数

这里用的是props,一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props
在子组件中定义

  1. <script setup>
  2. const props = defineProps(['foo'])
  3. </script>
  5. <template>
  6.   <div>{{props.foo}}</div>
  7. </template>

此时，父组件只需要

  1. <script setup>
  2. import HelloWorld from './components/HelloWorld.vue'
  3. </script>
  5. <template>
  6.  <HelloWorld foo="123"></HelloWorld>
  7. </template>

即可把123传过去，当然可以用:foo=”foo”动态变化。

2、子组件向父组件传递参数

这个要用组件事件
在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

  1. <script setup>
  2. </script>
  3. <template>
  4. <button @click="$emit('someEvent','123')">Click Me</button>
  5. </template>

然后在父组件中

  1. <script setup>
  2. import HelloWorld from './components/HelloWorld.vue'
  3. function callback(a){
  4.     console.log(a);
  5. }
  6. </script>
  8. <template>
  9.  <HelloWorld @some-event="callback"></HelloWorld>
  10. </template>

这样就可以把123从子组件传递到父组件了。

声明触发的事件

  1. #我们在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用：
  2. <script setup>
  3. const emit = defineEmits(['some-event'])
  4. function send(){
  5.     emit("some-event","123")
  6. }
  7. </script>
  8. <template>
  9. <button @click="send()">Click Me</button>
  10. </template>

父组件一样可以拿到数据。

3、通过组件 v-model来实现双向绑定传值

v-model 可以在组件上使用以实现双向绑定。
子组件

  1. <script setup>
  2. const model = defineModel()
  3. </script>
  5. <template>
  6.   <div>子组件中的值： {{ model }}</div>
  7.   <button @click="model++">子组件中的按钮</button>
  8. </template>

父组件

  1. <script setup>
  2. import { ref } from 'vue'
  3. import HelloWorld from './components/HelloWorld.vue'
  4. const countModel =ref(0)
  5. </script>
  7. <template>
  8.  <HelloWorld v-model="countModel"></HelloWorld>
  9.  <div>父组件中的值{{countModel}}</div>
  10.   <button @click="countModel++">父组件中的按钮</button>
  11. </template>

效果是，我们不管点击父组件中的按钮还是子组件中的按钮修改了值，父子都是同时变化。
感叹：这方法好啊
https://cn.vuejs.org/guide/components/v-model.html

4、插槽

在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。此时就需要用到插槽slot.
官方文档：https://cn.vuejs.org/guide/components/slots.html

子组件

  1. <script setup>
  3. </script>
  5. <template>
  6. <button class="fancy-btn">
  7.   <slot></slot> <!-- 插槽出口 -->
  8. </button>
  9. </template>

父组件

  1. <script setup>
  2. import { ref } from 'vue'
  3. import HelloWorld from './components/HelloWorld.vue'
  4. const count =ref(0)
  5. </script>
  7. <template>
  8.  <HelloWorld>
  9.     我是插槽内容{{count}}
  10.  </HelloWorld>
  11.   <button @click="count++">add</button>
  12. </template>

点击父组件的add，插槽内容是会变化的应为，插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。

父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

匿名插槽

上面的例子就是你们插槽，也是默认插槽

具名插槽

插槽可以带有名字
子组件

  1. <script setup>
  3. </script>
  5. <template>
  6. <div class="container">
  7.   <header>
  8.     <slot name="header"></slot>
  9.   </header>
  10.   <main>
  11.     <slot></slot>
  12.   </main>
  13.   <footer>
  14.     <slot name="footer"></slot>
  15.   </footer>
  16. </div>
  17. </template>

父组件

  1. <script setup>
  2. import HelloWorld from './components/HelloWorld.vue'
  3. </script>
  5. <template>
  6.  <HelloWorld>
  7.     <template  v-slot:header>
  8.        <h1>具名插槽显示内容header</h1>
  9.      </template>
  11.      <template #default>
  12.        默认插槽显示内容
  13.      </template>
  15.      <template #footer>
  16.        <p>具名插槽显示内容footer</p>
  17.      </template>
  18.  </HelloWorld>
  19. </template>

v-slot 有对应的简写 #，因此<template v-slot:header>可以简写为<template #header>。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。

当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非<template> 节点都被隐式地视为默认插槽的内容。所以上面也可以写成：

  1. <script setup>
  2. import HelloWorld from './components/HelloWorld.vue'
  3. </script>
  5. <template>
  6.  <HelloWorld>
  7. 123
  8.     <template  v-slot:header>
  9.        <h1>具名插槽显示内容header</h1>
  10.      </template>
  12.        默认插槽显示内容
  15.      <template #footer>
  16.        <p>具名插槽显示内容footer</p>
  17.      </template>
  18.  </HelloWorld>
  19. </template>

插槽获取子组件的内容

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的，但是我们假设想用子组件的内容来渲染插槽怎么办呢，此时就需要用作用域插槽。

我们也确实有办法这么做！可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes：

  1. <script setup>
  2. import { ref } from 'vue'
  3. const greetingMessage = ref("子组件的数据")
  4. </script>
  6. <template>
  7. <slot :text="greetingMessage" :count="1"></slot>
  8. </template>

当需要接收插槽 props 时，默认插槽和具名插槽的使用方式有一些小区别。下面我们将先展示默认插槽如何接受 props，通过子组件标签上的 v-slot 指令，直接接收到了一个插槽 props 对象：

  1. <script setup>
  2. import HelloWorld from './components/HelloWorld.vue'
  3. </script>
  5. <template>
  6.  <HelloWorld v-slot="slotProps">
  7.     {{slotProps.text}},{{slotProps.count}}
  8.  </HelloWorld>
  9. </template>

具名插槽其实也差不多

  1. <script setup>
  2. import { ref } from 'vue'
  3. const greetingMessage = ref("子组件的数据")
  4. </script>
  6. <template>
  7. <slot name="abc" :text="greetingMessage" :count="1"></slot>
  8. </template>

父组件

  1. <script setup>
  2. import HelloWorld from './components/HelloWorld.vue'
  3. </script>
  5. <template>
  6.  <HelloWorld #abc="slotProps">
  7.     {{slotProps.text}},{{slotProps.count}}
  8.  </HelloWorld>
  9. </template>

5、依赖注入

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一棵巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。
参考文档：https://cn.vuejs.org/guide/components/provide-inject.html

provide 和 inject 可以帮助我们解决这一问题 。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

Provide (提供)
  1. <script setup>
  2. import { inject } from 'vue'
  3. const message = inject('message')
  4. </script>
  6. <template>
  7. {{message}}
  8. </template>
Inject (注入)
  1. <script setup>
  2. import { provide } from 'vue'
  3. import HelloWorld from './components/HelloWorld.vue'
  4. provide('message','hello!')
  5. </script>
  6. <template>
  7.  <HelloWorld></HelloWorld>
  8. </template>

如果注入的是个ref

  1. <script setup>
  2. import { ref,provide } from 'vue'
  3. import HelloWorld from './components/HelloWorld.vue'
  5. const count = ref(0)
  7. provide('message',count)
  8. </script>
  9. <template>
  10.  <HelloWorld></HelloWorld>
  11.  <button @click="count++">点击</button>
  12. </template>

父组件值变化后，子组件中也会同时变化。

子组件修改值，父组件也会变化

  1. <script setup>
  2. import { ref,provide } from 'vue'
  3. import HelloWorld from './components/HelloWorld.vue'
  5. const count = ref(0)
  7. provide('message',count)
  8. </script>
  9. <template>
  10.  {{count}}
  11.  <HelloWorld></HelloWorld>
  12.  <button @click="count++">点击</button>
  13. </template>

思考：这岂不是也是一种父子之间传递值的好方法？

四、有用的API

1、生命周期钩子

参考：https://cn.vuejs.org/api/composition-api-lifecycle.html

2、nextTick()

等待下一次 DOM 更新刷新的工具方法。

当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。

nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

  1. <script setup>
  2. import { ref, nextTick } from 'vue'
  4. const count = ref(0)
  6. async function increment() {
  7.   count.value++
  9.   // DOM 还未更新
  10.   console.log(document.getElementById('counter').textContent) // 0
  12.   await nextTick()
  13.   // DOM 此时已经更新
  14.   console.log(document.getElementById('counter').textContent) // 1
  15. }
  16. </script>
  18. <template>
  19.   <button id="counter" @click="increment">{{ count }}</button>
  20. </template>

参考：https://cn.vuejs.org/api/general.html#nexttick

所有api见：https://cn.vuejs.org/api/

五、相关总结

1、父子组件数据传递的方法

  • 1、props（父->子）
  • 2、emit（子->父）
  • 3、依赖注入（父<->子）
  • 4、组件引用（父<->子）
  • 5、v-model（父<->子）
 18

啊！这个可能是世界上最丑的留言输入框功能~


当然，也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2