• Vue3的学习

    create-vue创建vue3项目

    create-vue是官方新的脚手架工具，底层切换到了vite（下一代构建工具），为开发提供急速响应

    • 前提环境条件：控制面板输入node -v，显示的是安装了16.0或更高版本的Node.js
    • 创建一个Vue应用：npm init vue@latest
    1. vite.config.js --- 项目的配置文件基于vite的配置
    2. package.json --- 项目包文件核心依赖项是vue3
    3. main.js --- 入口文件createApp函数创建应用实例
    4. app.vue --- 根组件SFC单文件组件script-template
      1. 脚本script和模板template顺序调整
      2. 模板template不再要求唯一根元素
      3. 脚本script添加setup表示支持组合式API
    5. index.html --- 单页入口，提供id为app的挂载点

    创建项目和yun：

    创建一个Vue应用：npm init vue@latest

    接下来会需要输入项目名，此时输入的项目名是：vue_project

    接下来输入执行下面的语句（之后如果要打开项目也是指令，终端要进入项目所在的目录）

    cd vue_project

    npm install

    npm run dev（之后打开项目使用这条语句）

    组合式API

    setup

    执行时，比beforeCreate还要早

    setup函数中，获取不到this（this是underfined）

    vue2的完整写法：

    （定义数据+函数 然后以对象方式return）

    1. <script>
    2.   export default {
    3.     setup(){
    4.       console.log('setup函数')
    5.       const message='hello'
    6.       const logMessage=()=>{
    7.         console.log(message)
    8.       }
    9.       return{
    10.         message,
    11.         logMessage
    12.       }
    13.     },
    14.     beforeCreate() {
    15.       console.log('beforeCreate函数')
    16.     }
    17.   }
    18. </script>
    19. <template>
    20.   <div>{{ message }}</div>
    21.   <button @click="logMessage">按钮</button>
    22. </template>
    vue3的语法糖可以简化return：

    （使用组合式API）

    1.  
    2. <script setup>
    3. //数据
    4. const message='this is a message'
    5. const logMessage=()=>{
    6.   console.log(message)
    7. }
    8. </script>
    9. <template>
    10.   <div>{{ message }}</div>
    11.   <button @click="logMessage">按钮</button>
    12. </template>

    reactive()和ref()

    reactive()

    接收一个对象类型的数据，返回一个响应式的对象

    1. <script setup>
    2.   import {reactive} from "vue";
    3.   const state=reactive({
    4.     count:100
    5.   })
    6.   const setCount=()=>{
    7.     state.count++
    8.   }
    9. </script>
    10.  
    11. <template>
    12.   <div>{{state.count}}</div>
    13.   <button @click="setCount">++</button>
    14. </template>
    ref()

    接收简单类型或复杂类型，返回一个响应式对象

    本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型

    底层：保存复杂类型之后，再借助reactive实现的响应式

    注意：

    • 脚本中访问数据，需要通过.value
    • 在template中，.value不需要加（帮我们扒了一层）
    1. <script setup>
    2.   // import {reactive} from "vue";
    3.   // const state=reactive({
    4.   //   count:100
    5.   // })
    6.   // const setCount=()=>{
    7.   //   state.count++
    8.   // }
    9.   import {ref} from "vue";
    10.   const count=ref(0)
    11.   const setCount=()=>[
    12.       count.value++
    13.   ]
    14. </script>
    15.  
    16. <template>
    17.   <div>{{count}}</div>
    18.   <button @click="setCount">++</button>
    19. </template>

    computed

    步骤：

    • 导入computed函数
    • 执行函数在
    • 回调参数中return基于响应式数据做计算的值，用变量接收

    只读写法：

    可写方法：

    watch函数

    监听一个或多个数据的变化，数据变化时执行回调函数

    监听单个数据
    • 导入watch函数
    • 执行watch监听传入要监听的咸阳市数据（ref对象）和回调函数

    监听多个数据

    不管哪个数据变化都需要监听

    1.其中第三个参数可以写immediate:true，可以立刻执行（例如在打开页面时）

    2.deep深度监视，默认watch进行的是浅层监视

    • const ref1=ref(简单类型)可以直接监视
    • const ref2=ref(复杂类型)监视不到复杂类型内部数据的变化

    3.对于对象中的单个属性，进行监视

    组合式API下的数据传递

    父传子

    由于写了setup，所以无法直接配置props，此处借助于“编译器宏”函数defineProps接收传递的数据

    defineProps原理

    就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换

    子传父

    • 父组件中给子组件标签通过@绑定事件
    • 通过defineEmits编译器宏生成emit方法
    • 子组件内部通过emit方法触发事件

    模板引用

    概念：通过ref标识获取真实的都没对象或者组件实例对象

    1. 通过ref函数，生成一个ref对象 
    2. 通过ref标识，进行绑定
    3. 通过ref对象，value即可访问到绑定的元素

    defineFxpose()

    在默认情况下